Bagaimana untuk mencipta segi empat tepat yang menunggu kursor menuding pada objek menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk mencipta segi empat tepat yang menunggu kursor menuding pada objek menggunakan FabricJS?

PHPz

Lepaskan： 2023-08-23 16:29:02

ke hadapan

640 orang telah melayarinya

如何使用 FabricJS 创建一个等待光标悬停在对象上的矩形？

Dalam tutorial ini, kami akan menggunakan FabricJS untuk mencipta segi empat tepat dengan objek yang menunggu kursor menuding di atasnya. 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 belakang tabir. Sifat hoverCursor menetapkan gaya apabila kursor melayang di atas objek kanvas.

Syntax

new fabric.Rect({ hoverCursor: String }: Object)

Salin selepas log masuk

Parameter

Pilihan (pilihan) - Parameter ini ialah objek yang menyediakan penyesuaian tambahan pada segi empat tepat kami. Menggunakan parameter ini, anda boleh menukar warna, kursor, lebar lejang dan banyak lagi sifat objek yang berkaitan dengan sifat hoverCursor.

Kekunci Pilihan

hoverCursor - Sifat ini menerima String yang menentukan nama kursor yang digunakan untuk melayang di atas objek kanvas. Menggunakan fungsi ini kita boleh menetapkan nilai kursor lalai apabila melayang di atas objek segi empat tepat ini pada kanvas.

Contoh 1

Melalui kekunci kelas hoverCursor

Secara lalai, apabila kita menuding tetikus di atas objek segi empat tepat dalam kanvas, jenis kursor adalah bergerak. Mari lihat contoh kod untuk mencipta kanvas dengan kursor tunggu apabila melayang di atas objek segi empat tepat dalam FabricJS. Contoh 2 . Perubahan berlaku hanya untuk objek tunggal itu. Contoh kod di bawah menggambarkan 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>Passing the hoverCursor key to the class</h2>
   <p>Hover over the rectangle to see the wait cursor</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 rectangle object
      var rect = new fabric.Rect({
         left: 125,
         top: 90,
         width: 170,
         height: 70,
         fill: "#faf0e6",
         padding: 9,
         stroke: "#9370db",
         strokeWidth: 5,
         hoverCursor: "wait",
      });

      // Add it to the canvas
      canvas.add(rect);
   </script>
</body>
</html>

Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk mencipta segi empat tepat yang menunggu kursor menuding pada objek menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!