小程序 canvas多行文字溢出用...

一、使用函数transformContent

/**
 * canvas绘图相关，把文字转化成只能行数，多余显示省略号
 * ctx: 当前的canvas
 * text: 文本
 * contentWidth: 文本最大宽度
 * lineNumber: 显示几行
 */
transformContent(ctx, text, contentWidth, lineNumber) {
  var textArray = text.split(""); // 分割成字符串数组
  var temp = "";
  var row = [];

  for (var i = 0; i < textArray.length; i++) {
    if (ctx.measureText(temp).width < contentWidth) {
      temp += textArray[i];
    } else {
      i--; // 这里添加i--是为了防止字符丢失
      row.push(temp);
      temp = "";
    }
  }
  row.push(temp);

  // 如果数组长度大于2，则截取前两个
  if (row.length > lineNumber) {
    var rowCut = row.slice(0, lineNumber);
    var rowPart = rowCut[1];
    var test = "";
    var empty = [];
    for (var a = 0; a < rowPart.length; a++) {
      if (ctx.measureText(test).width < contentWidth) {
        test += rowPart[a];
      } else {
        break;
      }
    }
    empty.push(test); // 处理后面加省略号
    var group = empty[0] + '...'
    rowCut.splice(lineNumber - 1, 1, group);
    row = rowCut;
  }
  return row;
}

二、使用处调用

// 商品名称
let product = this.payCodeInfo.order.description
let productName = this.transformContentToMultiLineText(ctx, product[0], 150, 1)
ctx.arc(100, 140, 20, 0, 2 * Math.PI); // 显示在最上层
ctx.setTextAlign('center')
ctx.setFillStyle('#FB4240')
ctx.setFontSize(14)
ctx.font = 'normal, 32px, PingFangSC-Regular',
ctx.fillText(productName+', 共'+product.length+'件商品', 185, 445) // 商品名称

三、效果如图：