Wie füge ich mit FabricJS Koordinaten in einem Polygon hinzu?-js-Tutorial-php.cn

Wie füge ich mit FabricJS Koordinaten in einem Polygon hinzu?

PHPz

Freigeben： 2023-08-24 14:33:02

nach vorne

1024 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. Mit dem Attribut „Punkte“ können wir Koordinaten in einem Polygon hinzufügen. Grammatik

new fabric.Polygon( points: Array, { points: Array }: Object )

Nach dem Login kopieren

Parameter

Punkte - Dieser Parameter akzeptiert ein Array, das das Array von Punkten darstellt, aus denen das Polygonobjekt besteht.
Optionen (optional) – Dieser Parameter ist ein Objekt, das unserem Objekt zusätzliche Anpassungen ermöglicht. Mit diesem Parameter können Sie den Ursprung, die Strichstärke und viele andere Eigenschaften ändern, die mit dem Polygon-Objekt verknüpft sind, dessen Eigenschaft „Punkte“ ist. Wahltaste

– Diese Eigenschaft akzeptiert ein Array, mit dem wir ein Array von Punkten festlegen können. Beispiel 1: Standarddarstellung von Polygonobjekten

Punkte

. Als ersten Parameter selbst haben wir ein Array von Punkten angegeben, das die zu verwendenden Koordinatenwerte 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>Default appearance of Polygon object</h2>
   <p>You can see the Polygon object has been added to the canvas</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: 50,
            left: 50,
         }
      );
      
      // Adding it to the canvas
      canvas.add(polygon);
   </script>
</body>
</html>

Nach dem Login kopieren

Beispiel 2: Verwendung der Points-Eigenschaft In diesem Beispiel haben wir das Punktattribut verwendet und ihm ein

Array

zugewiesen, das aus den Koordinatenwerten des Polygons besteht, wobei jeder Punkt ein Objekt mit einem „x“- und „y“-Wert ist. Wie Sie sehen können, überschreibt es die Werte und verwendet die neuen Koordinaten, obwohl wir die Punkte des Polygon-Objekts angegeben haben, sobald wir die Punkteigenschaften verwenden.

<!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 points property</h2>
   <p>You can see the Polygon object's coordinates have 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 points array
      var points = [
         { x: 0, y: 30 },
         { x: 30, y: 30 },
         { x: 30, y: 0 },
         { x: 0, y: 0 },
      ];
      
      // Initiating a polygon object
      var polygon = new fabric.Polygon(points, {
         top: 50,
         left: 50,
         points: [
            { x: 0, y: 70 },
            { x: 70, y: 70 },
            { x: 70, y: 0 },
            { x: 0, y: 0 },
         ],
      });
      
      // Adding it to the canvas
      canvas.add(polygon);
   </script>
</body>
</html>

Nach dem Login kopieren

Fazit In diesem Tutorial zeigen wir anhand zweier einfacher Beispiele, wie man mit FabricJS Koordinaten in einem Polygon hinzufügt.

Das obige ist der detaillierte Inhalt vonWie füge ich mit FabricJS Koordinaten in einem Polygon hinzu?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!