html - 如何测量带空格的文本 : pre on canvas?

Question

您可以像这样测量文本以获得句子的宽度:

ctx.measureText('I am a sentence').width

您可以这样做，因为您可以直接在上下文中设置字体，以匹配您试图真正测量的 HTML 中任何 CSS 样式的文本。

ctx.font = '24px MyFont';

但是如果我想对文本应用 whitespace: pre 怎么办？我似乎得到了不符合标准的奇怪结果。

我想做的是简单地计算出可以安全地放在一行中的单词。就是这样。但有时我测量的比渲染的要小，所以我开始怀疑 Canvas 测量技术实际上并不是一个准确的工具。

如何在考虑所有样式特征(例如 letter-spacing、whitespace: pre 等)的情况下准确测量句子的宽度？

Answer 1

使用 CSS 和 Range API，它提供了一个 getBoundingClientRect方法，这仍然是我们在等待 Font metrics API 时可以访问的最强大的组合.

const target = document.getElementById( 'target' );
const range = document.createRange();
const bounds = document.getElementById( 'bounds' );
range.selectNode( target.firstChild );
onresize = e => {
  const rect = range.getBoundingClientRect();
  bounds.style.left = rect.x + 'px';
  bounds.style.top = rect.y + 'px';
  bounds.style.width = rect.width + 'px';
  bounds.style.height = rect.height + 'px';
};
onresize();

#bounds {
  position: absolute;
  border: 1px solid;
}

<pre id="target">
Draw some     rect

around  
      me
</pre>
<div id="bounds"></div>

您可以在 this related Q/A 上查看此组合的更完整示例，以便在 Canvas 上绘图，可能更符合您的需要。 .