Home > Article > Web Front-end > FabricJS - How to get the position of an Image object relative to the origin?

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

王林forward: 2023-09-16 20:05:021214browse

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

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>

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>

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!

String 对象 fabric

Statement：

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

Previous article：How to create a canvas with a waiting cursor using FabricJS?Next article：How to create a canvas with a waiting cursor using FabricJS?

See more

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

grammar

parameter

Use getPointByOriginMethod

Example

Use getPointByOrigin method with different values

Example

Related articles