基于Konva/react-konva：如何从JSON恢复画布元素？

要从toJson()生成的JSON恢复画板的可编辑状态，核心是利用Konva的Node.create()方法解析JSON，再将解析后的节点数据同步到React的状态中，让react-konva以声明式方式重新渲染所有元素。以下是具体实现步骤：

一、确认JSON的正确保存 #

首先确保你正确获取并保存了画板的JSON数据：

const stageRef = useRef(null);

const saveDrawing = () => {
  if (!stageRef.current) return;
  const drawingJson = stageRef.current.toJson();
  // 可选择存入localStorage、后端数据库等
  localStorage.setItem('savedDrawing', drawingJson);
};

二、从JSON恢复画板状态 #

1. 解析JSON并提取元素数据 #

使用Konva.Node.create()将JSON字符串转换为Konva节点实例，然后提取每个图形的类型、属性等关键信息：

const loadDrawing = () => {
  const savedJson = localStorage.getItem('savedDrawing');
  if (!savedJson) return;

  // 创建临时Stage解析JSON
  const tempStage = Konva.Node.create(savedJson);
  const loadedShapes = [];

  // 遍历所有图层和图层内的图形元素
  tempStage.children.forEach(layer => {
    layer.children.forEach(shape => {
      loadedShapes.push({
        id: shape.id(),
        type: shape.className, // 获取图形类型（如Rect、Circle）
        props: shape.attrs // 获取图形的所有属性（位置、大小、样式等）
      });
    });
  });

  // 更新React状态，触发重新渲染
  setShapes(loadedShapes);
  // 销毁临时Stage，避免内存泄漏
  tempStage.destroy();
};

2. 动态渲染恢复的图形 #

在组件中通过state存储图形数据，然后根据类型渲染对应的react-konva组件：

import React, { useState, useRef } from 'react';
import { Stage, Layer, Rect, Circle, Text } from 'react-konva';

const DrawingBoard = () => {
  const stageRef = useRef(null);
  const [shapes, setShapes] = useState([]);

  // 省略saveDrawing和loadDrawing方法...

  return (
    <div>
      <button onClick={saveDrawing}>保存画板</button>
      <button onClick={loadDrawing}>加载画板</button>
      <Stage ref={stageRef} width={800} height={600}>
        <Layer>
          {shapes.map(shape => {
            switch (shape.type) {
              case 'Rect':
                return <Rect key={shape.id} {...shape.props} />;
              case 'Circle':
                return <Circle key={shape.id} {...shape.props} />;
              case 'Text':
                return <Text key={shape.id} {...shape.props} />;
              // 添加你支持的其他图形类型
              default:
                return null;
            }
          })}
        </Layer>
      </Stage>
    </div>
  );
};

export default DrawingBoard;

三、关键注意事项 #

• 确保覆盖所有你用到的图形类型（如自定义形状、图片等），否则对应元素会无法渲染
• 如果使用了自定义react-konva组件，需要在解析时将JSON中的属性映射到组件的props上
• 临时创建的tempStage必须调用destroy()销毁，防止内存泄漏
• 若画板包含多图层，需保持图层结构一致，恢复时按原图层顺序渲染

内容的提问来源于stack exchange，提问作者Matteo Robert