Как сохранить этап холста в формате JSON?

Question

В моем текущем проекте я хочу создать что-то вроде Image Editor с react и react-konva.

Прежде всего, я визуализирую сцену конвы с некоторыми реквизитами и перетаскиваемыми звездами по умолчанию.

На следующем шаге мы можем установить фоновое изображение для нашей сцены, используя Image от реакт-конва.

<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?

Answer 1

В Konva API имеет toJSON()метод. Вы можете преобразовать любой узел (например, Stage) в json.

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

Для более сложных случаев (например, если у вас есть изображения, фильтры): https://konvajs.org/docs/data_and_serialization/Best_Practices.html

НО, если вы используете реакцию, я не рекомендую использовать Konva методы сериализации рендеринга холста.

В вашей реакции вы должны указать состояние вашего приложения. Это может быть любая государственная библиотека (mobx, redux) или простоsetState или useStateReact или что-нибудь еще. Обычно это состояние легко сериализовать в JSON.