Блог

У меня возникла проблема с наложением символов в моих объектах itext. Как показано на рисунке, фон букв каким-то образом имеет неправильное смещение или / и ширину. Я не могу отследить ошибку. Возможно, это какой-то css на моем сайте, но я не знаю, как css может повлиять на объект itext. Вот как это выглядит, когда для заполнения объекта установлено значение 0. Ширина превышает правую границу!

Я попытался воспроизвести ошибку в скрипке, но, конечно, безуспешно. https://jsfiddle.net/FlemmingH/z74whhtn

 var canvas=new fabric.Canvas('canv');

var iTextSample = new fabric.IText('BOX', {
  left: -200,
  top: 20,
  fontFamily: 'Helvetica',
  fill: '#333',
  lineHeight: 1.1,
  styles: {
    0: {
      0: { textBackgroundColor: 'rgba(0,0,255,0.3)' , fontSize: 420 },
      1: { textBackgroundColor: 'rgba(0,255,0,0.3)', fontSize: 420  },
      2: { textBackgroundColor: 'rgba(255,0,0,0.3)', fontSize: 420  }

    }
  }
});
canvas.add(iTextSample);
  

РЕДАКТИРОВАТЬ 1 — Округление-ошибка в fabric.js ???
Хорошо, теперь ошибка воспроизводима! Попробуйте вручную увеличить этот объект iText: iText fiddle
Похоже, что при увеличении размера шрифта с малого (в скрипке я использовал размер шрифта: 20) возникает ошибка округления.

Как показано на рисунке ниже, ошибка по-прежнему возникает даже при размере шрифта: 120.

Итак, единственный вариант обойти это, инициализировав объект iText с большим размером шрифта, а затем принудительно уменьшив его масштаб пользователя?

Благодарим вас за доведение этой проблемы до средства отслеживания проблем fabricjs. Это ошибка. Я пытаюсь исправить это. Существует дополнительное вычисление ширины символа в 1 пиксель.