Wie finde ich die Übersetzungsmatrix eines Polygon-Objekts mit FabricJS?-js-Tutorial-php.cn

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

PHPz

Freigeben： 2023-08-23 16:53:48

nach vorne

985 Leute haben es durchsucht

如何使用 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

Nach dem Login kopieren

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>

Nach dem Login kopieren

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>

Nach dem Login kopieren

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!