微信小程序生成海报分享:canvas绘制文字溢出如何换行

主要思路:数组

  一、先分割为字符串数组,而后一个字一个字绘图,利用ctx.measureText(string) 方法,获取绘制后的宽度,判断宽度在多少内就另起一行,再将各行拼成一个字符串spa

  二、计算另起的行总数,好比总共3行,也就是说将原来的一个长字符串按宽度分红了3行,而后循环绘制出这3行字符串便可。code

注意事项:blog

  就是须要 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 },
相关文章
相关标签/搜索