Wie erstelle ich mit FabricJS eine JSON-Darstellung eines Line-Objekts?-js-Tutorial-php.cn

Wie erstelle ich mit FabricJS eine JSON-Darstellung eines Line-Objekts?

王林

Freigeben： 2023-08-27 14:21:11

nach vorne

1188 Leute haben es durchsucht

如何使用 FabricJS 创建 Line 对象的 JSON 表示？

In diesem Tutorial erfahren Sie, wie Sie mit FabricJS eine JSON-Darstellung eines Line-Objekts erstellen. Das Linienelement ist eines der Grundelemente, die in FabricJS bereitgestellt werden. Es wird verwendet, um gerade Linien zu erstellen. Da Linienelemente geometrisch eindimensional sind und keine Innenräume enthalten, werden sie nie gefüllt. Wir können ein Linienobjekt erstellen, indem wir eine Instanz von fabric.Line erstellen, die x- und y-Koordinaten der Linie angeben und sie der Leinwand hinzufügen. Um eine JSON-Darstellung eines Line-Objekts zu erstellen, verwenden wir die Methode toJSON.

Syntax

 toJSON(propertiesToInclude: Array): Object

Nach dem Login kopieren

Parameters

propertiesToInclude – Dieser Parameter akzeptiert ein Array mit allen Eigenschaften, die wir möglicherweise zusätzlich in die Ausgabe einschließen möchten. Dieser Parameter ist optional.

Verwenden Sie die toJSON-Methode

Beispiel

Sehen wir uns ein Codebeispiel an, um die protokollierte Ausgabe bei Verwendung der toJSON-Methode zu sehen. existieren In diesem Fall wird eine JSON-Darstellung der Linieninstanz zurückgegeben.

<!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 toJSON method</h2>
   <p>
      You can open console from dev tools and see that the logged output contains the JSON representation of the line 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);
      
      // Initiate a Line object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20,
      });
      
      // Add it to the canvas
      canvas.add(line);
      
      // Using the toJSON method
      console.log("JSON representation of the Line instance is: ", line.toJSON());
   </script>
</body>
</html>

Nach dem Login kopieren

Fügen Sie zusätzliche Eigenschaften mit der toJSON-Methode

hinzu

Beispiel

Schauen wir uns ein Codebeispiel an, um zu sehen, wie man mit der toJSON-Methode 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.Line-Instanz übergeben und dieselben Schlüssel an die toJSON-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 toJSON method to add additional properties</h2>
   <p>
      You can open console from dev tools and see that the logged output contains added 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);
      
      // Initiate a Line object with name key
      // passed in options object
      var line = new fabric.Line([200, 100, 100, 40], {
         stroke: "blue",
         strokeWidth: 20,
         name: "Line instance",
      });
      
      // Add it to the canvas
      canvas.add(line);
      
      // Using the toJSON method
      console.log(
         "JSON representation of the Line instance is: ",
         line.toJSON(["name"])
      );
   </script>
</body>
</html>

Nach dem Login kopieren

Das obige ist der detaillierte Inhalt vonWie erstelle ich mit FabricJS eine JSON-Darstellung eines Line-Objekts?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!