关于javascript:canvas-文字换行

引子

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

• 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;}

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

参考资料

• The canvas element
• measureText MDN
• HTML5 Canvas Text Wrap Tutorial
• html canvas text overflow ellipsis