Rumah > Artikel > hujung hadapan web > Bagaimana untuk menetapkan kelegapan segi empat tepat menggunakan FabricJS?

Bagaimana untuk menetapkan kelegapan segi empat tepat menggunakan FabricJS?

WBOYke hadapan: 2023-09-21 08:01:091229semak imbas

如何使用 FabricJS 设置矩形的不透明度？

Dalam tutorial ini, kita akan belajar cara menetapkan kelegapan segi empat tepat menggunakan FabricJS. Segi empat tepat adalah salah satu daripada pelbagai bentuk yang disediakan oleh FabricJS. untuk mewujudkan a segi empat tepat, kita perlu mencipta contoh kelas Fabric.Rect dan menambahnya pada

Kami boleh menyesuaikan objek segi empat tepat dengan menambahkan warna isian, mengalih keluar jidarnya dan juga menukar dimensinya. Begitu juga, kita juga boleh menggunakan sifat opacity untuk menukar kelegapannya.

Syntax

new fabric.Rect({ opacity: Number }: Object)

Parameter

Pilihan (pilihan) - Parameter ini ialah objek yang menyediakan penyesuaian tambahan pada segi empat tepat kami. Menggunakan parameter ini, anda boleh menukar sifat seperti warna, kursor, lebar sempadan dan banyak sifat lain yang berkaitan dengan objek yang kelegapannya ialah atribut.

Option Key

opacity - Sifat ini menerima Nombor yang membolehkan kita mengawal kelegapan objek. Nilai lalai bagi atribut kelegapan ialah 1.

Contoh 1

Kemunculan lalai objek segi empat tepat

Mari kita lihat contoh kod untuk melihat rupa objek segi empat tepat kita dengan nilai lalai sifat opacity. Dalam contoh ini kita tidak menghantar sebarang kunci kelegapan kepada kelas 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 a rectangle object</h2>
   <p>You can see our rectangle is fully opaque</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 rectangle object
      var rect = new fabric.Rect({
         left: 55,
         top: 90,
         width: 170,
         height: 70,
         fill: "#ffb347",
         padding: 9,
         stroke: "#191970",
         strokeWidth: 5,
      });

      // Add it to the canvas
      canvas.add(rect);
   </script>
</body>
</html>

Contoh 2

Melepasi atribut opacity sebagai kunci

Dalam contoh ini kita akan melihat cara untuk menetapkan nilai perubahan sifat Opacity Kelegapan objek segi empat tepat dalam kanvas. Di sini kami menggunakan 0.3 sebagai kelegapan Akibatnya, objek segi empat tepat kami kelihatan separa lutsinar dan bukannya legap sepenuhnya.

rreeee

Atas ialah kandungan terperinci Bagaimana untuk menetapkan kelegapan segi empat tepat 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：Program JavaScript untuk mengira kekerapan elemen tatasusunanArtikel seterusnya：Program JavaScript untuk mengira kekerapan elemen tatasusunan

Artikel berkaitan

Lihat lagi