小程序Canvas 超出换行,亲测有效

992 阅读1分钟
  • 话不多说直接上代码

let x = 100  // x轴
let y = 100 // y轴
let size = 30 // 字体大小
let color = '#FFFFFF' // 字体颜色
let width = 750 // 最大宽度,超出换行
let lineHeight = 22 // 行高

// 核心代码
const maskCanvas = wx.createCanvasContext('maskCanvas', this); // 创建 canvas 的绘图上下文 CanvasContext 对象
const arrText = currentValue.value.split('');
let line = '';
maskCanvas.setFontSize(size)
maskCanvas.setFillStyle(color)
for (let n = 0; n < arrText.length; n++) {
  const testLine = line + arrText[n];
  const metrics = maskCanvas.measureText(testLine);
  const testWidth = metrics.width;
  if (testWidth > width && n > 0) {
    maskCanvas.fillText(line, x, y);
    line = arrText[n];
    y += lineHeight;
  } else {
    line = testLine;
  }
}
maskCanvas.fillText(line, x, y);

别试了,这段代码,没有超出隐藏,出现省略号的功能