将WebFontLoader与React Konva一起使用会导致文本偏移吗？

Question

我正在尝试使用Web字体通过React Konva画布库在画布上绘制一些文本数据。我正在使用WebFontLoader库加载网络字体。

当然，在完全加载字体之前会有短暂的延迟。但是，一旦加载了字体，将在不正确的位置绘制文本，并且在重新绘制之前不会对其进行校正。

我已经注意到，仅对于对齐center或right的文本会出现此问题，而left对齐的文本则没有此问题。

我还没有发现其他任何文章来讨论此问题以及如何解决该问题。在字体完成加载后，创建组件的引用并使用WebFontLoader调用draw()或forceUpdate()不会导致元素重新调整，仅修改其内容即可。

我在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