canvas - html画布文本溢出省略号

Question

如果文本不适合可用宽度并且需要截断，是否可以在文本末尾有省略号的画布上绘制文本？谢谢。

Answer 1

没有标准功能。

由于我需要一个，我制作了这个计算最佳拟合字符串的小函数：

function fittingString(c, str, maxWidth) {
  var width = c.measureText(str).width;
  var ellipsis = '…';
  var ellipsisWidth = c.measureText(ellipsis).width;
  if (width<=maxWidth || width<=ellipsisWidth) {
    return str;
  } else {
    var len = str.length;
    while (width>=maxWidth-ellipsisWidth && len-->0) {
      str = str.substring(0, len);
      width = c.measureText(str).width;
    }
    return str+ellipsis;
  }
}

c2D 上下文在哪里。

设置好画布的字体和其他绘图参数后，您可以正常绘制字符串：

c.fillText(fittingString(c, "A big string that will likely be truncated", 100), 50, 50);

Answer 2

在处理大量文本时，投票最多的答案会导致性能问题。

这是使用二进制搜索来加快搜索正确长度字符串的改编版本。

const binarySearch = ({ max, getValue, match }) => {
  let min = 0;

  while (min <= max) {
    let guess = Math.floor((min + max) / 2);
    const compareVal = getValue(guess);

    if (compareVal === match) return guess;
    if (compareVal < match) min = guess + 1;
    else max = guess - 1;
  }

  return max;
};

const fitString = (
  ctx,
  str,
  maxWidth,
) => {
  let width = ctx.measureText(str).width;
  const ellipsis = '…';
  const ellipsisWidth = ctx.measureText(ellipsis).width;
  if (width <= maxWidth || width <= ellipsisWidth) {
    return str;
  }

  const index = binarySearch({
    max: str.length,
    getValue: guess => ctx.measureText(str.substring(0, guess)).width,
    match: maxWidth - ellipsisWidth,
  });

  return str.substring(0, index) + ellipsis;
};

Answer 3

有一些与浏览器相关的技术不支持多行文本呈现。

这就是为什么我开发了一个小型图书馆来处理这个问题（等等）。该库提供对象来建模和执行字母级文本渲染。这应该可以满足您的需要：

在http://www.samuelrossille.com/home/jstext阅读更多屏幕截图、教程和下载链接。

Answer 4

html5 drawText 没有这样的东西，实现起来会有点复杂。您需要循环来修剪字符串，直到适合所需的大小。如果文本没有旋转或有任何其他特殊效果，我建议使用具有绝对位置和以下 CSS 样式的普通 div：

overflow: hidden;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
white-space: nowrap;
width: 100%;