0

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

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

我注意到这个问题只发生在对齐center或对齐的文本上right，而对齐的left文本没有这样的问题。

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

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

这是一个演示该问题的 GIF。

示范

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

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

4

1 回答 1

1

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

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

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

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

演示：https ://codesandbox.io/s/react-konva-webfonts-kswgl

于 2019-11-06T23:19:05.903 回答