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
How to find the real center coordinates of a Line object using FabricJS?
In this tutorial, we are going to learn about how to find the center coordinates of a Line using FabricJS. A Line element is one of the basic elements provided in FabricJS. It is used for creating straight lines. Because line elements are geometrically one-dimensional and do not contain an interior, they are never filled. We can create a line object by creating an instance of fabric.Line, specifying the x and y coordinates of the line and adding it to the canvas. In order to find the real center coordinates of a Line object, we use the getCenterPoint method.
Syntax
getCenterPoint(): fabric.Point
The getCenterPoint method returns a fabric.Point object containing the real center coordinates (x, y) of the line object.
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= 110 and y= 150, 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>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a Line object
var line = new fabric.Line([70, 100, 150, 200], {
stroke: "blue",
});
// Add it to the canvas
canvas.add(line);
// Using the getCenterPoint method
console.log(
"The center point of Line object is: ",
line.getCenterPoint()
);
</script>
</body>
</html>
The center point of Line object is: fabric.Point {x: 110, y: 150}
Using getCenterPoint Method with Different Coordinates
In this example, we have used the getCenterPoint method to obtain the center coordinates of the Line instance when the starting and ending coordinates are (100, 250) and (250, 40). The center points are 175 and 145.
<!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 with different starting and ending coordinates of line
</h2>
<p>
You can open console from dev tools and see that the logged output contains the center points
</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a Line object
var line = new fabric.Line([100, 250, 250, 40], {
stroke: "blue",
});
// Add it to the canvas
canvas.add(line);
// Using the getCenterPoint method
console.log(
"The center point of Line object is: ",
line.getCenterPoint()
);
</script>
</body>
</html>
The center point of Line object is: fabric.Point {x: 175, y: 145}
How It Works
The getCenterPoint method calculates the center point by taking the average of the start and end coordinates. For a line with coordinates [x1, y1, x2, y2], the center point is:
- Center X = (x1 + x2) / 2
- Center Y = (y1 + y2) / 2
Conclusion
The getCenterPoint method in FabricJS provides an easy way to find the exact center coordinates of a Line object. This method is particularly useful for positioning elements or performing calculations based on the line's center point.
519 Views
