如何用 Vue 和 Konva 保存与加载画布？

如何用 Vue 序列化和反序列化 Konva 舞台？

Pure Konva 可以通过 node.toJSON() 序列化节点树及其可序列化属性。它可以通过 Konva.Node.create(json) 还原这些内容。请分别还原图像、事件处理器和自定义绘图函数。 查看演示。

使用 vue-konva，在 Vue 组件中定义应用状态。状态通过模板映射到节点。保存和加载应用状态，而不是 Konva 内部结构和节点。

操作指南：点击画布创建圆形。重新加载页面后，圆形应当会保持存在。

<template>
  <div>
    点击画布创建一个圆形。
    <a href=".">重新加载页面</a>。圆形应当会保持在这里。
    <v-stage
      ref="stage"
      :config="stageSize"
      @click="handleClick"
    >
      <v-layer ref="layer">
        <v-circle
          v-for="item in list"
          :key="item.id"
          :config="item"
        />
      </v-layer>
    </v-stage>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';

const stageSize = {
  width: window.innerWidth,
  height: window.innerHeight
};

const list = ref([{ x: 100, y: 100, radius: 50, fill: 'blue' }]);

const handleClick = (evt) => {
  const stage = evt.target.getStage();
  const pos = stage.getPointerPosition();
  list.value.push({
    radius: 50,
    fill: 'red',
    ...pos
  });

  save();
};

const load = () => {
  const data = localStorage.getItem('storage');
  if (data) list.value = JSON.parse(data);
};

const save = () => {
  localStorage.setItem('storage', JSON.stringify(list.value));
};

onMounted(() => {
  load();
});
</script>