Heim >Web-Frontend >js-Tutorial >Wie kann ich mit FabricJS eine datenlose Objektdarstellung eines Polygons zurückgeben?
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. Wir können die Methode toDatalessObject verwenden, um eine datenlose Objektdarstellung des Polygons zurückzugeben. Diese Methode gibt die Objektdarstellung der Polygoninstanz zurück.
toDatalessObject( propertiesToInclude: Array ): Object
propertiesToInclude (optional) – Dieser Parameter akzeptiert ein Array, das es uns ermöglicht, alle Eigenschaften hinzuzufügen, die wir in die Ausgabe einschließen möchten. Dieser Parameter ist optional.
Schauen wir uns ein Codebeispiel an, wie man die datenlose Objektdarstellung eines Polygon-Objekts in der Konsole mithilfe der Methode toDatalessObject anzeigt.
<!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 toDatalessObject method</h2> <p> You can open console from dev tools and see that the logged output contains the dataless object representation 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: 50, left: 50, } ); // Adding it to the canvas canvas.add(polygon); // Using the toDatalessObject method console.log( "Dataless object representation of a Polygon instance is: ", polygon.toDatalessObject() ); </script> </body> </html>
Schauen wir uns ein Codebeispiel an, um zu sehen, wie man mit der Methode toDatalessObject zusätzliche Eigenschaften einbindet. In diesem Beispiel haben wir eine benutzerdefinierte Eigenschaft namens „name“ hinzugefügt. Wir können bestimmte Eigenschaften als zweiten Parameter im Optionsobjekt an die fabric.Polygon-Instanz übergeben und dieselben Schlüssel an die toDatalessObject-Methode übergeben.
<!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 toDatalessObject method to add additional properties</h2> <p> You can open console from dev tools and see that the logged output contains the property called name </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 with name key // passed in options 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, name: "Polygon instance", } ); // Adding it to the canvas canvas.add(polygon); // Using the toDatalessObject method console.log( "Dataless object representation of a Polygon instance is: ", polygon.toDatalessObject(["name"]) ); </script> </body> </html>
In diesem Tutorial zeigen wir anhand zweier einfacher Beispiele, wie man mit FabricJS eine datenlose Objektdarstellung eines Polygons zurückgibt.
Das obige ist der detaillierte Inhalt vonWie kann ich mit FabricJS eine datenlose Objektdarstellung eines Polygons zurückgeben?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!