Bagaimana untuk mendapatkan kelegapan objek Imej menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk mendapatkan kelegapan objek Imej menggunakan FabricJS?

WBOY

Lepaskan： 2023-08-28 16:49:09

ke hadapan

1293 orang telah melayarinya

如何使用 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

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!