Bagaimana untuk menetapkan kelegapan elips menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk menetapkan kelegapan elips menggunakan FabricJS?

WBOY

Lepaskan： 2023-08-24 16:09:13

ke hadapan

1263 orang telah melayarinya

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

Salin selepas log masuk

Parameter

Pilihan (pilihan) - Parameter ini ialah Objek< /em> 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< /strong>

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>

Salin selepas log masuk

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!