Konva/react-konva - 从 JSON 恢复画布元素

Question

我正在创建一个使用 react-konva 和 Konva 作为绘图板的 React 应用程序。目前，当用户单击“保存”按钮时，它会截取面板的“屏幕截图”（使用 toDataUrl）。这个问题是，如果用户以后想继续，我想恢复板（所以基本上我想保留矢量图形板）。我发现这可以通过 ref.current.toJson() 方法完成，因为它以 JSON 格式保存板元素。如果我知道 JSON 中的最后状态，我该如何恢复棋盘？

Answer 1

因为你有板的 JSON 表示，通过使用 JSON.parse() 方法解析 JSON 来解析 JSON 字符串，然后将其转换为 JavaScript 对象，然后通过使用 setState() 方法更新板的状态来更新板的状态与已解析的数据，最后您使用已解析的数据渲染板。

试试这个：

const boardData = JSON.parse(jsonData);
this.setState({ boardData });

render() {
  return (
    <Stage width={500} height={500}>
      <Layer>
        <Group>
          {this.state.boardData.elements.map((element, index) => (
            <Shape key={index} {...element} />
          ))}
        </Group>
      </Layer>
    </Stage>
  );
}

在这段代码中，注意 boardData 对象包含一个元素数组，每个元素都呈现为一个 Shape 组件。

这应该给你一个好主意，并为恢复板的基本结构和外观提供了一个合理的起点，你可以根据你的特定数据格式和渲染逻辑调整代码来渲染板。

请注意，从 JSON 恢复板可能无法在所有情况下完美工作，因为某些属性（例如事件处理程序或动画）可能不会以 JSON 格式保留。