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 translation matrix of a Polygon object using FabricJS?
A translation slides an object to a fixed distance in a given direction. We can create a Polygon object by creating an instance of fabric.Polygon. A polygon object can be characterized by any closed shape consisting of a set of connected straight line segments. 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 translation matrix, we use the _calcTranslateMatrix() method. This method returns an Array with given values [1, 0, 0, 1, A, B]; where A is the X-coordinate and B is the Y-coordinate respectively.
Syntax
_calcTranslateMatrix(): Array
Understanding Translation Matrix
The translation matrix is a 2D transformation matrix that represents how an object is moved from its original position. The format [1, 0, 0, 1, A, B] follows the standard transformation matrix where:
- A: Translation along X-axis
- B: Translation along Y-axis
- The first four values (1, 0, 0, 1) represent scaling and rotation (identity in this case)
Example 1: Using the _calcTranslateMatrix Method
Let's see a code example of how we can find the translation matrix of a polygon by using the _calcTranslateMatrix method.
<!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 the _calcTranslateMatrix method</h2>
<p>
You can open console from dev tools and see that the logged output contains the translation matrix of the polygon instance
</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiating a polygon object
var polygon = new fabric.Polygon(
[
{ x: -20, y: -35 },
{ x: 20, y: -35 },
{ x: 40, y: 0 },
{ x: 20, y: 35 },
{ x: -20, y: 35 },
{ x: -40, y: 0 },
],
{
top: 60,
left: 140,
fill: "red",
}
);
// Adding it to the canvas
canvas.add(polygon);
// Using _calcTranslateMatrix method
console.log(
"The translation matrix of the polygon instance is: ", polygon._calcTranslateMatrix()
);
</script>
</body>
</html>
The translation matrix of the polygon instance is: [1, 0, 0, 1, 140, 60]
Example 2: Using the _calcTranslateMatrix Method along with the Scale Method
Let's see a code example to understand how the values of the returned array are affected when we apply transformations to our polygon object. In this case, we have used the scale method which scales an object equally in x and y directions.
<!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 the _calcTranslateMatrix method along with scale method</h2>
<p>
You can open console from dev tools and see that the logged output contains the translation matrix of the polygon instance
</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiating a polygon object
var polygon = new fabric.Polygon(
[
{ x: -20, y: -35 },
{ x: 20, y: -35 },
{ x: 40, y: 0 },
{ x: 20, y: 35 },
{ x: -20, y: 35 },
{ x: -40, y: 0 },
],
{
top: 60,
left: 140,
fill: "red",
}
);
// Adding it to the canvas
canvas.add(polygon);
// Using scale method
polygon.scale(2);
// Using _calcTranslateMatrix method
console.log(
"The translation matrix of the polygon instance is: ", polygon._calcTranslateMatrix()
);
</script>
</body>
</html>
The translation matrix of the polygon instance is: [1, 0, 0, 1, 140, 60]
Key Points
- The
_calcTranslateMatrix()method returns the translation portion of the transformation matrix - The returned array format is
[1, 0, 0, 1, translateX, translateY] - Translation values correspond to the object's
leftandtopproperties - Scaling doesn't affect the translation matrix values directly
Conclusion
The _calcTranslateMatrix() method provides access to the translation matrix of FabricJS polygon objects. This matrix represents the object's position on the canvas and is useful for understanding object transformations.
312 Views
