Artikel ini memperkenalkan cara mengatasi masalah pembungkusan garis drawText selama proses menggambar kanvas. Pertama, mari kita lihat masalah yang biasanya ditemui semua orang saat menggambar teks di kanvas:
Kanvas berukuran 150*100 dengan batas yang jelas
<kanvas id=kanvas style=border:solid 1px darkgoldenrod lebar=200px tinggi=100px></kanvas>
Mari kita lihat metode fillText() terlebih dahulu. Metode strokeText() bekerja dengan cara yang sama.
var c=document.getElementById(canvas); var ctx=c.getContext(2d); ctx.fillStyle=#E992B9;ctx.lineWidth=1;var str = Jika hidup menipu Anda, mohon jangan bersedih! terima kasih!ctx.fillText(str,0,20);
Anda dapat melihat bahwa fillText() tidak akan secara otomatis membungkus ketika ada terlalu banyak kata dalam kanvas dengan lebar tetap. Kita dapat menambah lebar kanvas itu sendiri, tetapi ini bukan cara mendasar untuk menyelesaikan masalah. Saya masih ingat ketika saya memperkenalkan API kanvas dasar sebelumnya, ada fungsi, context.measureText(text) Fungsi ini dapat mengukur lebar dan tinggi font, yang mudah untuk ditangani dan menambahkan perkiraan lebar pada dasarnya, masalah pembungkusan garis ini dapat diselesaikan.
Mari kita lihat metode implementasi spesifiknya:
var c=document.getElementById(canvas); var ctx=c.getContext(2d); ctx.fillStyle=#E992B9;ctx.lineWidth=1; terima kasih!var lineWidth = 0;var canvasWidth = c.width;//Hitung lebar kanvas var initHeight=15;//Tinggi awal font gambar dari atas kanvas var lastSubStrIndex= 0; String dicegat setiap kali Index for(let i=0;i<str.length;i++){ lineWidth+=ctx.measureText(str[i]).width; if(lineWidth>canvasWidth){ ctx.fillText(str.substring(lastSubStrIndex,i),0,initHeight);//Gambar bagian yang dicegat initHeight+=20;//20 adalah tinggi font lineWidth=0; Saya; } if(i==str.length-1){//Gambar bagian yang tersisa ctx.fillText(str.substring(lastSubStrIndex,i+1),0,initHeight);Lihat renderingnya:
Algoritma: Hitung jumlah lebar dan lebar garis setiap karakter dalam string str. Jika lebih besar dari lebar kanvas, potong bagian ini untuk menggambar, lalu setel ulang lebar garis, simpan indeks terakhir tempat intersepsi dimulai, dan ketika variabel loop i adalah karakter terakhir, gambarkan bagian sisanya secara langsung.
Berikutnya: Kita merangkumnya menjadi sebuah metode sehingga nanti bisa dipanggil secara langsung:
/*str: string yang akan digambar kanvas: objek kanvas initX: awal x koordinat gambar string initY: awal koordinat y gambar string lineHeight: tinggi baris kata, Anda dapat menentukan nilainya sendiri */function canvasTextAutoLine(str, canvas, initX,initY,lineHeight){ var ctx = kanvas.getContext(2d); var lineWidth = 0; lastSubStrIndex= 0; for(let i=0;i<str.length;i++){ lineWidth+=ctx.measureText(str[i]).width; if(lineWidth>canvasWidth-initX){//Kurangi initX untuk mencegah Masalah dengan batasan ctx.fillText(str.substring(lastSubStrIndex,i),initX,initY); initY+=Tinggi garis;Lebar garis=0;lastSubStrIndex=i; } if(i==str.panjang-1){ ctx.fillText(str.substring(lastSubStrIndex,i+1),initX,initY);Di atas adalah keseluruhan isi artikel ini, saya harap dapat bermanfaat untuk pembelajaran semua orang. Saya juga berharap semua orang mendukung VeVb Wulin Network.