Maison > Article > interface Web > Comment créer une représentation JSON d'un objet Line à l'aide de FabricJS ?

Comment créer une représentation JSON d'un objet Line à l'aide de FabricJS ?

王林avant: 2023-08-27 14:21:111162parcourir

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

Dans ce tutoriel, nous allons apprendre à créer une représentation JSON d'un objet Line à l'aide de FabricJS. L'élément Line est l'un des éléments de base fournis dans FabricJS. Il est utilisé pour créer des lignes droites. Étant donné que les éléments de ligne sont géométriquement unidimensionnels et ne contiennent aucun intérieur, ils ne sont jamais remplis. Nous pouvons créer un objet ligne en créant une instance de fabric.Line, en spécifiant les coordonnées x et y de la ligne et en l'ajoutant au canevas. Pour créer une représentation JSON d'un objet Line, nous utilisons la méthode toJSON.

Syntax

 toJSON(propertiesToInclude: Array): Object

Parameters

propertiesToInclude - Ce paramètre accepte un tableau contenant toutes les propriétés que nous pourrions vouloir inclure en plus dans la sortie. Ce paramètre est facultatif.

Utilisez la méthode toJSON

Exemple

Regardons un exemple de code pour voir la sortie enregistrée lors de l'utilisation de la méthode toJSON. exister Dans ce cas, une représentation JSON de l'instance de ligne est renvoyée.

<!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>

Ajoutez des propriétés supplémentaires à l'aide de la méthode toJSON

Exemple

Regardons un exemple de code pour voir comment inclure des propriétés supplémentaires à l'aide de la méthode toJSON. Dans cet exemple, nous avons ajouté une propriété personnalisée appelée « name ». Nous pouvons transmettre des propriétés spécifiques à l'instance fabric.Line comme deuxième paramètre dans l'objet options et transmettre la même clé à la méthode toJSON.

<!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>

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration：

Cet article est reproduit dans:. en cas de violation, veuillez contacter admin@php.cn Supprimer

Article précédent：Comment positionner le curseur à la fin du texte dans un champ de saisie de texte en utilisant JavaScript ?Article suivant：Comment positionner le curseur à la fin du texte dans un champ de saisie de texte en utilisant JavaScript ?

Articles Liés

Voir plus