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 Xcoordinate and B is the Y-coordinate respectively.

Syntax

_calcTranslateMatrix(): Array


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>
<!-- Adding the Fabric JS Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
<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

// Using _calcTranslateMatrix method
console.log(
"The translation matrix of the polygon instance is: ", polygon._calcTranslateMatrix()
);
</script>
</body>
</html>


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. Scaling transforms the matrix values as given below.

<!DOCTYPE html>
<html>
<!-- Adding the Fabric JS Library-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script>
<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

// Using scale method
polygon.scale(2);

// Using _calcTranslateMatrix method
console.log(
"The translation matrix of the polygon instance is: ", polygon._calcTranslateMatrix()
);
</script>
</body>
</html>


Conclusion

In this tutorial, we used two simple examples to demonstrate how you can find the translation matrix of a Polygon object using FabricJS.

Updated on: 02-Jan-2023

117 Views