Rumah >hujung hadapan web >tutorial js >Bagaimana untuk mencipta segi empat tepat yang membantu kursor melayang pada objek menggunakan FabricJS?

Bagaimana untuk mencipta segi empat tepat yang membantu kursor melayang pada objek menggunakan FabricJS?

WBOYke hadapan: 2023-08-27 23:33:02897semak imbas

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

Dalam tutorial ini, kami akan menggunakan FabricJS untuk mencipta segi empat tepat dengan kursor pembantu pada objek tuding. "bantuan" 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 sebenarnya menggunakan semula kursor asli di bawah tudung. Sifat hoverCursor menetapkan gaya apabila kursor melayang di atas objek kanvas.

Syntax

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

Parameter

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

Kunci Pilihan

hoverCursor - Sifat ini menerima rentetan yang menentukan nama kursor yang digunakan semasa melayang di atas objek kanvas. Menggunakan ini kita boleh menetapkan nilai kursor lalai apabila melayang di atas objek segi empat tepat ini pada kanvas. . Mari lihat contoh kod mencipta kanvas menggunakan
>help

<!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 help 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: 55,
         top: 90,
         width: 170,
         height: 70,
         fill: "#faf0e6",
         padding: 9,
         stroke: "#9370db",
         strokeWidth: 5,
         hoverCursor: "help",
      });

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

Contoh 2

Bukti bahawa ini hanya mempengaruhi kejadian

Dalam contoh ini kita menghantar kunci hoverCursor ke kelas segi empat tepat, yang bermaksud bahawa

dalam objek. 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>Demonstrating that it affects the instance only</h2>
   <p>Hover over the rectangle objects and observe that the help cursor applies to the left object only. We have not used the <b>hoverCursor</b> property on the right object.</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 rect1 = new fabric.Rect({
         left: 55,
         top: 90,
         width: 170,
         height: 70,
         fill: "#faf0e6",
         padding: 9,
         stroke: "#9370db",
         strokeWidth: 5,
         hoverCursor: "help",
      });

      // Initiate another rectangle object
      var rect2 = new fabric.Rect({
         left: 325,
         top: 90,
         width: 170,
         height: 70,
         fill: "#9370db",
         padding: 9,
         stroke: "#e6e6fa",
         strokeWidth: 5,
      });

      // Add them to the canvas
      canvas.add(rect1);
      canvas.add(rect2);
   </script>
</body>
</html>

Atas ialah kandungan terperinci Bagaimana untuk mencipta segi empat tepat yang membantu kursor melayang pada objek 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 membungkus kaedah setTimeout() dalam Promise?Artikel seterusnya：Bagaimana untuk membungkus kaedah setTimeout() dalam Promise?

Artikel berkaitan

Lihat lagi