How to find the translation matrix of a Polygon object using FabricJS?-JS Tutorial-php.cn

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

PHPz

Release： 2023-08-23 16:53:48

forward

969 people have browsed it

如何使用 FabricJS 查找 Polygon 对象的平移矩阵？

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

Copy after login

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.

<!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>

Copy after login

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.

<!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>

Copy after login

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!