Heim >Web-Frontend >js-Tutorial >FabricJS – Finden Sie die Transformationsmatrix, die die aktuelle Transformation eines Polygonobjekts darstellt?
Wir können ein Polygon-Objekt erstellen, indem wir eine Instanz von fabric.Polygon erstellen. Ein Polygonobjekt kann als jede geschlossene Form charakterisiert werden, die aus einer Reihe verbundener gerader Liniensegmente besteht. Da es eines der Grundelemente von FabricJS ist, können wir es auch einfach anpassen, indem wir Eigenschaften wie Winkel, Deckkraft usw. anwenden. Um die Transformationsmatrix zu finden, die die aktuelle Transformation darstellt, verwenden wir die Methode calcOwnMatrix.
calcOwnMatrix(): Array
Schauen wir uns ein Codebeispiel an, wie man mit der Methode calcOwnMatrix die Transformationsmatrix findet, die die aktuelle Transformation eines Polygons darstellt. Sie können die Konsole über die Entwicklungstools öffnen, um die angezeigten Array-Werte zu sehen.
<!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>
Sehen wir uns ein Codebeispiel an, um zu verstehen, wie sich die Werte des zurückgegebenen Arrays auswirken, wenn wir eine horizontale Skalierung auf ein Polygonobjekt anwenden. Hier haben wir den Wert 2 an die Eigenschaft „scaleX“ übergeben. Dadurch wird sichergestellt, dass unser Polygonobjekt horizontal um das Zweifache skaliert wird. Wir können in der Konsole auch sehen, dass sich der 0. Indexwert des zurückgegebenen Arrays geändert hat. Dies liegt daran, dass der 0. Index den ScaleX-Wert darstellt.
<!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 diesem Tutorial zeigen wir anhand von zwei einfachen Beispielen, wie Sie mit FabricJS die Transformationsmatrix finden, die die aktuelle Transformation eines Polygon-Objekts darstellt.
Das obige ist der detaillierte Inhalt vonFabricJS – Finden Sie die Transformationsmatrix, die die aktuelle Transformation eines Polygonobjekts darstellt?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!