FabricJS - How to get the position of an Image object relative to the origin?-JS Tutorial-php.cn

FabricJS - How to get the position of an Image object relative to the origin?

王林

Release： 2023-09-16 20:05:02

forward

1243 people have browsed it

FabricJS – 如何获取 Image 对象相对于原点的位置？

In this tutorial, we will learn how to get the position of an Image object relative to its origin 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 get the position of the Image object relative to the origin, we use the getPointByOrigin method.

grammar

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

Copy after login

parameter

originX - This parameter accepts a String specifying the horizontal origin. Possible values are "left", "center", or "right".
originY - This parameter accepts a String representing the vertical origin. Possible values are "Top", "Center", or "Bottom".

Use getPointByOriginMethod

Example

Let's look at a code example to see the output logged when using the getPointByOrigin method. getPointByOrigin The method returns the object coordinates of the origin specified by the user. In this example, we also use the getCenterPoint method so that you can see the true center point of a given Image object. When using the getPointByOrigin method, we use the lower left point as the origin, so the recorded output is x= 110 and y= 132.

<!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>
   <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 getCenterPoint method
      console.log(
         "The real center point of the object is: ",
         image.getCenterPoint()
      );
      
      // Using getPointByOrigin method
      console.log(
         "The coordinates returned while using getPointByOrigin method are: ",
         image.getPointByOrigin("left", "bottom")
      );
   </script>
</body>
</html>

Copy after login

Use getPointByOrigin method with different values

Example

In this example, we use the getPointByOrigin method to obtain the coordinates of the Image object when the horizontal and vertical center points are 'right' and 'top'. This means the top right point will be considered the 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>
   <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 getPointByOrigin method
      console.log(
         "The coordinates returned while using getPointByOrigin method are: ",
         image.getPointByOrigin("right", "top")
      );
   </script>
</body>
</html>

Copy after login

The above is the detailed content of FabricJS - How to get the position of an Image object relative to the origin?. For more information, please follow other related articles on the PHP Chinese website!