Rumah > Artikel > hujung hadapan web > Bagaimana untuk menetapkan kelegapan imej menggunakan FabricJS?

Bagaimana untuk menetapkan kelegapan imej menggunakan FabricJS?

WBOYke hadapan: 2023-08-24 23:53:10930semak imbas

Dalam tutorial ini, kita akan belajar cara menetapkan kelegapan imej menggunakan FabricJS. kami Objek imej boleh dibuat dengan mencipta contoh fabrik.Imej. kerana ia adalah salah satu daripada Elemen asas FabricJS, kami juga boleh menyesuaikannya dengan mudah dengan menggunakan sifat Seperti sudut, kelegapan, dsb. Untuk menetapkan kelegapan imej, kami menggunakan atribut opacity.

Tatabahasa

new fabric.Image( element: HTMLImageElement | HTMLCanvasElement | HTMLVideoElement | String, { opacity: Number }: Object, callback: function)

Parameter

elemen - Parameter ini menerima HTMLImageElement, HTMLCanvasElement, HTMLVideoElement atau rentetan yang mewakili elemen imej. Rentetan mestilah URL dan akan dimuatkan sebagai imej.
Pilihan (pilihan) - Parameter ini ialah objek yang menyediakan penyesuaian tambahan pada objek kami. Menggunakan parameter ini, anda boleh menukar asal, lebar lejang dan banyak sifat lain yang berkaitan dengan objek imej yang kelegapannya ialah atribut.
panggil balik (pilihan) - Parameter ini ialah fungsi yang dipanggil selepas penapis akhir digunakan..

Kunci pilihan

opacity - Hartanah ini menerima Nombor yang membolehkan kita mengawal sesuatu perkara. Nilai lalai bagi sifat opacity ialah 1.

Kemunculan lalai objek Imej

Contoh

Mari kita lihat contoh kod untuk melihat rupa objek imej kita dengan nilai lalai Kelegapanhartanah. Dalam contoh ini kami tidak menghantar sebarang kekunci legap seperti yang ditunjukkan di bawah -

<!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>Default appearance of Image object</h2>
   <p>You can see that the image object is fully opaque</p>
   <canvas id="canvas"></canvas>
   <img  src="https://www.tutorialspoint.com/images/logo.png" id="img1"   style="max-width:90%" / alt="Bagaimana untuk menetapkan kelegapan imej menggunakan FabricJS?" >
   <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: 50,
      });
      
      // Add it to the canvas
      canvas.add(image);
   </script>
</body>
</html>

Lepasi atribut opacity sebagai kunci

Contoh

Dalam contoh ini kita akan melihat cara memberikan nilai kepada sifat opacity berubah Kelegapan objek imej dalam kanvas. Di sini kita menggunakan 0.3 sebagai kelegapan, jadi Menjadikan objek imej kita kelihatan separa lutsinar dan bukannya legap sepenuhnya.

<!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>Passing the opacity property as key</h2>
   <p>You can see our image object is not fully opaque</p>
   <canvas id="canvas"></canvas>
   <img  src="https://www.tutorialspoint.com/images/logo.png" id="img1"   style="max-width:90%" / alt="Bagaimana untuk menetapkan kelegapan imej menggunakan FabricJS?" >
   <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: 50,
         opacity: 0.3,
      });
      
      // Add it to the canvas
      canvas.add(image);
   </script>
</body>
</html>

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

字符串 number 对象 fabric

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Bagaimana untuk menukar berat fon teks menggunakan JavaScript?Artikel seterusnya：Bagaimana untuk menukar berat fon teks menggunakan JavaScript?

Artikel berkaitan

Lihat lagi