Rumah > Artikel > hujung hadapan web > Bagaimana untuk membuat kanvas dengan kursor teks menggunakan FabricJS?

Bagaimana untuk membuat kanvas dengan kursor teks menggunakan FabricJS?

WBOYke hadapan: 2023-08-23 13:25:181055semak imbas

Dalam artikel ini, kami akan mencipta kanvas dengan kursor teks menggunakan FabricJS. Kursor teks mewakili teks yang boleh dipilih. teks ialah salah satu gaya kursor asli yang tersedia untuk 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. Kursor ini kelihatan sedikit berbeza bergantung pada sistem pengendalian.

Syntax

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

Parameter

elemen − Parameter ini ialah elemen itu sendiri, anda boleh menggunakan Element ;kanvas> elemen itu sendiri id Datang dan dapatkannya. Kanvas FabricJS akan dimulakan pada elemen ini.
pilihan (pilihan) − Parameter ini ialah objek yang menyediakan penyesuaian tambahan pada kanvas. Gunakan parameter ini untuk menukar warna, kursor, lebar sempadan dan banyak sifat lain yang berkaitan dengan kanvas, dengan defaultCursor ialah sifat yang boleh kita gunakan untuk menetapkan jenis kursor.

Contoh 1

Sifat lalaiCursor menerima rentetan yang menentukan nama kursor untuk digunakan pada kanvas. Kami menetapkannya kepada "teks" untuk menggunakan kursor teks. Mari lihat kod yang menggunakan FabricJS untuk mencipta kanvas dengan tekskursor.

<!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 text 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: "text"
      });
      canvas.setWidth(document.body.scrollWidth);
      canvas.setHeight(250);
   </script>
</body>
</html>

Contoh 2

Dalam contoh ini, kami akan menambah bulatan pada kanvas, bersama-sama dengan kursor teks.

rreeee

Atas ialah kandungan terperinci Bagaimana untuk membuat kanvas dengan kursor teks 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 helah dua penunjukArtikel seterusnya：Program JavaScript helah dua penunjuk

Artikel berkaitan

Lihat lagi