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

Bagaimana untuk membuat objek imej klon menggunakan FabricJS?

PHPzke hadapan: 2023-08-24 09:01:25619semak imbas

如何使用 FabricJS 创建克隆图像对象？

Dalam tutorial ini kami akan menunjukkan cara membuat objek imej klon menggunakan FabricJS. Kita boleh mencipta objek Imej dengan mencipta contoh fabric.Image. sejak Ia adalah salah satu elemen asas FabricJS dan kami juga boleh menyesuaikannya dengan mudah melalui aplikasi Sudut, kelegapan dan sifat lain. Untuk mencipta objek imej klon yang kami gunakan Kaedah cloneAsImage.

Tatabahasa

cloneAsImage(callback: function, options: Object): fabric.Object

Parameter

panggilan balik (pilihan) - Parameter ini ialah fungsi yang akan menggunakan contoh imej klon sebagai hujah panggilan pertama.
Pilihan (pilihan) - Parameter ini ialah objek pilihan yang menyediakan penyesuaian tambahan pada imej klon kami. Menggunakan parameter ini kita boleh menetapkan pengganda, memangkas imej klon atau mengalih keluar perubahan objek semasa.

Jangan gunakan kaedah cloneAsImage

Contoh

Mari kita lihat contoh kod untuk memahami cara objek Imej muncul apabila cloneAsImage Kaedah tidak digunakan. Dalam kes ini, contoh fabrik.Imej sendiri akan muncul dalam kami kanvas.

<!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>Without using the cloneAsImage method</h2>
   <p>You can see that the image instance has been formed</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 a shadow object
      var shadow = new fabric.Shadow({
         color: "#308080",
         blur: 3,
      });
      
      // Initiate an Image object
      var image = new fabric.Image(imageElement, {
         top: 50,
         left: 110,
         skewX: 20,
         shadow: shadow,
      });
      
      // Add it to the canvas
      canvas.add(image);
   </script>
</body>
</html>

Gunakan cloneAsImagekaedah

Contoh

Dalam contoh ini kami menggunakan kaedah cloneAsImage untuk menunjukkan bahawa kami boleh Buat klon contoh fabric.Image menggunakan kaedah panggil balik. kita akan tambah lagi imej klon itu pada kanvas.

<!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 cloneAsImage method</h2>
   <p>You can see that a clone image instance has been formed</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 a shadow object
      var shadow = new fabric.Shadow({
         color: "#308080",
         blur: 3,
      });
      
      // Initiate an Image object
      var image = new fabric.Image(imageElement, {
         top: 50,
         left: 110,
         skewX: 20,
         shadow: shadow,
      });
      
      // Using cloneAsImage method
      image.cloneAsImage(function(Img) {
         canvas.add(Img);
      });
   </script>
</body>
</html>

Kesimpulan

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

Atas ialah kandungan terperinci Bagaimana untuk membuat objek imej klon 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 membuat carta daripada data JSON menggunakan API Ambil dalam JavaScript?Artikel seterusnya：Bagaimana untuk membuat carta daripada data JSON menggunakan API Ambil dalam JavaScript?

Artikel berkaitan

Lihat lagi