Home > Article > Web Front-end > How to find the true center coordinates of a Line object using FabricJS?

How to find the true center coordinates of a Line object using FabricJS?

王林forward: 2023-09-16 12:09:031240browse

如何使用 FabricJS 找到 Line 对象的真实中心坐标？

In this tutorial, we will learn how to find the center coordinates of a line using FabricJS. Line element is one of the basic elements provided in 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. To find the true center coordinates of the Line object, we use the getCenterPoint method.

Syntax

 getCenterPoint(): fabric.Point

Using getCenterPoint Methods

Example

Let’s look at a code example to see getCenterPoint Used for the output recorded when the method is run. getCenterPoint The method returns the true center coordinates of the object. In this example, the recorded outputs are x= 110.5 and y= 150.5, which are the center points.

<!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 getCenterPoint method</h2>
   <p>
      You can open console from dev tools and see that the logged output contains the center points
   </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([70, 100, 150, 200], {
         stroke: "blue",
      });
      
      // Add it to the canvas
      canvas.add(line);
      
      // Using the getCenterPoint method
      console.log(
         "The center point of Line object is: ",
         line.getCenterPoint()
      );
   </script>
</body>
</html>

Using the getCenterPoint method with different start and end coordinates of the line

Example

In this example we used the getCenterPoint The i> method obtains the center coordinates when the starting and ending coordinates of the Line instance are (100, 250) and (250, 40). The center points are 175.5 and 145.5.

<!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 getCenterPoint method with different starting and ending coordinates of line
   </h2>
   <p>
      You can open console from dev tools and see that the logged output contains the center points
   </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([100, 250, 250, 40], {
         stroke: "blue",
      });
      
      // Add it to the canvas
      canvas.add(line);
      
      // Using the getCenterPoint method
      console.log(
         "The center point of Line object is: ",
         line.getCenterPoint()
      );
   </script>
</body>
</html>

The above is the detailed content of How to find the true center coordinates of a Line object using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!

对象 fabric

Statement：

This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete

Previous article：How to lock vertical movement of Line using FabricJS?Next article：How to lock vertical movement of Line using FabricJS?

See more

How to find the true center coordinates of a Line object using FabricJS?

Syntax

Using getCenterPoint Methods

Example

Using the getCenterPoint method with different start and end coordinates of the line

Example

Related articles