Rumah > Artikel > hujung hadapan web > Bagaimana untuk membuat perwakilan rentetan objek imej menggunakan FabricJS?

Bagaimana untuk membuat perwakilan rentetan objek imej menggunakan FabricJS?

WBOYke hadapan: 2023-08-23 18:21:05748semak imbas

如何使用 FabricJS 创建图像对象的字符串表示形式？

Dalam tutorial ini kami akan menunjukkan kepada anda cara membuat perwakilan rentetan Objek imej 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 membuat rentetan Untuk perwakilan objek Imej, kami menggunakan kaedah toString.

Tatabahasa

toString(): String

Gunakan kaedah toString

Contoh

Mari kita lihat contoh kod untuk melihat output yang dilog apabila menggunakan kaedah toString. wujud Dalam kes ini, perwakilan rentetan 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 toString method</h2>
   <p>
      You can open console from dev tools and see that the logged output contains the String 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 toString method
      console.log(
         "String representation of the Image instance is: ",
         image.toString()
      );
   </script>
</body>
</html>

Gunakan kaedah toString untuk membandingkan dua elemen berbeza

Contoh

Mari lihat contoh kod untuk melihat cara membandingkan dua objek dengan melihatnya perwakilan rentetan masing-masing. Di sini kita memulakan contoh Imej dan Contoh segi empat tepat. Apabila menggunakan kaedah toString pada setiap objek, kita dapat melihatnya Perwakilan rentetan masing-masing dalam konsol.

<!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 toString method to compare two different elements</h2>
   <p>
      You can open console from dev tools and see that the logged output contains the String representation of the Image instance and the rectangle 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,
      });
      
      // Initiate a Rectangle object
      var rect = new fabric.Rect({
         stroke: "red",
         strokeWidth: 20,
         width: 20,
         height: 50,
         left: 460,
         top: 55,
      });
      
      // Add them to the canvas
      canvas.add(image);
      canvas.add(rect);
      
      // Using the toString method
      console.log(
         "String representation of the Image instance is: ",
         image.toString()
      );
      console.log(
         "String representation of the Rectangle instance is: ",
         rect.toString()
      );
   </script>
</body>
</html>

Kesimpulan

Dalam tutorial ini, kami menggunakan dua contoh untuk menunjukkan cara membuat rentetan Gunakan FabricJS untuk mewakili objek Imej.

Atas ialah kandungan terperinci Bagaimana untuk membuat perwakilan rentetan objek imej 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 melumpuhkan penskalaan berpusat Kotak Teks menggunakan FabricJS?Artikel seterusnya：Bagaimana untuk melumpuhkan penskalaan berpusat Kotak Teks menggunakan FabricJS?

Artikel berkaitan

Lihat lagi