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 )
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
<!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>
Beispiel 2: Verwendung der Points-Eigenschaft In diesem Beispiel haben wir das Punktattribut verwendet und ihm ein
Array<!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>
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!