Использование WebFontLoader с React Konva вызывает смещение текста?

Я пытаюсь нарисовать некоторые текстовые данные на холсте, используя веб-шрифт, с помощью библиотеки холста React Konva. Я загружаю веб-шрифты с помощью библиотеки WebFontLoader.

Конечно, есть небольшая задержка до полной загрузки шрифтов. Однако после загрузки шрифта текст отображается в неправильном положении и не исправляется до тех пор, пока не будет перерисован.

Я заметил, что эта проблема возникает только для текста, который выровнен center или right, а текст, выровненный по left, не имеет такой проблемы.

Я не нашел других сообщений, в которых обсуждалась бы эта проблема и способы ее решения. Создание ссылки на компонент и вызов draw() или forceUpdate() с помощью WebFontLoader после того, как шрифты завершили загрузку, не приводят к корректировке элемента, а только изменение его содержимого.

Я создал минимальный воспроизводимый пример на CodeSandbox: https://codesandbox.io/s/react-konva-webfonts-6engr

А вот GIF, демонстрирующий проблему.

Демонстрация

Обратите внимание на положение текста относительно строки, которая имеет статическое положение. Текст сначала загружается с неправильным шрифтом (обратите внимание, что в моем полном приложении у меня есть функция, позволяющая скрыть холст до загрузки шрифтов и изображений), затем изменяется на правильный шрифт, но он находится в позиции смещения и не исправляется до тех пор, пока текстовое поле изменено.

Я хотел бы увидеть либо альтернативу WebFontLoader, которая загружает шрифты так, как Konva может понять, либо код, который заставляет холст Konva перерисовывать себя.


reactjs javascript webfonts konvajs react-konva
person EliteMasterEric    schedule 06.11.2019    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Konva.Text необходимо пересчитать позиции символов при загрузке шрифта. Но это не происходит автоматически при загрузке. И в настоящее время нет API для принудительного пересчета вручную каким-либо методом.

Но вы можете принудительно пересчитать внутреннее состояние, изменив текстовые атрибуты (например, text или fontFamily).

Один из способов сделать это - просто вернуться к шрифту по умолчанию, пока исходный не загрузится:

<Text
  text={textData}
  fontFamily={loaded ? 'Roboto' : 'Arial'}
  align="right"
/>

Демо: https://codesandbox.io/s/react-konva-webfonts-kswgl < / а>

person lavrton    schedule 06.11.2019
comment
Большое спасибо! Как уже упоминалось, я думал об этом, но моя реализация заключалась в вызове функции перерисовки, которая, по-видимому, не вызывает пересчета. - person EliteMasterEric; 08.11.2019