Canvas неправильный measureText () - PullRequest
Новая
       49

Canvas неправильный measureText ()

0 голосов
/ 11 марта 2020

Я создаю бот Discord и пытаюсь показать чей-то уровень, я бы хотел, например, сказать «УРОВЕНЬ 1», но расстояние между уровнем слова и фактическим уровнем будет меняться в зависимости от уровня, на котором они находятся , Поэтому я пытаюсь немного сместить слово, но когда я использую measureText (), оно отображается неправильно. Код: 

    const levelNumber = '1';
    const levelText = 'LEVEL';

    ctx.font = '48px Shapirit';
    ctx.fillStyle = '#FF1700';
    ctx.textAlign = 'right';
    ctx.fillText(levelNumber, 880, 96.8);

    ctx.font = '22px Shapirit';
    ctx.fillStyle = '#FF1700';
    ctx.textAlign = 'right';
    ctx.fillText(levelText, 880 - ctx.measureText(levelNumber).width - 20, 96.8);

Вот токовый выход: output 1 output 2

1 Ответ

1 голос
/ 11 марта 2020

Да, @Джей прав. Вы должны measureText с правильным шрифтом, если нет, вы получите неправильные результаты.

См. Пример ниже 

function drawLevel(x, y, txt, num, style) {
  ctx.font = '48px Shapirit';
  ctx.fillStyle = style;
  ctx.textAlign = 'right';
  ctx.fillText(num, x, y);
  w = ctx.measureText(num).width

  ctx.font = '22px Shapirit';
  ctx.fillStyle = style;
  ctx.textAlign = 'right';
  ctx.fillText(txt, x - w - 20, y);
}


canvas = document.getElementById("canvas");
ctx = canvas.getContext("2d");

drawLevel(200, 40, 'LEVEL', '999', '#FF1700');
drawLevel(200, 80, 'LEVEL', '11', '#0000FF');
drawLevel(200, 120, 'LEVEL', '1', '#00FF00');
<canvas id="canvas">
...