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

Bagaimana untuk menetapkan kelegapan bulatan menggunakan FabricJS?

WBOY

Lepaskan： 2023-09-03 17:17:07

ke hadapan

614 orang telah melayarinya

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

Salin selepas log masuk

Parameter

Pilihan (pilihan) - Parameter ini ialah objek< /em> 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>  <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'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>
Salin selepas log masuk
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!