Wie unterscheiden sich Polygone von Polylinien in FabricJS?-js-Tutorial-php.cn

Wie unterscheiden sich Polygone von Polylinien in FabricJS?

王林

Freigeben： 2023-08-27 08:21:17

nach vorne

1164 Leute haben es durchsucht

FabricJS 中的多边形与折线有何不同？

Wir können Polylinienobjekte erstellen, indem wir Instanzen von fabric.Polyline erstellen, während fabric.Polygon zum Erstellen von Polygoninstanzen verwendet werden kann. Ein Polylinienobjekt kann durch eine Reihe verbundener gerader Liniensegmente dargestellt werden. Da es eines der Grundelemente von FabricJS ist, können wir es auch einfach anpassen, indem wir Eigenschaften wie Winkel, Deckkraft usw. anwenden.

Polygone verbinden immer den ersten Punkt mit dem letzten Punkt, um eine geschlossene Fläche zu bilden, Polylinien hingegen nicht. Dies lässt sich anhand des unten aufgeführten Beispiels demonstrieren.

Grammatik

new fabric.Polyline(points: Array, options: Object)

Nach dem Login kopieren

Parameter

points – Dieser Parameter akzeptiert ein Array, das das Array von Punkten darstellt, aus denen das Polylinienobjekt besteht.
Optionen (optional) – Dieser Parameter ist ein Objekt, das unserem Objekt zusätzliche Anpassungen ermöglicht. Verwenden Sie diesen Parameter, um den Ursprung, die Strichstärke und viele andere Eigenschaften des Polylinienobjekts zu ändern.

Beispiel 1

Erstellen Sie eine Fabric.Polyline()-Instanz und fügen Sie sie der Leinwand hinzu

Schauen wir uns ein Codebeispiel an, um zu sehen, wie man ein Polylinienobjekt zur Leinwand hinzufügt. Der einzige erforderliche Parameter ist das points-Array, während der zweite Parameter ein optionales options-Objekt ist. Darüber hinaus werden wir dasselbe points-Array in einem Polygon verwenden, um den Unterschied zu demonstrieren.

<!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>Creating an instance of fabric.Polyline() and adding it to our canvas</h2>
   <p>You can see that the polyline object doesn’t connects start to end</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: 200, y: 150 },
         { x: 0, y: 100 },
         { x: 100, y: 0 },
         { x: 200, y: 100 },
      ];
      
      // Initiating a polyline object
      var polyline = new fabric.Polyline(points, {
         left: 100,
         top: 40,
         fill: "white",
         strokeWidth: 4,
         stroke: "green",
      });
      
      // Adding it to the canvas
      canvas.add(polyline);
   </script>
</body>
</html>

Nach dem Login kopieren

Beispiel 2

Erstellen Sie eine Instanz von fabric.Polygon() und fügen Sie sie unserer Leinwand hinzu

Schauen wir uns ein Codebeispiel an, um zu sehen, wie man der Leinwand ein Polygonobjekt hinzufügt. Der einzige erforderliche Parameter ist das Array points, während der zweite Parameter ein optionales Optionsobjekt ist. Wir stellen dasselbe Optionsobjekt wie im Polylinienbeispiel bereit.

<!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>Creating an instance of fabric.Polygon() and adding it to our canva</h2>
   <p>You can see that the polygon object connects start to end to make a closed area</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: 200, y: 150 },
         { x: 0, y: 100 },
         { x: 100, y: 0 },
         { x: 200, y: 100 },
      ];
      
      // Initiating a polyline object
      var polygon = new fabric.Polygon(points, {
         left: 100,
         top: 40,
         fill: "white",
         strokeWidth: 4,
         stroke: "green",
      });
      
      // Adding it to the canvas
      canvas.add(polygon);
   </script>
</body>
</html>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie unterscheiden sich Polygone von Polylinien in FabricJS?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!