Как измерить текст с помощью пробела: предварительно на холсте? - PullRequest
Новая
       14

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

1 голос
/ 26 октября 2019

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

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

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

ctx.font = '24px MyFont';

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

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

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

1 Ответ

0 голосов
/ 26 октября 2019

Использование CSS и API Range, который предлагает метод 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;
}

Draw some     rect

around  
      me

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

...