Bagaimana untuk membuat kanvas dengan kursor teks menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk membuat kanvas dengan kursor teks menggunakan FabricJS?

WBOY

Lepaskan： 2023-08-23 13:25:18

ke hadapan

1036 orang telah melayarinya

Bagaimana untuk membuat kanvas dengan kursor teks menggunakan FabricJS?

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)

Salin selepas log masuk

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>

Salin selepas log masuk

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!