Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
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 onedimensional 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
Using getCenterPoint method
Example
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.5 and y= 150.5, 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>
Using getCenterPoint method with different starting and ending coordinates of line
Example
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.5 and 145.5.
<!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>
460 Views
