简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Home
Article
Q&A
Course
Topic
Download
Game
Dictionary
Recent Updates

Home  >  Article  >  Web Front-end  >  FabricJS - Find the transformation matrix representing the current transformation of a polygon object?

FabricJS - Find the transformation matrix representing the current transformation of a polygon object?

PHPz
PHPzforward
2023-08-29 12:17:101229browse

FabricJS – 找到表示多边形对象当前变换的变换矩阵？

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 transformation matrix that represents the current transformation, we use the calcOwnMatrix method.

grammar

calcOwnMatrix(): Array

Example 1: Using the calcOwnMatrix method

Let's look at a code example to see how to find the transformation matrix that represents the current transformation of a polygon using the calcOwnMatrix method. You can open the console from the development tools to see the array values ​​being displayed. 

<!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 calcOwnMatrix method</h2>
   <p>
      You can open console from dev tools and see that the logged output contains the transform 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: 200, y: 10 },
            { x: 250, y: 50 },
            { x: 250, y: 180 },
            { x: 150, y: 180 },
            { x: 150, y: 50 },
            { x: 200, y: 10 },
         ],
         {
            fill: "green",
            stroke: "blue",
            strokeWidth: 20,
            skewX: 15,
         }
      );
      
      // Adding it to the canvas
      canvas.add(polygon);
      
      // Using calcOwnMatrix method
      console.log(
         "The transform matrix which represents current transformation of the polygon instance is: ",
         polygon.calcOwnMatrix()
      );
   </script>
</body>
</html>

Example 2: Using the calcOwnMatrix method and the ScaleX property

Let's look at a code example to understand how the values ​​of the returned array are affected when we apply horizontal scaling to a polygon object. Here, we passed the value 2 to the scaleX property. This ensures that our polygon object scales 2x horizontally. We can also see in the console that the 0th index value of the returned array has changed. This is because the 0th index represents the scaleX value. 

<!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 calcOwnMatrix method along with scaleX property</h2>
   <p>
      You can open console from dev tools and see that the logged output has changed
   </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: 200, y: 10 },
            { x: 250, y: 50 },
            { x: 250, y: 180 },
            { x: 150, y: 180 },
            { x: 150, y: 50 },
            { x: 200, y: 10 },
         ],
         {
            fill: "green",
            stroke: "blue",
            strokeWidth: 20,
            skewX: 15,
            scaleX: 2,
         }
      );
      
      // Adding it to the canvas
      canvas.add(polygon);
      
      // Using calcOwnMatrix method
      console.log(
         "The transform matrix which represents current transformation of the polygon instance is: ",
         polygon.calcOwnMatrix()
      );
   </script>
</body>
</html>

in conclusion

In this tutorial, we use two simple examples to demonstrate how to use FabricJS to find the transformation matrix that represents the current transformation of a Polygon object.

The above is the detailed content of FabricJS - Find the transformation matrix representing the current transformation of a polygon object?. For more information, please follow other related articles on the PHP Chinese website!

对象 fabric
Statement：
This article is reproduced at:tutorialspoint.com. If there is any infringement, please contact admin@php.cn delete
Previous article：How to make a polygon object react to zoom events using FabricJS?Next article：How to make a polygon object react to zoom events using FabricJS?

Related articles

See more