微信小程序Canvas繪制文字（換行和省略號）

微信小程序Canvas繪制文本時要實現換行和超出部分顯示為省略號

主要使用的API（詳見微信文檔）:
CanvasContext.measureText
CanvasContext.fillText

// 文本2行換行與顯示省略號
// 1、canvas對象 2、文本 3、X軸 4、Y軸 5、單行行高 6、文本的寬度
drawText(ctx, str, axisX, axisY,titleHeight, maxWidth) {
  // 字體
  ctx.setFontSize(14*this.rpx)
  // 顏色
  ctx.setFillStyle("#353535")
  // 文本處理
  let strArr = str.split("");
  let row = [];
  let temp = "";
  for (let i = 0; i < strArr.length; i++) {
    if (ctx.measureText(temp).width < maxWidth) {
      temp += strArr[i];
    }else {
      i--; //這里添加了i-- 是為了防止字符丟失，效果圖中有對比
      row.push(temp);
      temp = "";
    }
  }
  row.push(temp); // row有多少項則就有多少行

  //如果數組長度大於2，現在只需要顯示兩行則只截取前兩項,把第二行結尾設置成'...'
  if (row.length > 2) {
    let rowCut = row.slice(0, 2);
    let rowPart = rowCut[1];
    let test = "";
    let empty = [];
    for (let i = 0; i < rowPart.length; i++) {
      if (ctx.measureText(test).width < maxWidth) {
        test += rowPart[i];
      }
      else {
        break;
      }
    }
    empty.push(test);
    let group = empty[0] + "..."//這里只顯示兩行，超出的用...表示
    rowCut.splice(1, 1, group);
    row = rowCut;
  }
  // 把文本繪制到畫布中
  for (let i = 0; i < row.length; i++) {
    // 一次渲染一行
    ctx.fillText(row[i], axisX, axisY + i * titleHeight, maxWidth);
  }
  // 保存當前畫布狀態
  ctx.save()
  // 將之前在繪圖上下文中的描述（路徑、變形、樣式）畫到 canvas 中。
  ctx.draw()
},