Rumah > Artikel > hujung hadapan web > Bagaimana untuk membuat segitiga dengan kursor tunggu pada objek bergerak menggunakan FabricJS?

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

PHPzke hadapan: 2023-09-10 14:45:141452semak imbas

如何使用 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)

Parameter

Pilihan (pilihan) - Parameter ini ialah objek 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.

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>
   <!-- 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>

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.

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!

字符串对象 ul

Kenyataan：

Artikel ini dikembalikan pada:tutorialspoint.com. Jika ada pelanggaran, sila hubungi admin@php.cn Padam

Artikel sebelumnya：Bagaimana untuk mendapatkan sempadan kiri perkataan dalam IText menggunakan FabricJS?Artikel seterusnya：Bagaimana untuk mendapatkan sempadan kiri perkataan dalam IText menggunakan FabricJS?

Artikel berkaitan

Lihat lagi