Rumah > Artikel > hujung hadapan web > Bagaimana untuk memasukkan aksara dalam IText menggunakan FabricJS?

Bagaimana untuk memasukkan aksara dalam IText menggunakan FabricJS?

WBOYke hadapan: 2023-08-31 08:53:03851semak imbas

Dalam tutorial ini, kita akan belajar cara memasukkan aksara dalam 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.

Namun, 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 boleh memasukkan aksara menggunakan kaedah insertChars.

Tatabahasa

insertChars(text: String, style: Array, start: Number, end: Number)

Parameter

teks - Parameter ini menerima Rentetan yang menentukan teks untuk dimasukkan.
style - Parameter ini menerima array mewakili tatasusunan objek gaya untuk digunakan pada teks.
mula - Parameter ini menerima nombor yang menunjukkan kedudukan di mana watak itu hendak dimasukkan.
end - Parameter ini menerima Nombor menandakan kedudukan tamat. Lalai ialah mula +1.

Contoh 1

Kemunculan lalai objek IText

Mari kita lihat contoh kod untuk melihat rupa objek IText secara lalai apabila tidak menggunakan kaedah insertChars. Dalam kes ini, tiada aksara akan disisipkan

<!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 IText object</h2>
   <p>You can see that no characters have been inserted.</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 HereLorem ipsum dolor sit amet",{
            width: 300,
            left: 50,
            top: 70,
            fill: "#b666d2",
            backgroundColor: "#f8f4ff",
         }
      );

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

Contoh 2

Gunakan kaedah insertChars

Mari lihat contoh kod untuk melihat rupa objek IText apabila menggunakan kaedah insertChars. Dalam contoh ini, "a" telah dimasukkan ke dalam indeks ke-6 pada kedudukan "m" kerana ini adalah kedudukan permulaan. Memandangkan kami menyediakan pelbagai gaya, perubahan gaya yang diperlukan juga digunakan.

<!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>Using the insertChars method</h2>
   <p>You can see the character "m" has been replaced with "a"</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 HereLorem ipsum dolor sit amet",{
            width: 300,
            left: 50,
            top: 70,
            fill: "#b666d2",
            backgroundColor: "#f8f4ff",
         }
      );

      // Using the insertChars method
      itext.insertChars("a", [{ fill: "green", fontStyle: "bold" }], 6, 7);

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

Atas ialah kandungan terperinci Bagaimana untuk memasukkan aksara dalam IText 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：Mengesahkan borang menggunakan Parsley.jsArtikel seterusnya：Mengesahkan borang menggunakan Parsley.js

Artikel berkaitan

Lihat lagi