javascript - fabricjs i-text 光标在加载 json 后无法正常工作

Question

当我在新窗口中制作时，fabricjs i-text 光标运行良好。但是在加载保存的 json 后，它运行不正常。我使用的是 league_gothic 字体。

请看下图光标错误(第3个字符)

保存代码

savejson = JSON.stringify(canvas.fabric.toJSON())

加载代码

canvas.fabric.loadFromJSON(loadjson, function(){
...
}

更新:我已经看到 i-text 对象使用 console.log 并找到了 cursoroffsetCache 变量。但是我不知道如何修复它。
有没有人遇到过这种问题？

Answer 1

这通常是 Canvas 上未加载字体的错误。您应该确保在使用之前加载了字体。如果不是， Canvas 将使用类似的字体(arial？)，它将使用错误的字体测量文本，您将为其保留错误的测量值。

你有两种解决方法:

1) 使用合适的字体加载器，如 https://github.com/typekit/webfontloader很简单，体积小，效果很好。在加载的回调中，加载您的 JSON。

不太准确:

2) 从 JSON 加载后，超时为 1 或 2 秒，删除 fabric.charWidthsCache 以便删除错误的测量值。将文本对象的 _forceClearCache 设置为 true，以便触发新的测量(此时字体已完成加载)，再次请求 renderAll。