Rumah >hujung hadapan web >tutorial js >Bagaimana untuk mencipta kanvas dengan kursor yang tidak dibenarkan menggunakan FabricJS?

Bagaimana untuk mencipta kanvas dengan kursor yang tidak dibenarkan menggunakan FabricJS?

WBOYke hadapan: 2023-09-08 10:21:03893semak imbas

如何使用 FabricJS 创建带有不允许的光标的画布？

Dalam artikel ini, kami akan mencipta kanvas dengan kursor yang tidak dibenarkan menggunakan FabricJS. Kursor yang tidak dibenarkan boleh digunakan untuk menunjukkan bahawa sebarang operasi yang diminta tidak akan dilakukan. tidak dibenarkan 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 yang mendasari. Setiap kursor kelihatan sedikit berbeza bergantung pada sistem pengendalian. Tatabahasa semula

new fabric.Canvas(element: HTMLElement|String, { defaultCursor: String }: Object)

Parameter

Elemen -Ini adalah elemen itu sendiri, anda boleh menggunakan
Pilihan (pilihan)
- Parameter ini ialah objek yang menyediakan penyesuaian tambahan bagi kanvas kami. Menggunakan parameter ini, anda boleh menukar banyak sifat yang berkaitan dengan kanvas, seperti warna, kursor dan lebar jidar DefaultCursor ialah sifat yang melaluinya kita boleh menetapkan jenis kursor yang kita inginkan.
Contoh 1

Harta Kursor lalai menerima rentetan yang menentukan nama kursor untuk digunakan pada kanvas. Kami menetapkannya kepada tidak dibenarkan menggunakan kursor yang tidak dibenarkan. Mari lihat contoh mencipta kanvas dengan kursor yang tidak dibenarkan dalam FabricJS.

<!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>Canvas with not-allowed cursor using FabricJS</h2>
   <p>Bring the cursor inside the canvas to see the changed shape of cursor</p>
   <canvas id="canvas"></canvas>
   <script>
      //Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         defaultCursor: "not-allowed"
      });
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

Contoh 2

Dalam contoh ini kita akan menambah bulatan pada kanvas bersama-sama dengan kursor yang tidak dibenarkan

<!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>Canvas with not-allowed cursor using FabricJS</h2>
   <p>Here we have added a circle to the canvas along with the not-allowed cursor</p>
   <canvas id="canvas"></canvas>
   <script>
      //Initiate a canvas instance
      var canvas = new fabric.Canvas("canvas", {
         defaultCursor: "not-allowed"
      });
      // Initiate a Circle instance
      var circle = new fabric.Circle({
         radius: 50,
         fill: "green"
      });
      // Render the circle in canvas
      canvas.add(circle);
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

Atas ialah kandungan terperinci Bagaimana untuk mencipta kanvas dengan kursor yang tidak dibenarkan menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

字符串对象

Kenyataan：

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

Artikel sebelumnya：Program JavaScript menambah dua nombor yang diwakili oleh senarai terpaut - Persediaan 1Artikel seterusnya：Program JavaScript menambah dua nombor yang diwakili oleh senarai terpaut - Persediaan 1

Artikel berkaitan

Lihat lagi