Heim > Artikel > Web-Frontend > Wie finde ich die Übersetzungsmatrix eines Polygon-Objekts mit FabricJS?

Wie finde ich die Übersetzungsmatrix eines Polygon-Objekts mit FabricJS?

PHPznach vorne: 2023-08-23 16:53:48930Durchsuche

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

Übersetzung verschiebt ein Objekt um einen festen Abstand in eine bestimmte Richtung. 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 Übersetzungsmatrix zu finden, verwenden wir die Methode _calcTranslateMatrix(). Diese Methode gibt ein Array [ 1, 0, 0, 1, A, B] mit den angegebenen Werten zurück, wobei A die X-Koordinate und B die Y-Koordinate ist.

Grammatik

_calcTranslateMatrix(): Array

Beispiel 1: Verwendung der _calcTranslateMatrix-Methode

Schauen wir uns ein Codebeispiel an, wie man die Übersetzungsmatrix eines Polygons mithilfe der Methode _calcTranslateMatrix findet.

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

Beispiel 2: Verwendung der _calcTranslateMatrix-Methode und der Scale-Methode

Sehen wir uns ein Codebeispiel an, um zu verstehen, wie sich die Werte des zurückgegebenen Arrays auswirken, wenn wir eine Transformation auf ein Polygonobjekt anwenden. In diesem Fall haben wir die Skalierungsmethode verwendet, die das Objekt gleichmäßig in x- und y-Richtung skaliert. Durch die Skalierung werden die Matrixwerte wie unten gezeigt transformiert.

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

Fazit

In diesem Tutorial zeigen wir anhand zweier einfacher Beispiele, wie man mit FabricJS die Übersetzungsmatrix eines Polygon-Objekts findet.

Das obige ist der detaillierte Inhalt vonWie finde ich die Übersetzungsmatrix eines Polygon-Objekts mit FabricJS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme：

Dieser Artikel ist reproduziert unter:tutorialspoint.com. Bei Verstößen wenden Sie sich bitte an admin@php.cn löschen

Vorheriger Artikel：Wie ändere ich das src-Attribut eines img-Elements in JavaScript/jQuery?Nächster Artikel：Wie ändere ich das src-Attribut eines img-Elements in JavaScript/jQuery?

In Verbindung stehende Artikel

Mehr sehen