Rumah >hujung hadapan web >tutorial js >Bagaimana untuk menetapkan kelegapan bulatan menggunakan 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.
new fabric.Circle({ opacity: Number }: Object)
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
opacity diterima - sifat ini nombor Membolehkan kita mengawal kelegapan objek. Nilai lalai bagi atribut kelegapan ialah 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'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
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!