Rumah > Artikel > hujung hadapan web > Bagaimana untuk mendapatkan kelegapan objek Imej menggunakan FabricJS?

Bagaimana untuk mendapatkan kelegapan objek Imej menggunakan FabricJS?

WBOYke hadapan: 2023-08-28 16:49:091311semak imbas

如何使用 FabricJS 获取 Image 对象的不透明度？

Dalam tutorial ini, kita akan belajar cara mendapatkan kelegapan imej menggunakan FabricJS. Kita boleh mencipta objek Imej dengan mencipta contoh fabric.Image. Memandangkan ia adalah salah satu elemen asas FabricJS, kami juga boleh menyesuaikannya dengan mudah dengan menggunakan sifat seperti sudut, kelegapan, dsb. Untuk mendapatkan kelegapan Imej, kami menggunakan kaedah getObjectOpacity. p>

tatabahasa

getObjectOpacity(): Number

Gunakan getObjectOpacity kaedah

Contoh

Mari lihat contoh kod untuk melihat output yang dilog apabila menggunakan kaedah getObjectOpacity. Dalam kes ini, kelegapan lalai 1 akan dipaparkan 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 the getObjectOpacity method</h2>
   <p>
      You can open console from dev tools and see that the logged value is
      being displayed in the console
   </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 getObjectOpacity method
      console.log("The opacity is: ", image.getObjectOpacity());
   </script>
</body>
</html>

Gunakan kaedah getObjectOpacity dan lulus atribut opacity

Contoh

Mari lihat contoh kod untuk melihat output dilog apabila kaedah getObjectOpacity digunakan bersama-sama dengan sifat kelegapan. Dalam contoh ini, kelegapan objek imej diberikan 0.7, jadi output yang direkodkan ialah 0.7.

<!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 getObjectOpacity method and passing the opacity property</h2>
   <p>
      You can open console from dev tools and see that the opacity value is being displayed in the console
   </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,
         opacity: 0.7,
      });
      
      // Add it to the canvas
      canvas.add(image);
      
      // Using getObjectOpacity method
      console.log("The opacity is: ", image.getObjectOpacity());
   </script>
</body>
</html>

Atas ialah kandungan terperinci Bagaimana untuk mendapatkan kelegapan 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 membuat projek status negara Covid19 menggunakan API REST?Artikel seterusnya：Bagaimana untuk membuat projek status negara Covid19 menggunakan API REST?

Artikel berkaitan

Lihat lagi