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

Question

我正在尝试使用网络字体和 React Konva canvas 库在 canvas 上绘制一些文本数据。我正在使用 WebFontLoader 库加载网络字体。

在字体完全加载之前当然会有短暂的延迟。但是，一旦加载字体，文本就会绘制在错误的位置，并且在重新绘制之前不会自行更正。

我注意到此问题仅发生在 center 或 right 对齐的文本上，left 对齐的文本没有此类问题。

我没有找到任何其他讨论此问题及其解决方法的帖子。创建组件的引用并在字体加载完成后使用 WebFontLoader 调用 draw() 或 forceUpdate() 不会导致元素重新调整，只会修改其内容。

我在 CodeSandbox 上创建了一个最小的可重现示例：https://codesandbox.io/s/react-konva-webfonts-6engr

这是演示该问题的 GIF。

注意文本相对于线条的位置，该线条具有静态位置。文本首先以错误的字体加载（请注意，在我的完整应用程序中，我具有隐藏 canvas 直到字体和图像加载的功能），然后更改为正确的字体，但处于偏移位置，并且没有自行更正，直到文本框被修改。

我希望看到以 Konva 可以理解的方式加载字体的 WebFontLoader 替代品，或者强制 Konva canvas 重绘自身的代码。

Answer 1

Konva.Text 需要在加载字体时重新计算字符位置。但它不会在加载时自动执行此操作。目前，还没有API通过某种方法强制手动重新计算。

但您可以通过更改文本属性（例如 text 或 fontFamily）强制重新计算内部状态。

其中一种方法是回退到默认字体，直到未加载原始字体：

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

Using WebFontLoader with React Konva causes text offsets?