Как измерить текст с пробелами: предварительно на холсте?

Вы можете измерить текст, чтобы получить ширину предложения следующим образом:

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

Вы можете сделать это, потому что вы устанавливаете шрифт непосредственно в контексте, чтобы соответствовать любому тексту в стиле CSS в вашем HTML, который вы пытаетесь действительно измерить.

ctx.font = '24px MyFont';

Но что, если я хочу применить whitespace: pre к тексту? Кажется, я получаю странные результаты, которые не соответствуют действительности.

Что я пытаюсь сделать, так это просто вычислить слова, которые могут безопасно поместиться в одной строке. Вот и все. Но иногда то, что я измеряю, меньше того, что отображается, поэтому я начинаю подозревать, что метод измерения холста на самом деле не является точным инструментом.

Как точно измерить ширину предложения с учетом всех особенностей стиля, таких как letter-spacing, whitespace: pre и т. д.?


html css measure html5-canvas
person Lance Pollard    schedule 26.10.2019    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Используйте CSS и Range API, который предлагает getBoundingClientRect, это по-прежнему самая мощная комбинация, к которой у нас есть доступ в ожидании 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>

Вы можете увидеть более полный пример этой комбинации для рисования на холсте, возможно, больше похожем на то, что вам нужно, на это относится к вопросам и ответам.

person Kaiido    schedule 26.10.2019