- Data Structure
- Networking
- RDBMS
- Operating System
- Java
- MS Excel
- iOS
- HTML
- CSS
- Android
- Python
- C Programming
- C++
- C#
- MongoDB
- MySQL
- Javascript
- PHP
- Physics
- Chemistry
- Biology
- Mathematics
- English
- Economics
- Psychology
- Social Studies
- Fashion Studies
- Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
FabricJS β How to move a Line object one step down in the stack of drawn objects?
In this tutorial, we are going to learn about how to move a Line object one step down in the stack of drawn objects using FabricJS. A Line element is one of the basic elements provided in FabricJS. It is used for creating straight lines. Because line elements are geometrically one-dimensional and do not contain an interior, 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 a Line object one step down in the stack of drawn objects, we use the sendBackwards method.
Syntax
sendBackwards(intersecting: Boolean): fabric.Object
Parameters
intersecting β This parameter accepts a Boolean value which when assigned a βtrueβ value, sends the object behind the next lower intersecting object. In case of βfalseβ value, it normally sends the object behind the next object in stack. This parameter is optional.
Using sendBackwards method
Example
Letβs see a code example to see the output when the sendBackwards method is used. The sendBackwards method moves an object one-step down in the stack of drawn objects. In this case line2 is sent behind line1, on using the sendBackwards 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 sendBackwards method</h2> <p> You can see that line2 (red) has been moved down 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 sendBackwards method line2.sendBackwards(); </script> </body> </html>
Using sendBackwards method with three objects and intersection key enabled
Example
In this example, we have used three line objects namely line1, line2 and line3. Although they have been added to the canvas according to their numerical order, line3 clearly lies behind line1. This is because we have used the sendBackwards method with intersection key enabled, which sends line3 behind its next lower intersecting object which is line1.
<!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 sendBackwards method with three objects and intersection key enabled</h2> <p> You can see that the green line now lies behind the blue line which is line number 1 </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 sendBackwards method line3.sendBackwards(true); </script> </body> </html>
To Continue Learning Please Login
Login with Google