FabricJS – How to get the coordinates of a Line object as if it has a different origin?

FabricJS Javascript HTML5 Canvas

In this tutorial, we are going to learn about how to get the coordinates of a Line as if it has a different 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 find the coordinates of a Line object as if it has a different origin, we use the getPointByOrigin method.

Syntax

 getPointByOrigin(originX: String, originY: String): fabric.Point

Parameters

originX − This parameter accepts a String which specifies the horizontal origin. The possible values are ‘left’, ‘center’ or ‘right’.
originY − This parameter accepts a String which denotes the vertical origin. The possible values are ‘top’, ‘center’ or ‘bottom’.

Using getPointByOrigin method

Example

Let’s see a code example to see the logged output when the getPointByOrigin method is used. The getPointByOrigin method returns the coordinates of an object for a user specified origin. In this case, we have used the getCenterPoint method as well so that you can see the real center points of the given Line object. Whereas while using the getPointByOrigin method, we have taken the bottom left point as origin and therefore the logged output is x= 100 and y= 120.


<!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 getPointByOrigin method</h2>
   <p>
   You can open console from dev tools and see that the logged output contains the coordinates
   </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);
      
      // Using getCenterPoint method
      console.log(
         "The real center point of the object is: ",
         line.getCenterPoint()
      );
      
      // Using getPointByOrigin method
      console.log(
         "The coordinates returned while using getPointByOrigin method are: ",
         line.getPointByOrigin("left", "bottom")
      );
   </script>
</body>
</html>

Using getPointByOrigin method with different values

Example

In this example, we have used the getPointByOrigin method to obtain the coordinates of the Line object when the horizontal and vertical center points are ‘right’ and ‘top’. This means the top-right point will be considered as center.


<!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 getPointByOrigin method with different values</h2>
   <p>
      You can open console from dev tools and see that the logged output contains the coordinates
   </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);
      
      // Using getPointByOrigin method
      console.log(
         "The coordinates returned while using getPointByOrigin method are: ",
         line.getPointByOrigin("right", "top")
      );
   </script>
</body>
</html>

Rahul Gurung

Updated on: 20-Oct-2022

209 Views

Kickstart Your Career

Get certified by completing the course

Get Started