微信小程序canvas画布绘制文字自动换行

关键步骤介绍：

text为需要绘制的文本，通过换行符将text分割为words数组。

basic_height为第一行文本的高度。

get_canvas_row函数根据行宽限制将输入文本转化为不同的行，实现见下文。

text_size为设置的文本高度，h+text_size*j为每行待绘制文本的高度，绘制完成后更新h。

var words = text.split('\n')
var h = basic_height
for(var i=0;i

get_canvas_rows函数参数介绍：

参数1：绘制的画布对象

参数2：绘制的文本

参数3：限制的文本宽度

关键步骤介绍：

步骤1：将输入文本拆分为单个字符数组。

步骤2：将字符数组依次赋予t_line，不断扩大t_line长度，直到达到文本宽度限制，将t_line作为一行文本赋予rows数组，t_line重新计数，直到字符数组最后一个字符。

步骤3：返回rows数组。

    get_canvas_rows(ctx,line,maxWidth){
      var chars = line.split('')
      var rows = []
      var t_line = ''
      for(var i=0;imaxWidth){
          rows.push(t_line)
          t_line = chars[i]
        }else{
          t_line += chars[i]
        }
      }
      rows.push(t_line)
      return rows
    },

更多内容欢迎关注、评论、私信博主。

有用的话欢迎打赏~~~