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

Question

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

能够在 canvas
保存canvas
从状态

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

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

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

我正在为我的 canvas 库使用 Konva，其中包含阶段、图层、形状 - 最终得到保存。

感谢您的宝贵时间。

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 and JSON saving best practices from Konva 有关。

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

您必须拥有自己的应用程序状态。它可以是一个简单的反应状态或一些外部库，如 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？

stage.toJSON() 的结构可能会随着时间的推移而改变。它是Konva保存和加载状态的一种内部格式。
stage.toJSON()可能有一段噪音信息让你的JSON变大了。例如，对于每个形状，它将有 fill 属性。但有可能在您的应用中保存属性没有意义，因为您的所有形状一直都是红色的。
您的流量和储蓄应该是 framework-agnostic。以防万一您决定使用其他东西代替 Konva.
进行绘图

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

Is it safe to use useRef (React) to save state of a canvas (Konva) for REST API

canvas

reactjs

konvajs

react-konva