微信小程序生成海報分享:canvas繪制文字溢出如何換行


主要思路:

  1、先分割為字符串數組,然后一個字一個字繪圖,利用ctx.measureText(string) 方法,獲取繪制后的寬度,判斷寬度在多少內就另起一行,再將各行拼成一個字符串

  2、計算另起的行總數,比如總共3行,也就是說將原來的一個長字符串按寬度分成了3行,然后循環繪制出這3行字符串即可。

注意事項:

  就是需要 a-- 那里,防止丟失字符的情況,假如不 a-- 的話,那么每換行時就會少一個字。

ctx.setFontSize(11) ctx.fillStyle = "#000" offsetHeight = that.drawArticle(ctx, item.title, width - 50, 20, offsetHeight) // 繪制文字自動換行
 drawArticle(ctx, kl, width, x, y) { let chr = kl.split('') // 分割為字符串數組
      let temp = '' let row = [] for (let a = 0; a < chr.length; a++) { if (ctx.measureText(temp).width < width) { temp += chr[a] } else { a-- row.push(temp) temp = '' } } row.push(temp) for (var b = 0; b < row.length; b++) { // 控制最多顯示2行
        if (b < 2) { ctx.fillText(row[b], x, y + b * 20); } } let _len = row.length > 2 ? 2 : row.length return y + (_len - 1) * 20 },

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM