0

在我当前的项目中，我想用 react 和 react-konva构建类似图像编辑器的东西。

首先，我用一些道具和默认的可拖动星星渲染了一个 konva 舞台。

在下一步中，我们可以使用Imagereact-konva 为我们的舞台设置背景图像。

<Stage width={konvaWidth} height={height - 150} className={classes.canvas} onClick={test}>
        <Layer>
          {image && bg && <Image
            x={0}
            y={0}
            image={bg}
            scaleX={0.35}
            scaleY={0.35}
            ref={node => {
              imageRef = node;
            }}
          />}
          <Text text="Try to drag a star" />
          {[...Array(10)].map((_, i) => (
            <Star
              key={i}
              x={Math.random() * window.innerWidth}
              y={Math.random() * window.innerHeight}
              numPoints={5}
              innerRadius={20}
              outerRadius={40}
              fill="#89b717"
              opacity={0.8}
              draggable
              rotation={Math.random() * 180}
              shadowColor="black"
              shadowBlur={10}
              shadowOpacity={0.6}
              onDragStart={handleDragStart}
              onDragEnd={handleDragEnd}
            />
          ))}
        </Layer>
      </Stage>

下一步，也是最后一步。

我们可以将 konva 阶段保存为 json 格式吗？

4

1 回答 1

2

KonvaAPI 有toJSON()方法。您可以将任何节点（如 Stage）转换为 json。

https://konvajs.org/docs/data_and_serialization/Serialize_a_Stage.html

对于更复杂的情况（例如，如果您有图像、过滤器）：https ://konvajs.org/docs/data_and_serialization/Best_Practices.html

但是，如果您使用 react 我不建议使用Konva方法来序列化画布渲染。

在你的反应中，你必须有你的应用程序的状态。In 可以是任何状态库（mobx、redux），也可以是 React 或其他setState任何状态库。useState通常，该状态很容易序列化为 JSON。

于 2020-07-17T14:39:41.477 回答