Bagaimana untuk membuat perwakilan JSON bagi objek Line menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk membuat perwakilan JSON bagi objek Line menggunakan FabricJS?

王林

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

ke hadapan

1161 orang telah melayarinya

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

Dalam tutorial ini, kita akan belajar cara mencipta perwakilan JSON bagi objek Line menggunakan FabricJS. Elemen garis ialah salah satu elemen asas yang disediakan dalam FabricJS. Ia digunakan untuk membuat garis lurus. Memandangkan elemen garis adalah geometri satu dimensi dan tidak mengandungi bahagian dalam, ia tidak pernah diisi. Kita boleh mencipta objek garisan dengan mencipta contoh fabric.Line, menyatakan koordinat x dan y garisan dan menambahkannya pada kanvas. Untuk mencipta perwakilan JSON bagi objek Line, kami menggunakan kaedah toJSON.

Syntax

 toJSON(propertiesToInclude: Array): Object

Salin selepas log masuk

Parameters

propertiesToInclude - Parameter ini menerima tatasusunan yang mengandungi sebarang sifat yang mungkin kami ingin sertakan tambahan dalam output. Parameter ini adalah pilihan.

Gunakan kaedah toJSON

Contoh

Mari lihat contoh kod untuk melihat output yang dilog apabila menggunakan kaedah toJSON. wujud Dalam kes ini, perwakilan JSON bagi contoh baris dikembalikan.

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

Salin selepas log masuk

Tambah sifat tambahan menggunakan kaedah toJSON

Contoh

Mari lihat contoh kod untuk melihat cara memasukkan sifat tambahan menggunakan kaedah toJSON. Dalam contoh ini, kami menambahkan sifat tersuai yang dipanggil "nama". Kita boleh menghantar sifat khusus kepada fabrik. Contoh baris sebagai parameter kedua dalam objek pilihan dan lulus kekunci yang sama kepada kaedah 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>

Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk membuat perwakilan JSON bagi objek Line menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!