FabricJS – Finden Sie die Transformationsmatrix, die die aktuelle Transformation eines Polygonobjekts darstellt?-js-Tutorial-php.cn

FabricJS – Finden Sie die Transformationsmatrix, die die aktuelle Transformation eines Polygonobjekts darstellt?

PHPz

Freigeben： 2023-08-29 12:17:10

nach vorne

1280 Leute haben es durchsucht

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

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.

Grammatik

calcOwnMatrix(): Array

Nach dem Login kopieren

Beispiel 1: Verwendung der calcOwnMatrix-Methode

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>

Nach dem Login kopieren

Beispiel 2: Verwendung der calcOwnMatrix-Methode und der ScaleX-Eigenschaft

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>

Nach dem Login kopieren

Fazit

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!