我正在尝试使用 Web 字体和 React Konva Canvas 库在 Canvas 上绘制一些文本数据。我正在使用 WebFontLoader 库加载网络字体。
在字体完全加载之前当然会有短暂的延迟。但是，一旦加载字体，文本就会绘制在错误的位置，并且在重新绘制之前不会自行纠正。
我注意到，此问题仅发生在 center 或 right 对齐的文本上，而 left 对齐的文本没有此问题.
我还没有找到任何其他帖子讨论这个问题以及如何解决它。创建对组件的引用并在字体加载完成后使用 WebFontLoader 调用 draw() 或 forceUpdate() 不会导致元素重新调整，只会修改其内容确实如此。
我在 CodeSandbox 上创建了一个最小的可重现示例:https://codesandbox.io/s/react-konva-webfonts-6engr
这是一个演示该问题的 GIF。
注意文本相对于线条的位置，该线条具有静态位置。文本首先以错误的字体加载(请注意，在我的完整应用程序中，我具有隐藏 Canvas 的功能，直到加载字体和图像)，然后更改为正确的字体，但处于偏移位置，并且不会自行纠正，直到文本框已修改。
我希望看到 WebFontLoader 的替代方案(以 Konva 可以理解的方式加载字体)，或者强制 Konva Canvas 重新绘制自身的代码。
最佳答案
Konva.Text 需要在加载字体时重新计算字符位置。但它不会在加载时自动执行此操作。目前还没有API可以通过某种方法强制手动重新计算。
但是您可以通过更改文本属性(例如 text 或 fontFamily)来强制重新计算内部状态。
实现此目的的方法之一就是回退到默认字体，直到原始字体未加载:
<Text
text={textData}
fontFamily={loaded ? 'Roboto' : 'Arial'}
align="right"
/>
关于javascript - 将 WebFontLoader 与 React Konva 一起使用会导致文本偏移吗？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58733346/