关于javascript:canvas-文字换行

24次阅读

共计 1637 个字符，预计需要花费 5 分钟才能阅读完成。

近期的工作中，遇到的性能需要，须要管制文字显示行数，超过就省略号显示。

Origin
My GitHub

个别文字行数管制用 css 就能够实现，但在 canvas 中不行。在网站查问材料，就能够发现须要程序控制文字换行，次要应用到的办法是 measureText()，这个办法会返回一个度量文本的相干信息的对象，例如文本的宽度。

这里会有一个边界问题：如果文字在 canvas 边界呈现换行，那么就可能呈现文字显示不全的问题。

次要解决办法如下：

// 文本换行解决，并返回理论文字所占据的高度
function textEllipsis (context, text, x, y, maxWidth, lineHeight, row) {if (typeof text != 'string' || typeof x != 'number' || typeof y != 'number') {return;}
  var canvas = context.canvas;

  if (typeof maxWidth == 'undefined') {maxWidth = canvas && canvas.width || 300;}

  if (typeof lineHeight == 'undefined') {
    // 有些状况取值后果是字符串，比方 normal。所以要判断一下
    var getLineHeight = window.getComputedStyle(canvas).lineHeight;
    var reg=/^[0-9]+.?[0-9]*$/;
    lineHeight = reg.test(getLineHeight)? getLineHeight:20;
  }

  // 字符分隔为数组
  var arrText = text.split('');
  // 文字最终占据的高度，搁置在文字上面的内容排版，可能会依据这个来确定地位
  var textHeight = 0;
  // 每行显示的文字
  var showText = '';
  // 管制行数
  var limitRow = row;
  var rowCount = 0;

  for (var n = 0; n < arrText.length; n++) {var singleText = arrText[n];
    var connectShowText = showText + singleText;
    // 没有传管制的行数，那就始终换行
    var isLimitRow = limitRow ? rowCount === (limitRow - 1) : false;
    var measureText = isLimitRow ? (connectShowText+'……') : connectShowText;
    var metrics = context.measureText(measureText);
    var textWidth = metrics.width;

    if (textWidth > maxWidth && n > 0 && rowCount !== limitRow) {
      var canvasShowText = isLimitRow ? measureText:showText;
      context.fillText(canvasShowText, x, y);
      showText = singleText;
      y += lineHeight;
      textHeight += lineHeight;
      rowCount++;
      if (isLimitRow) {break;}
    } else {showText = connectShowText;}
  }
  if (rowCount !== limitRow) {context.fillText(showText, x, y);
  }

  var textHeightValue = rowCount < limitRow ? (textHeight + lineHeight): textHeight;
  return textHeightValue;
}

这是示例，扫描拜访二维码如下。