如何解决使用useRefReact为REST API保存画布Konva的状态是否安全?
我正在构建一个小的React应用程序,目的是
- 能够在画布上移动形状
- 保存画布的状态
- 使用REST API从状态上传/加载
到目前为止,我的应用程序允许我在画布上移动形状,然后使用React的useRef保存画布的状态,然后保存stageRef的值:
const stageRef = useRef();
...
<Stage width={500} height={500} ref={stageRef}>
...(Layers and shapes)
</Stage>
此方法有效(就保存状态而言),但我不确定使用useRef是处理保存状态的不安全方法,并且还有更好的方法。
我正在将Konva用于我的画布库,其中包含舞台,图层和形状-最终会被保存。
感谢您的时间。
解决方法
您可以使用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内部构件。
您必须具有自己的应用程序状态。它可以是简单的反应状态,也可以是外部库,例如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
属性。但是在您的应用中,保存该属性可能没有意义,因为您所有的形状始终都是红色的。 -
您的数据和节约应该与框架无关。以防万一,您将决定使用其他东西来代替
Konva
。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。