- Trending Categories
- 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 set the position of a Line object with respect to origin?
In this tutorial, we are going to learn about how to set position of Line object with respect to origin 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 set the position of Line object with respect to origin we use the setPositionByOrigin method.
Syntax
setPositionByOrigin(pos: fabric.Point, originX: String, originY: String): void
Parameters
pos − This property accepts a fabric.Point value which allows us to set the new position of the object.
originX − This property accepts a String value which allows us to set the horizontal origin. The possible values are “left”, “center” or “right”.
originY − This property accepts a String value which allows us to set the vertical origin. The possible values are “top”, “center” or “bottom”.
Default position without using the setPositionByOrigin method
Example
Let’s see a code example to see the default position of Line object without using the setPositionByOrigin 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>Default position without using the setPositionByOrigin method </h2> <p>You can see the default position of the line object</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 line = new fabric.Line([200, 100, 100, 40], { stroke: "blue", strokeWidth: 20, }); // Add it to the canvas canvas.add(line); </script> </body> </html>
Using the setPositionByOrigin method
Example
Let’s see a code example to see how the Line object looks like when the setPositionByOrigin method is used. In this case we have specified the new position of the object by initializing a Point object whose x and y coordinates are 500 and 100 respectively. The new position of our line object will be set while considering its horizontal origin as “center” and vertical origin as “top”.
<!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 the setPositionByOrigin method</h2> <p>You can see the new position of the line object</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 line = new fabric.Line([200, 100, 100, 40], { stroke: "blue", strokeWidth: 20, }); // Initiate a Point object var pos = new fabric.Point(500, 100); // Using setPositionByOrigin method line.setPositionByOrigin(pos, "center", "top"); // Add it to the canvas canvas.add(line); </script> </body> </html>