cari

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

Bagaimana untuk menetapkan kelegapan bulatan menggunakan FabricJS?

WBOY
WBOYke hadapan
2023-09-03 17:17:07582semak imbas

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

Dalam tutorial ini, kita akan belajar cara menetapkan kelegapan Bulatan menggunakan FabricJS. Bulatan adalah salah satu daripada pelbagai bentuk yang disediakan oleh FabricJS. Untuk membuat bulatan, kami akan mencipta contoh kelas Fabric.Circle dan menambahkannya pada kanvas. Kita boleh menyesuaikan objek bulat dengan menambahkan warna isian, mengalih keluar sempadannya dan juga menukar dimensinya. Begitu juga, kita juga boleh menggunakan sifat opacity untuk menukar kelegapannya.

Syntax

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

Parameter

  • Pilihan (pilihan) - Parameter ini ialah objek yang menyediakan penyesuaian tambahan untuk kalangan kami. Dengan parameter ini, anda boleh menukar warna, kursor, lebar sempadan dan banyak sifat lain yang berkaitan dengan objek yang opacity ialah atribut

kunci pilihan

  • opacity diterima - sifat ini nombor Membolehkan kita mengawal kelegapan objek. Nilai lalai bagi atribut kelegapan ialah 1.

Contoh 1

Kemunculan lalai objek bulat

Mari kita lihat coretan kod untuk melihat rupa objek bulatan kita apabila menggunakan nilai lalai bagi sifat keopasitian 

<!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>Setting the opacity of Circle using FabricJS</h2>
      <p>Here we haven&#39;t used the <b>opacity</b> property, but by default, it is set to 1. This is the default appearance. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");
         var circle = new fabric.Circle({
            left: 115,
            top: 50,
            radius: 50,
            fill: "#ff1493"
         });

         // Adding it to the canvas
         canvas.add(circle);
         canvas.setWidth(document.body.scrollWidth);
         canvas.setHeight(250);
      </script>
   </body>
</html>
Contoh 2

Meluluskan Harta Kelegapan sebagai Kunci

Dalam contoh ini kita akan melihat cara memberikan nilai kepada sifat Kelegapan mengubah kelegapan objek bulatan dalam kanvas kita. Di sini kami menggunakan 0.3 sebagai kelegapan, yang menjadikan objek bulat kami kelihatan separa telus dan bukannya legap sepenuhnya. rreeee

Atas ialah kandungan terperinci Bagaimana untuk menetapkan kelegapan bulatan 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：Kaedah pembangunan berasaskan ujian praktikalArtikel seterusnya：Kaedah pembangunan berasaskan ujian praktikal

Artikel berkaitan

Lihat lagi