Rumah >hujung hadapan web >tutorial js >Bagaimana untuk memasukkan aksara dalam IText menggunakan FabricJS?
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.
insertChars(text: String, style: Array, start: Number, end: Number)
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.
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>
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!