FabricJS 反序列化问题

Question

我已经序列化了画布对象，这是通过

canvas.toJSON()

获得的，反序列化后

canvas.loadFromJSON(jsonObj, canvas.renderAll.bind(canvas))

我无法操作画布中的对象，它们不可选择。

预期行为： 反序列化后，所有对象都必须像序列化之前一样可选择和管理。

我在 codesandbox

中重现了问题

如何重现：

1. 单击序列化
2. 单击反序列化
3. 尝试抓取、旋转或更改下图的大小

也许我做错了什么？将很高兴提供任何帮助和建议。

Answer 1

经过一番研究，我发现了问题所在。

为什么我无法操作反序列化对象？ 因为有 2 个 canvas html 元素。正如我们从屏幕截图中看到的，有 2 个画布。第一个（绿色边框）带有图像，第二个（红色边框）为空。我所有的互动都是与空的（红色）画布进行的。如果我删除第二个画布，我可以与图像对象交互。

为什么会发生这种情况？ 在

StrictMode

的

useEffect

回调中调用两次，这就是为什么我得到嵌套的 canvas html 元素。

如何修复它？ 有几种解决方法选项可以摆脱它。

1. 删除

   StrictMode

   。明显且简单，但不需要的解决方案。
2. 在组件外部使用标志变量。

let wasCalled = false;
export default function App() {
// ...
useEffect(() => {
  if (wasCalled) {
    return;
  }
  wasCalled = true;
// ...
},[])

可能有更优雅的解决方案，例如以其他方式初始化画布实例，但目前对我来说没问题。