Bagaimana untuk membuat perwakilan objek objek imej menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk membuat perwakilan objek objek imej menggunakan FabricJS?

王林

Lepaskan： 2023-08-23 20:53:02

ke hadapan

1410 orang telah melayarinya

如何使用 FabricJS 创建图像对象的对象表示？

Dalam tutorial ini kita akan belajar cara membuat perwakilan objek imej Objek menggunakan FabricJS. Kita boleh mencipta objek Imej dengan mencipta contoh Fabrik.Imej. Memandangkan ia adalah salah satu elemen asas FabricJS, kita juga boleh dengan mudah Sesuaikan dengan menggunakan sifat seperti sudut, kelegapan dan banyak lagi. Untuk mencipta objek Untuk mewakili objek Imej, kami menggunakan kaedah toObject.

Tatabahasa

toObject(propertiesToInclude: Array): Object

Salin selepas log masuk

Parameter

propertiesToInclude - Parameter ini menerima Array yang mengandungi sebarang Atribut tambahan yang mungkin ingin kami sertakan dalam output. Parameter ini ialah Pilihan.

Gunakan toObjectkaedah

Contoh

Mari kita lihat contoh kod untuk melihat output yang dilog apabila menggunakan kaedah toObject. Dalam kes ini, perwakilan objek bagi contoh Imej 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 toObject method</h2>
   <p>
      You can open console from dev tools and see that the logged output contains the Object representation of the image instance
   </p>
   <canvas id="canvas"></canvas>
   <img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" />
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating the image element
      var imageElement = document.getElementById("img1");
      
      // Initiate an Image object
      var image = new fabric.Image(imageElement, {
         top: 50,
         left: 110,
      });
      
      // Add it to the canvas
      canvas.add(image);
      
      // Using the toObject method
      console.log(
         "Object representation of the Image instance is: ",
         image.toObject()
      );
   </script>
</body>
</html>

Salin selepas log masuk

Tambah sifat tambahan menggunakan kaedah toObject

Contoh

Mari lihat contoh kod untuk melihat cara menggunakan toObject kaedah. Dalam contoh ini, kami menambah sifat tersuai yang dipanggil "nama harta". Kita boleh menghantar sifat khusus kepada contoh fabric.Image seperti yang ditunjukkan di bawah parameter kedua dalam objek pilihan dan hantar kekunci yang sama kepada kaedah toObject.

<!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 toObject method to add additional properties</h2>
   <p>
      You can open console from dev tools and see that the logged output contains added property called PropertyName
   </p>
   <canvas id="canvas"></canvas>
   <img src="https://www.tutorialspoint.com/images/logo.png" id="img1" style="display: none" />
   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
      
      // Initiating the image element
      var imageElement = document.getElementById("img1");
      
      // Initiate an Image object with PropertyName key
      // passed in options object
      var image = new fabric.Image(imageElement, {
         top: 50,
         left: 110,
         PropertyName: "property",
      });
      
      // Add it to the canvas
      canvas.add(image);
      
      // Using the toObject method
      console.log(
         "Object representation of the Image instance is: ",
         image.toObject(["PropertyName"])
      );
   </script>
</body>
</html>

Salin selepas log masuk

Kesimpulan

Dalam tutorial ini, kami menggunakan dua contoh untuk menunjukkan cara mencipta objek Gunakan FabricJS untuk mewakili imej.

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