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 find the real center coordinates of an Image object?
In this tutorial, we are going to learn how to find the real 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 like angle, opacity etc. In order to find the real center coordinates of an Image object, we use the getCenterPoint method.
Syntax
getCenterPoint(): fabric.Point
Using getCenterPoint Method
Let's see a code example to see the logged output when the getCenterPoint method is used. The getCenterPoint method returns the real center coordinates of an object. In this case the logged output is 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>
The center point of Image object is: {x: 256.5, y: 91}
Using getCenterPoint Method with CropX
In this example, we have used the getCenterPoint method along with cropX property to prove that the logged value of center points will remain the same even when the image is cropped.
<!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 center point of Image object is: {x: 256.5, y: 91}
Key Points
- The
getCenterPointmethod returns the real center coordinates of an Image object - It returns a
fabric.Pointobject with x and y properties - The center coordinates remain consistent even when cropping is applied
- This method is useful for positioning and alignment operations in FabricJS
Conclusion
The getCenterPoint method is essential for finding the real center coordinates of an Image object in FabricJS. It provides consistent results regardless of cropping or other transformations applied to the image.
857 Views
