Kode implementasi untuk pembungkusan garis otomatis konten teks gambar kanvas

Diperlukan untuk membuat halaman kartu undangan yang jumlah kata pada judulnya dinamis dan dapat ditampilkan maksimal 2 baris, jika melebihi 2 baris akan ditambahkan elipsis di akhir baris kedua isi. Menurut kepribadian product girl, kemungkinan besar setting empat baris akan diubah di kemudian hari, jadi tidak boleh hard-code di sini. Alhasil, beberapa hari yang lalu, saya sebenarnya memintanya ubah untuk menampilkan hingga 4 baris, dan yang lainnya tetap sama. Gadis produk itu terlalu muda :)!

Tanpa basa-basi lagi, inilah kode untuk dipamerkan! Sebelum memuat kode, lihat parameter yang harus dilewati! !

Deskripsi parameter dengan gambar dan teks, maafkan saya atas ketidaksabaran teknologi dan desain PS saya

• ctx: konteks kanvas
• konten: konten teks yang akan digambar
• drawX: menggambar koordinat x teks
• drawY: menggambar koordinat y dari teks
• lineHeight: tinggi garis antar teks
• lineMaxWidth: Lebar maksimum setiap baris teks
• lineNum: jumlah maksimum garis yang ditarik

 // Fungsi pembungkusan baris otomatis textPrewrap(ctx, content, drawX, drawY, lineHeight, lineMaxWidth, lineNum) { var drawTxt = ''; // Konten yang sedang digambar var drawLine = 1; = 0; // Indeks konten gambar saat ini // Tentukan apakah konten dapat digambar dalam satu baris if(ctx.measureText(content).width <= lineMaxWidth) { ctx.fillText(content.substring(drawIndex, i), drawX, drawY } else { for (var i = 0; i <= content.length; i++) { drawTxt += konten[i]; (ctx.measureText(drawTxt).width > lineMaxWidth) { jika (drawLine === lineNum) { // Tambahkan elipsis pada baris terakhir ctx.fillText(content.substring(drawIndex, i) + '...', drawX, drawY } else { // Jika ini bukan baris terakhir, ctx.fillText() content.substring(drawIndex, i + 1), drawX, drawY); drawIndex = i + 1; // Catat idnex berikutnya dari string terakhir dari baris saat ini, yang digunakan untuk menggambar kata pertama dari baris berikutnya drawLine += 1; // Jumlah garis + 1 drawY += lineHeight; // Koordinat y dari konten yang digambar akan menambah tinggi garis drawTxt = ''; // Reset konten yang digambar } } } }}

Dalam proses menggambar teks, saya menemukan bahwa koordinat y dari teks gambar harus didasarkan pada bagian atas teks.

Lingkungan browser: chrome 71.0.3578.98 (versi resmi) (64-bit)

Ukuran font adalah 40 piksel

Ketika koordinat y digambar pada 40, Anda dapat melihat bahwa teks dapat ditampilkan sepenuhnya

Ini adalah efek kode yang relatif tidak populer, tapi saya harap ini dapat membantu teman-teman yang membutuhkan. Saya juga berharap semua orang mendukung VeVb Wulin Network.