Wie kann ich mit FabricJS eine datenlose Objektdarstellung eines Polygons zurückgeben?-js-Tutorial-php.cn

Wie kann ich mit FabricJS eine datenlose Objektdarstellung eines Polygons zurückgeben?

WBOY

Freigeben： 2023-08-25 18:54:46

nach vorne

830 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. Wir können die Methode toDatalessObject verwenden, um eine datenlose Objektdarstellung des Polygons zurückzugeben. Diese Methode gibt die Objektdarstellung der Polygoninstanz zurück.

Grammatik

toDatalessObject( propertiesToInclude: Array ): Object

Nach dem Login kopieren

Parameter

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.

Beispiel 1: Verwendung der toDatalessObject-Methode

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>

Nach dem Login kopieren

Beispiel 2: Fügen Sie zusätzliche Eigenschaften mit der toDatalessObject-Methode hinzu

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>

Nach dem Login kopieren

Fazit

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!