Home > Article > Web Front-end > FabricJS - How to find the true center coordinates of an Image object?

FabricJS - How to find the true center coordinates of an Image object?

PHPzforward: 2023-08-24 11:09:121328browse

FabricJS – 如何找到 Image 对象的真实中心坐标？

In this tutorial, we will learn how to find the true center coordinates of an Image object using FabricJS. We can create an Image object by creating an instance of fabric.Image. Since it is one of the basic elements of FabricJS, we can also easily customize it by applying properties such as angle, opacity, etc. To find the true center coordinates of the Image object, we use the getCenterPoint method.

grammar

getCenterPoint(): fabric.Point

Use getCenterPointMethod

Example

Let's look at a code example to see the output logged when using the getCenterPoint method. getCenterPoint The method returns the true center coordinates of the object. In this example, the recorded outputs are x= 256.5 and y= 91, 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> 
   <img
      src="https://www.tutorialspoint.com/images/logo.png"
      id="img1"
      style="display: none"
   />
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating the image element
      var imageElement = document.getElementById("img1");
      
      // Initiate an Image object
      var image = new fabric.Image(imageElement, {
         top: 50,
         left: 110,
      });
      
      // Add it to the canvas
      canvas.add(image);
      
      // Using the getCenterPoint method
      console.log(
         "The center point of Image object is: ",
         image.getCenterPoint()
      );
   </script>
</body>
</html>

Use getCenterPoint method and cropX method

Example

In this example, we used the getCenterPoint method and the cropX method to prove that the recorded center point value will remain unchanged.

<!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 along with cropX 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>
   <img
      src="https://www.tutorialspoint.com/images/logo.png"
      id="img1"
      style="display: none"
   />
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating the image element
      var imageElement = document.getElementById("img1");
      
      // Initiate an Image object
      var image = new fabric.Image(imageElement, {
         top: 50,
         left: 110,
         cropX: 70,
      });
      
      // Add it to the canvas
      canvas.add(image);
      
      // Using the getCenterPoint method
      console.log(
         "The center point of Image object is: ",
         image.getCenterPoint()
      );
   </script>
</body>
</html>

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

Statement：

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

Previous article：How to center align text content using JavaScript?Next article：How to center align text content using JavaScript?

See more

FabricJS - How to find the true center coordinates of an Image object?

grammar

Use getCenterPointMethod

Example

Use getCenterPoint method and cropX method

Example

Related articles