Bagaimana untuk membuat segitiga dengan kursor tunggu pada objek bergerak menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk membuat segitiga dengan kursor tunggu pada objek bergerak menggunakan FabricJS?

PHPz

Lepaskan： 2023-09-10 14:45:14

ke hadapan

1438 orang telah melayarinya

如何使用 FabricJS 在移动对象上创建带有等待光标的三角形？

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.

Syntax

new fabric.Triangle({ moveCursor: String }: Object)

Salin selepas log masuk

Parameter

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.

< /ul>
Kunci Pilihan
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.
Contoh 1
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>  <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>
Salin selepas log masuk
Contoh 2

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.
rreeee
Atas 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!