Dalam tutorial ini, kami akan menggunakan FabricJS untuk mencipta segitiga dengan objek menunggu kursor bergerak. tunggu ialah salah satu gaya kursor asli yang tersedia dan juga boleh digunakan dalam kanvas FabricJS. FabricJS menyediakan pelbagai jenis kursor seperti lalai, tatal penuh, silang, saiz semula lajur, saiz semula baris, dll. yang menggunakan semula kursor asli di bawah tudung. Sifat
moveCursor menetapkan gaya kursor apabila objek bergerak dalam kanvas.
new fabric.Triangle({ moveCursor: String }: Object)Pilihan (pilihan) - Parameter ini ialah objek< /em> yang menyediakan penyesuaian tambahan kepada segi tiga kami. Menggunakan parameter ini, anda boleh menukar sifat yang berkaitan dengan objek yang moveCursor ialah atribut, seperti warna, kursor, lebar lejang dan banyak sifat lain.
moveCursor - Sifat ini menerima String yang membolehkan kami menetapkan nilai kursor lalai apabila menggerakkan objek segi tiga ini di sekeliling kanvas. Nilai ini menentukan jenis kursor yang digunakan semasa menggerakkan objek kanvas.
Nilai kursor lalai apabila objek bergerak di atas kanvas
Secara lalai, apabila kita bergerak mengelilingi objek segi tiga dalam kanvas, jenis kursor ialah Move. Mari lihat contoh kod untuk memahami perkara ini.
<!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>Default cursor value when object is moved around the canvas</h2>
<p>You can move around the triangle to see that the default cursor type is "move"</p>
<canvas id="canvas"></canvas>
<script>
// Initiate a canvas instance
var canvas = new fabric.Canvas("canvas");
canvas.setWidth(document.body.scrollWidth);
canvas.setHeight(250);
// Initiate a triangle object
var triangle = new fabric.Triangle({
left: 105,
top: 75,
width: 90,
height: 80,
fill: "#eedc82",
stroke: "#bcb88a",
strokeWidth: 5,
});
// Add it to the canvas
canvas.add(triangle);
</script>
</body>
</html>Meluluskan harta moveCursor sebagai kunci kepada nilai
Dalam contoh ini, kita menghantar kunci moveCursor ke kelas segi tiga dengan nilai "menunggu". Ini akan memastikan bahawa nilai kursor sedang menunggu semasa kita bergerak di sekeliling objek dalam kanvas. Contoh kod berikut menggambarkan ini.
rreeeeAtas ialah kandungan terperinci Bagaimana untuk membuat segitiga dengan kursor tunggu pada objek bergerak menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
