Home > Article > Web Front-end > FabricJS - How to move a line object to a specific index position in the draw object stack?
FabricJS - How to move a line object to a specific index position in the draw object stack?
- 王林forward
- 2023-08-23 14:06:201299browse
In this tutorial, we will learn how to move a Line object to a specified index position in the draw object stack using FabricJS. The Line element is one of the basic elements provided by 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. In order to move the Line object to the specified index position in the drawing object stack, we use the moveTo method.
grammar
moveTo(index: Number): fabric.Object
parameter
index − This parameter accepts a Number value that specifies to which level in the draw object stack we wish to move the object.
Use moveTo method
Example
Let's look at a code example to see the output when using the moveTo method. The moveTo method moves the object to the specified level in the draw object stack. In this case, use the moveTo method to send line2 to the 0th index.
<!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 moveTo method</h2>
<p>
You can see that line2 (red) has been moved to the 0th index 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 moveTo method
line2.moveTo(0);
</script>
</body>
</html>
Use moveTo method with three objects
Example
In this example, we use three line objects, namely line1, line2 and line3. Although they are added to the canvas in numerical order, line3 is clearly behind line2, at the first index position. This is because we used the moveTo method, which moves line3 to the first index position, while line1 and line2 respectively Occupies the 0th and 2nd index positions in the drawing object stack.
<!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 moveTo method with three objects</h2>
<p>
You can see that line3 (green) lies in the 1st index which is middle position in stack
</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,
});
// 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 moveTo method
line3.moveTo(1);
</script>
</body>
</html>
The above is the detailed content of FabricJS - How to move a line object to a specific index position in the draw object stack?. For more information, please follow other related articles on the PHP Chinese website!