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

Bagaimana untuk mendapatkan kelegapan objek Teks menggunakan FabricJS?

WBOYke hadapan: 2023-09-21 15:37:09622semak imbas

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

Dalam tutorial ini, kita akan belajar cara mendapatkan kelegapan teks menggunakan FabricJS. Kita boleh memaparkan teks pada kanvas dengan menambahkan contoh Fabric.Text. Ia bukan sahaja membenarkan kami mengalih, menskala dan menukar dimensi teks, tetapi ia juga menyediakan ciri tambahan seperti penjajaran teks, hiasan teks, ketinggian baris, yang tersedia melalui ciri textAlign, garis bawah dan lineHeight masing-masing. Kita juga boleh mencari kelegapan objek menggunakan kaedah getObjectOpacity.

Tatabahasa

getObjectOpacity()

Contoh 1

Gunakan kaedah getObjectOpacity

Mari kita 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 opacity value is being displayed in the console</p>
   <canvas id="canvas"></canvas>

   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a text object
      var text = new fabric.Text("Add sampletext here", {
         width: 300,
         fill: "green",
         fontWeight: "bold",
      });

      // Add it to the canvas
      canvas.add(text);

      // Using getObjectOpacity method
      console.log("The opacity is", text.getObjectOpacity());
   </script>
</body>
</html>

Contoh 2

Gunakan kaedah getObjectOpacity dan lulus sifat opacity

Mari kita lihat contoh kod untuk melihat output dilog apabila kaedah getObjectOpacity digunakan bersama dengan sifat kelegapan. Dalam contoh ini, kelegapan objek teks 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>

   <script>
      // Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas");
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);

      // Initiate a text object
      var text = new fabric.Text("Add sampletext here", {
         width: 300,
         fill: "green",
         fontWeight: "bold",
         opacity: 0.7,
      });
      
      // Add it to the canvas
      canvas.add(text);

      // Using getObjectOpacity method
      console.log("The opacity is", text.getObjectOpacity());
   </script>
</body>
</html>

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

对象 fabric

Kenyataan：

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

Artikel sebelumnya：Bagaimana untuk menambah strok pada segitiga menggunakan FabricJS?Artikel seterusnya：Bagaimana untuk menambah strok pada segitiga menggunakan FabricJS?

Artikel berkaitan

Lihat lagi