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

Bagaimana untuk membuat kanvas dengan teks menggunakan FabricJS?

王林

Lepaskan： 2023-08-24 16:49:05

ke hadapan

1531 orang telah melayarinya

如何使用 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)

Salin selepas log masuk

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>

Salin selepas log masuk

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>

Salin selepas log masuk

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!