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

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

纯 Konva 提供了一种特殊机制，可以使用 node.toJSON() 和 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>

Open Sandbox