How to find the translation matrix of a Polygon object using FabricJS?

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 as 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 such as angle, opacity, etc.

To find the translation matrix, we use the _calcTranslateMatrix() method. This method returns an array [1, 0, 0, 1, A, B] with the given values; where A is the X coordinate and B is the Y coordinate.

grammar

_calcTranslateMatrix(): Array

Example 1: Using the _calcTranslateMatrix method

Let's look at a code example on how to find the translation matrix of a polygon using the _calcTranslateMatrix method.

   
   



   
Using the _calcTranslateMatrix method
   

      You can open console from dev tools and see that the logged output contains the translation matrix of the polygon instance
   
   
   

 

Example 2: Using the _calcTranslateMatrix method and the Scale method

Let's look at a code example to understand how the values ​​of the returned array are affected when we apply a transformation to a polygon object. In this case, we used the scale method, which scales the object uniformly in the x and y directions. Scaling transforms the matrix values ​​as shown below.

   
   



   
Using the _calcTranslateMatrix method along with scale method
   

      You can open console from dev tools and see that the logged output contains the translation matrix of the polygon instance
   
   
   

 

in conclusion

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

The above is the detailed content of How to find the translation matrix of a Polygon object using FabricJS?. For more information, please follow other related articles on the PHP Chinese website!