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.
calcOwnMatrix(): Array
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>
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 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!