reactjs - 使用 useRef (React) 为 REST API 保存 Canvas (Konva) 的状态是否安全

Question

我正在构建一个小型 React 应用程序，目的是

• 能够在 Canvas 上移动形状
• 保存 Canvas 的状态
• 使用 REST API 从状态上传/加载

到目前为止，我的应用程序允许我在 Canvas 上移动形状，然后使用 React 的 useRef 保存 Canvas 的状态，然后保存 stageRef 的值:

const stageRef = useRef();
...
<Stage width={500} height={500} ref={stageRef}>
   ...(Layers and shapes)
</Stage>

此方法有效(就保存状态而言)，但我不确定使用 useRef 是否是处理保存状态的不安全方法以及是否有更好的方法。

我使用 Konva 作为我的 Canvas 库，其中包含阶段、图层、形状 - 最终会被保存。

感谢您的宝贵时间。

Answer 1

您可以使用ref来访问任何Konva节点。您可以使用 Konva 方法将 JSON 保存在某处。它会工作得很好:

const stageRef = useRef();

const handleSave = () => {
   const json = stageRef.current.toJSON();
}

<Stage width={500} height={500} ref={stageRef}>
   ...(Layers and shapes)
</Stage>

但我不建议使用它。

您的问题与 undo/redo react-konva demo 相关和 JSON saving best practices from Konva .

当您使用 react 和 react-konva 时，最好避免使用 Konva 内部组件。

您必须拥有自己的应用程序状态。它可以是一个简单的 react 状态或一些外部库，例如 mobx 或 redux 或其他任何东西。

只需将该状态保存到后端即可:

const [shapes, setShapes] = React.useState([]);

const handleSave = () => {
   const json = JSON.stringify(shapes);
}

<Stage width={500} height={500} ref={stageRef}>
   ...(Layers and shapes drawn from the state)
</Stage>

为什么最好使用应用程序的状态，而不是 Konva 的 JSON？

1. stage.toJSON() 的结构可能会随着时间的推移而改变。它是 Konva 保存和加载状态的内部格式。

2. stage.toJSON() 可能有一段噪音信息，使您的 JSON 变得更大。例如，对于每个形状，它将具有 fill 属性。但在您的应用程序中，保存该属性可能没有意义，因为所有形状始终都是红色的。

3. 您的数据和节省应该与框架无关。以防万一您决定使用其他东西来代替 Konva 进行绘图。