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>

Updated on: 25-Oct-2022

817 Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements