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

Bagaimana untuk menetapkan kelegapan sempadan bulatan semasa bergerak menggunakan FabricJS?

王林

Lepaskan： 2023-08-24 14:53:02

ke hadapan

806 orang telah melayarinya

如何使用 FabricJS 在移动时设置圆的边框不透明度？

Dalam tutorial ini, kami akan menggunakan FabricJS untuk menetapkan kelegapan sempadan Bulatan semasa bergerak. Bulatan adalah salah satu daripada pelbagai bentuk yang disediakan oleh FabricJS. Untuk membuat bulatan, kita mesti mencipta contoh kelas Fabric.Circle dan menambahkannya pada kanvas. Kita boleh menggunakan sifat borderOpacityWhenMoving untuk menukar kelegapan bulatan semasa ia bergerak mengelilingi kanvas.

Syntax

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

Salin selepas log masuk

Parameter

Pilihan (pilihan) - Parameter ini ialah objek< /em> yang menyediakan penyesuaian tambahan untuk kalangan kami. Menggunakan parameter ini, anda boleh menukar sifat seperti warna, kursor, lebar lejang dan banyak sifat lain yang berkaitan dengan objek yang borderOpacityWhenMoving ialah harta. . Ia membolehkan kami mengawal kelegapan sempadan apabila menggerakkan objek bulat. Nilai lalai ialah 0.4.

Contoh 1

Menunjukkan kelakuan lalai bagi hartanah borderOpacityWhenMoving
Mari kita lihat contoh yang menunjukkan kelakuan lalai bagi harta boderOpacityWhenMoving. Apabila kita memilih objek bulatan dan mengalihkannya ke sekeliling kanvas, kelegapan sempadan pemilihan berubah daripada 1 (legap sepenuhnya) kepada 0.4, yang menjadikannya kelihatan sedikit lut sinar.
<!DOCTYPE html> <html> <head>  <script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/510/fabric.min.js"></script> </head> <body> <h2>Setting the border opacity of Circle while moving using FabricJS</h2> <p>Select the object and move it around. Notice that the opacity of the outline border reduces slightly while moving the object. This is the default behavior. Here we have not used the <b>boderOpacityWhenMoving</b> property.</p> <canvas id="canvas"></canvas> <script> // Initiate a canvas instance var canvas = new fabric.Canvas("canvas"); var cir = new fabric.Circle({ left: 215, top: 100, fill: "", radius: 50, stroke: "#c154c1", strokeWidth: 5, borderColor: "#966fd6", }); // Adding it to the canvas canvas.add(cir); canvas.setWidth(document.body.scrollWidth); canvas.setHeight(250); </script> </body> </html>
Salin selepas log masuk
Contoh 2Melalui sempadanOpacityWhenMoving sebagai kunci
Mari kita lihat contoh memberikan nilai pada harta
borderOpacityWhenMoving
. Dalam contoh ini, kami menentukan nilai sebagai 0. Ini memberitahu kita bahawa apabila kita mengalihkan bulatan, kelegapan sempadan akan berubah kepada 0 dan menjadi tidak kelihatan. rreeee
Atas ialah kandungan terperinci Bagaimana untuk menetapkan kelegapan sempadan bulatan semasa bergerak menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!