cari

Rumah  >  Artikel  >  hujung hadapan web  >  Bagaimana untuk membuat perwakilan JSON bagi objek Line menggunakan FabricJS?

Bagaimana untuk membuat perwakilan JSON bagi objek Line menggunakan FabricJS?

王林
王林ke hadapan
2023-08-27 14:21:111162semak imbas

如何使用 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

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>

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>

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!

Kenyataan：
Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam
Artikel sebelumnya：Bagaimana untuk meletakkan kursor pada akhir teks dalam medan input teks menggunakan JavaScript?Artikel seterusnya：Bagaimana untuk meletakkan kursor pada akhir teks dalam medan input teks menggunakan JavaScript?

Artikel berkaitan

Lihat lagi