Heim > Artikel > Web-Frontend > Wie erstelle ich mit FabricJS ein Polygon mit Polylinien?

Wie erstelle ich mit FabricJS ein Polygon mit Polylinien?

WBOYnach vorne: 2023-08-31 17:49:081022Durchsuche

如何使用 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. Da Polygon fabric.Polyline erweitert, können wir mithilfe einer Polylinie hervorragend eine Polygoninstanz erstellen.

Grammatik

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

Parameter

points − Dieser Parameter akzeptiert ein Array, das ein Array von Punkten darstellt, die ein Polygonobjekt bilden, wobei sich jeder Punkt in einem Objekt mit x und y befindet.
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 zu ändern, die mit dem Polygon-Objekt verknüpft sind.

Beispiel 1: Erstellen Sie eine Fabric.Polygon()-Instanz und fügen Sie sie der Leinwand hinzu

Schauen wir uns ein Codebeispiel an, wie man ein Polygon erstellt, indem man eine Instanz von fabric.Polygon erstellt. Da die Polygon-Klasse fabric.Polyline erweitert, erbt sie deren Eigenschaften und Methoden und stellt so eine Beziehung zwischen ihnen her.

<!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 canvas
   </h2> 
   <p>You can see that a 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>

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

Schauen wir uns ein Codebeispiel an, wie man ein Polygon erstellt, indem man eine Instanz von fabric.Polyline erstellt. Wir müssen ein Array angeben, das die x- und y-Koordinaten des Polygons enthält, das wir erstellen möchten, und alle optionalen Eigenschaften hinzufügen, die in das Optionsobjekt aufgenommen werden sollen. In diesem Beispiel erstellen wir ein Quadrat, also ein Polygon mit vier gleichen Seiten und vier gleichen Winkeln.

<!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 a 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 polyline object
      var polygon = new fabric.Polyline(
         [
            { x: 0, y: 0 },
            { x: 50, y: 0 },
            { x: 50, y: 50 },
            { x: 0, y: 50 },
         ],
         {
            top: 50,
            left: 50,
            fill: "green",
         }
      );
      
      // Adding it to the canvas 
      canvas.add(polygon);
   </script>
</body>
</html>

Fazit

In diesem Tutorial zeigen wir anhand zweier einfacher Beispiele, wie man mit FabricJS ein Polygon mit Polylinien erstellt.

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit FabricJS ein Polygon mit Polylinien?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Array 继承对象 fabric

Stellungnahme：

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

Vorheriger Artikel：Wie finde ich die Komplexität einer Line-Instanz mithilfe von FabricJS?Nächster Artikel：Wie finde ich die Komplexität einer Line-Instanz mithilfe von FabricJS?

In Verbindung stehende Artikel

Mehr sehen