cari

Rumah >hujung hadapan web >tutorial js >Bagaimana untuk menetapkan kelegapan elips menggunakan FabricJS?

Bagaimana untuk menetapkan kelegapan elips menggunakan FabricJS?

WBOY
WBOYke hadapan
2023-08-24 16:09:131276semak imbas

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

Dalam tutorial ini, kita akan belajar cara menetapkan kelegapan elips menggunakan FabricJS. Bujur adalah salah satu daripada pelbagai bentuk yang disediakan oleh FabricJS. Untuk mencipta elips, kita mesti mencipta contoh kelas Fabric.Ellipse dan menambahkannya pada kanvas. Kita boleh menyesuaikan objek elips 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.Ellipse({ opacity: Number }: Object)

Parameter

  • Pilihan (pilihan) - Parameter ini ialah Objek menyediakan penyesuaian tambahan pada elips kami. Menggunakan parameter ini, anda boleh menukar warna, kursor, lebar jidar dan banyak sifat lain yang berkaitan dengan objek yang opacity ialah atribut.

Option Key

  • Opacity - Harta ini menerima nombor强> yang membolehkan kita mengawal kelegapan objek. Nilai lalai bagi sifat opacity ialah 1.

Contoh 1

Kemunculan lalai objek elips

Mari kita lihat coretan kod untuk melihat rupa objek elips kita dengan nilai lalai bagi 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>How to set the opacity of Ellipse using FabricJS?</h2>
      <p>Observe that here we have not used the <b>opacity</b> property, so by default, it takes the value 1. </p>
      <canvas id="canvas"></canvas>

      <script>
         // Initiate a canvas instance
         var canvas = new fabric.Canvas("canvas");

         // Initiate an ellipse instance
         var ellipse = new fabric.Ellipse({
            left: 115,
            top: 50,
            rx: 80,
            ry: 50,
            fill: "#ff1493",
         });

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

Contoh 2

Melepasi atribut opacity sebagai kunci

Dalam contoh ini kita akan melihat cara untuk menetapkan nilai opacity harta mengubah kelegapan objek elips dalam kanvas. Di sini kita menggunakan 0.3 sebagai kelegapan supaya objek elips kita kelihatan separa lutsinar dan bukannya legap sepenuhnya. rreeee

Atas ialah kandungan terperinci Bagaimana untuk menetapkan kelegapan elips 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 mencetuskan gelung setInterval dengan segera menggunakan JavaScript?Artikel seterusnya：Bagaimana untuk mencetuskan gelung setInterval dengan segera menggunakan JavaScript?

Artikel berkaitan

Lihat lagi