How to find the true center coordinates of a Line object using FabricJS?-JS Tutorial-php.cn

Table of Contents

Syntax

Using getCenterPoint Methods

Example

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

Home

Web Front-end

JS Tutorial

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

Sep 16, 2023 pm 12:09 PM

如何使用 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

Copy after login

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.

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
   &lt;!-- Adding the Fabric JS Library--&gt;
   &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
   &lt;h2&gt;Using getCenterPoint method&lt;/h2&gt;
   &lt;p&gt;
      You can open console from dev tools and see that the logged output contains the center points
   &lt;/p&gt;
   &lt;canvas id="canvas"&gt;&lt;/canvas&gt;
   &lt;script&gt;
      
      // 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()
      );
   &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Copy after login

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.

&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
   &lt;!-- Adding the Fabric JS Library--&gt;
   &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"&gt;&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
   &lt;h2&gt;
      Using getCenterPoint method with different starting and ending coordinates of line
   &lt;/h2&gt;
   &lt;p&gt;
      You can open console from dev tools and see that the logged output contains the center points
   &lt;/p&gt;
   &lt;canvas id="canvas"&gt;&lt;/canvas&gt;
   &lt;script&gt;
      
      // 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()
      );
   &lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;

Copy after login

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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn