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

Question

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

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

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

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

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

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

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

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

Answer 1

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

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

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

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

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