Bagaimana untuk menambah ruang antara aksara dalam IText menggunakan FabricJS?-tutorial js-php.cn

Bagaimana untuk menambah ruang antara aksara dalam IText menggunakan FabricJS?

PHPz

Lepaskan： 2023-09-02 12:49:08

ke hadapan

667 orang telah melayarinya

如何使用 FabricJS 在 IText 中的字符之间添加空格？

Dalam tutorial ini, kita akan belajar cara menambah ruang antara aksara dalam objek IText menggunakan FabricJS. Kelas IText telah diperkenalkan dalam FabricJS versi 1.4, yang memanjangkan Fabric.Text dan digunakan untuk mencipta kejadian IText. Kejadian IText memberi kita kebebasan untuk memilih, memotong, menampal atau menambah teks baharu tanpa konfigurasi tambahan. Terdapat juga pelbagai kombinasi kekunci yang disokong dan kombinasi tetikus/sentuh untuk menjadikan teks interaktif yang tidak tersedia dalam Teks.

Walau bagaimanapun, Textbox berdasarkan IText membolehkan kami mengubah saiz segi empat tepat teks dan membalutnya secara automatik. Ini tidak berlaku untuk IText, kerana ketinggian tidak melaras berdasarkan pemisah baris. Kita boleh memanipulasi objek IText dengan menggunakan pelbagai sifat. Begitu juga, kita juga boleh menambah ruang tambahan antara setiap aksara menggunakan sifat charSpacing.

Tatabahasa

new fabric.IText(text: String , { charSpacing: Number }: Object)

Salin selepas log masuk

Parameter

teks - Parameter ini menerima String , iaitu rentetan teks yang ingin kami paparkan.
Pilihan (pilihan) - Parameter ini ialah objek yang menyediakan penyesuaian tambahan kepada objek IText kami. Menggunakan parameter ini, anda boleh menukar warna, kursor, lebar lejang dan banyak sifat lain objek IText yang berkaitan dengan sifat charSpacing.

Kunci pilihan

charSpacing - Hartanah ini menerima nombor yang membolehkan kami mengawal ruang tambahan antara aksara. Dinyatakan dalam unit beribu-ribu em.

Contoh 1

Kemunculan lalai objek IText

Mari lihat contoh kod untuk melihat rupa objek IText secara lalai apabila tidak menggunakan sifat charSpacing.

<!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>Default appearance of a IText object</h2>
   <p>You can see the default appearance of IText object when charSpacing property is not used </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 an itext object
      var itext = new fabric.IText(
         "Add Sample Text Here.",{
            width: 300,
            left: 60,
            top: 70,
            fill: "green",
            fontStyle: "bold",
         }
      );

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

Salin selepas log masuk

Contoh 2

Luluskan atribut charSpacing sebagai kunci

Dalam contoh ini, kita akan melihat cara untuk menetapkan nilai pada sifat charSpacing untuk menambah ruang tambahan antara aksara. Dalam kes ini, kami melepasi nilai 100, jadi ruang akan meningkat dengan sewajarnya.

<!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>Passing charSpacing property as key</h2>
  <p>You can see the space between each character has increased</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 an itext object
      var itext = new fabric.IText("Add Sample Text Here.", {
         width: 300,
         left: 110,
         top: 70,
         fill: "green",
         fontStyle: "bold",
         charSpacing: 100,
      });

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

Salin selepas log masuk

Atas ialah kandungan terperinci Bagaimana untuk menambah ruang antara aksara dalam IText menggunakan FabricJS?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!