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.
new fabric.Circle({ borderOpacityWhenMoving: Number }: Object)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.
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. . 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!<!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 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>Mari kita lihat contoh memberikan nilai pada harta
borderOpacityWhenMoving
Apakah maksud format xml
Penjelasan terperinci tentang penggunaan fungsi sprintf
Bagaimana untuk meninggalkan dua ruang kosong dalam perenggan dalam html
Apakah perisian pejabat
mysql mencipta pangkalan data
arahan fail cari linux
Apa yang Xiaohongshu lakukan?
localhost8080 tidak boleh mengakses penyelesaian
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
