FabricJS - How to move a Line object one step up in the draw object stack?-JS Tutorial-php.cn

FabricJS - How to move a Line object one step up in the draw object stack?

王林

Release： 2023-08-24 14:37:08

forward

911 people have browsed it

FabricJS – 如何将 Line 对象在绘制对象堆栈中向上移动一步？

In this tutorial, we will learn how to move a Line object one step up the draw object stack using FabricJS. Line element is one of the basic elements provided in FabricJS. It is used to create straight lines. Since line elements are geometrically one-dimensional and contain no interiors, they are never filled. We can create a line object by creating an instance of fabric.Line, specifying the x and y coordinates of the line and adding it to the canvas. To move the Line object one step up the draw object stack, we use the bringForward method.

grammar

bringForward(intersecting: Boolean): fabric.Object

Copy after login

parameter

Intersecting - This parameter accepts a Boolean value that, when assigned a "true" value, sends the object to the next upper section in front Intersect objects. If the value is "false", it will normally send the object up to the next object on the stack. This parameter is optional.

Use bringForwardMethod

Example

Let's look at a code example to see the output when using the bringForward method. bringForward method moves the object one step up the draw object stack. In this example, line1 is sent on top of line2 using the bringForward method.

<!DOCTYPE html>
<html>
<head>
   <!-- Adding the Fabric JS Library-->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
   <h2>Using bringForward method</h2>
   <p>
      You can see that line1 (blue) has been moved up in the stack of drawn objects
   </p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a Line object
      var line1 = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20,
      });

      // Initiate another Line object
      var line2 = new fabric.Line([200, 70, 70, 40], {
         stroke: "red",
         strokeWidth: 20,
      });

      // Add both to the canvas
      canvas.add(line1);
      canvas.add(line2);

      // Using bringForward method
      line1.bringForward();
   </script>
</body>
</html>

Copy after login

Using the bringForward method

with three objects and intersection keys enabled

Example

In this example, we use three line objects, namely line1, line2 and line3. Although they have been added to the canvas in numerical order, line1 is clearly above line3. This is because we are using the bringForward method with intersection keys enabled, which sends line1 on top of its next upper intersecting object (i.e. line3).

<!DOCTYPE html>
<html>
<head>
   <!-- Adding the Fabric JS Library-->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
</head>
<body>
   <h2>Using bringForward method with three objects and intersection key enabled</h2>
   <p>
      You can see that the blue line now lies above the green line which is line number 3
   </p>
   <canvas id="canvas"></canvas>
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a Line object
      var line1 = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20,
      });

      // Initiate another Line object
      var line2 = new fabric.Line([500, 70, 400, 40], {
         stroke: "red",
         strokeWidth: 20,
      });

      // Initiate another Line object
      var line3 = new fabric.Line([200, 30, 30, 90], {
         stroke: "green",
         strokeWidth: 20,
      });

      // Add them all to the canvas
      canvas.add(line1);
      canvas.add(line2);
      canvas.add(line3);

      // Using bringForward method
      line1.bringForward(true);
   </script>
</body>
</html>

Copy after login

The above is the detailed content of FabricJS - How to move a Line object one step up in the draw object stack?. For more information, please follow other related articles on the PHP Chinese website!