goloving

主要思路:

  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
    },

 

分类:

技术点:

相关文章:

  • 2021-12-12
  • 2021-11-13
  • 2021-12-14
  • 2021-11-23
  • 2022-12-23
  • 2021-12-09
猜你喜欢
  • 2021-04-13
  • 2021-12-19
  • 2021-11-15
  • 2021-12-19
  • 2021-10-13
相关资源
相似解决方案