Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
FabricJS – How to get the position of Image object with respect to origin?
In this tutorial, we are going to learn how to get the position of Image object with respect to 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 like angle, opacity etc. In order to get the position of Image object with respect to origin, we use the getPointByOrigin method.
Syntax
getPointByOrigin(originX: String, originY: String): fabric.Point
Parameters
originX ? This parameter accepts a String which specifies the horizontal origin. The possible values are 'left', 'center' or 'right'.
originY ? This parameter accepts a String which denotes the vertical origin. The possible values are 'top', 'center' or 'bottom'.
Using getPointByOrigin method
Let's see a code example to see the logged output when the getPointByOrigin method is used. The getPointByOrigin method returns the coordinates of an object for a user specified origin. In this case, we have used the getCenterPoint method as well so that you can see the real center points of the given Image object. Whereas while using the getPointByOrigin method, we have taken the bottom left point as origin and therefore the logged 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>
The real center point of the object is: {x: 173, y: 91}
The coordinates returned while using getPointByOrigin method are: {x: 110, y: 132}
Using getPointByOrigin method with different values
In this example, we have used 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 as origin.
<!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 coordinates returned while using getPointByOrigin method are: {x: 236, y: 50}
How It Works
The getPointByOrigin method calculates coordinates based on different reference points of the object. When you specify 'left' and 'bottom', it returns the bottom-left corner coordinates. When you use 'right' and 'top', it returns the top-right corner coordinates. This is useful for precise positioning and alignment operations.
Conclusion
The getPointByOrigin method in FabricJS provides flexibility in determining object positions relative to different origin points. Use it when you need coordinates from specific corners or edges of your Image objects for advanced positioning calculations.
2K+ Views
