cari

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

Bagaimana untuk membuat kanvas dengan teks menggunakan FabricJS?

王林
王林ke hadapan
2023-08-24 16:49:051559semak imbas

如何使用 FabricJS 创建带有文本的画布？

Dalam tutorial ini, kita akan belajar cara mencipta kanvas dengan objek Teks menggunakan FabricJS. Kita boleh memaparkan teks pada kanvas dengan menambahkan contoh Fabric.Text. Ia bukan sahaja membenarkan kami mengalih, menskala dan menukar dimensi teks, tetapi ia juga menyediakan ciri tambahan seperti penjajaran teks, hiasan teks, ketinggian baris, yang tersedia melalui ciri textAlign, garis bawah dan lineHeight masing-masing. Satu perbezaan antara Teks dan Kotak Teks ialah Kotak Teks boleh diedit secara interaktif, manakala Teks tidak boleh.

Tatabahasa

new fabric.Text( text: String , options: Object)

Parameter

  • teks - Parameter ini menerima String iaitu rentetan teks yang ingin kami paparkan sebagai teks.

  • Pilihan (pilihan) - Parameter ini ialah objek yang menyediakan penyesuaian tambahan pada objek teks kami. Gunakan parameter ini untuk menukar warna, kursor, lebar lejang dan banyak sifat lain yang dikaitkan dengan objek teks.

Contoh 1

Buat contoh Fabric.Text() dan tambahkannya pada kanvas

Mari lihat contoh kod untuk melihat cara menambahkan objek teks pada kanvas. Satu-satunya parameter yang diperlukan ialah rentetan teks sebenar, manakala parameter kedua ialah objek pilihan pilihan yang membolehkan kami menetapkan sifat yang berbeza kepada objek teks. 

<!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>Creating an instance of fabric.Text() and adding it to our canvas</h2>
   <p>You can see the text in the canvas now</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 text object
      var text = new fabric.Text("Add sample text here", {
         left: 50,
         top: 70,
      });

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

Contoh 2

Gunakan kaedah yang ditetapkan untuk mengendalikan objek Teks

Dalam contoh ini, kami menetapkan sifat kepada objek teks menggunakan kaedah yang ditetapkan, yang merupakan penetap untuk nilai. Sebarang sifat yang berkaitan dengan lejang, lebar lejang, sudut, skala, putaran, dsb. boleh ditukar menggunakan kaedah 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>Manipulating the Text object by using the set method</h2>
   <p>You can see the text in the canvas now with set values</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 text object
      var text = new fabric.Text("Add sample text here");

      // Set the properties
      text.set("top", 70);
      text.set("left", 65);
      text.set("fill", "white");
      text.set("fontWeight", "bold");
      text.set("backgroundColor", "#bf94e4");

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

Atas ialah kandungan terperinci Bagaimana untuk membuat kanvas dengan 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：Terangkan kepentingan SafeViewArea dalam React Native?Artikel seterusnya：Terangkan kepentingan SafeViewArea dalam React Native?

Artikel berkaitan

Lihat lagi