Home > Article > Web Front-end > FabricJS - How to move a Line object one step up in the draw object stack?
FabricJS - How to move a Line object one step up in the draw object stack?
- 王林forward
- 2023-08-24 14:37:08853browse
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
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>
Using the bringForward method
with three objects and intersection keys enabledExample
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>
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!