从 JSON 加载 HTML5 Canvas 阶段教程

要使用 Konva 加载一个最初包含图像和事件绑定的复杂舞台，我们需要使用 Konva.Node.create() 创建一个舞台节点，然后借助选择器使用 find() 方法设置图像和事件处理程序。图像和事件处理程序必须手动设置，因为它们不可序列化。

该方法适用于小型应用。对于更复杂的情况，请查看 最佳实践

Vanilla

import Konva from 'konva';

// 来自先前保存的 JSON 字符串
const json = '{"attrs":{"width":578,"height":200},"className":"Stage","children":[{"attrs":{},"className":"Layer","children":[{"attrs":{"x":100,"y":100,"sides":6,"radius":70,"fill":"red","stroke":"black","strokeWidth":4},"className":"RegularPolygon"}]}]}';

// 使用 JSON 字符串创建节点
const stage = Konva.Node.create(json, 'container');

// 获取六边形的引用
const hexagon = stage.findOne('RegularPolygon');

// 绑定事件
hexagon.on('click', () => {
  hexagon.fill(Konva.Util.getRandomColor());
});

Open Sandbox

React

注意： 在 React 中直接使用 Konva.Node.create() 是一种反模式。在 React 应用中，我们应该将状态与视图分开管理。我们应该加载定义形状的数据，让 React 组件处理渲染，而不是反序列化整个节点结构。下面的示例演示了如何在 React 中将形状数据作为状态加载：

import { Stage, Layer, RegularPolygon } from 'react-konva';
import { useState, useEffect } from 'react';
import Konva from 'konva';

const App = () => {
  const [shapeData, setShapeData] = useState(null);
  
  useEffect(() => {
    // 模拟从存储或 API 加载 JSON 数据
    const loadData = () => {
      // 这通常来自 localStorage、API 等
      const jsonString = '{"hexagon":{"x":100,"y":100,"sides":6,"radius":70,"fill":"red","stroke":"black","strokeWidth":4}}';
      
      try {
        // 将 JSON 解析为 JavaScript 对象
        const data = JSON.parse(jsonString);
        setShapeData(data);
      } catch (error) {
        console.error('解析 JSON 时出错：', error);
      }
    };
    
    loadData();
  }, []);
  
  const handleClick = () => {
    if (shapeData) {
      setShapeData({
        ...shapeData,
        hexagon: {
          ...shapeData.hexagon,
          fill: Konva.Util.getRandomColor()
        }
      });
    }
  };
  
  // 在我们拥有数据之前不渲染
  if (!shapeData) return <div>加载中...</div>;
  
  return (
    <Stage width={578} height={200}>
      <Layer>
        <RegularPolygon
          {...shapeData.hexagon}
          onClick={handleClick}
        />
      </Layer>
    </Stage>
  );
};

export default App;

Open Sandbox

Vue

注意： 在 Vue 中直接使用 Konva.Node.create() 是一种反模式。在 Vue 应用中，我们应该使用响应式数据独立于视图来管理状态。我们应该加载定义形状的数据，并让 Vue 组件处理渲染，而不是反序列化整个节点结构。下面的示例演示了如何在 Vue 中将形状数据作为响应式状态加载：

<template>
  <div>
    <v-stage :config="stageSize" v-if="shapeData">
      <v-layer>
        <v-regular-polygon
          :config="shapeData.hexagon"
          @click="handleClick"
        />
      </v-layer>
    </v-stage>
    <div v-else>加载中...</div>
  </div>
</template>

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

const stageSize = {
  width: 578,
  height: 200
};

const shapeData = ref(null);

onMounted(() => {
  // 模拟从存储或 API 加载 JSON 数据
  const loadData = () => {
    // 这通常来自 localStorage、API 等
    const jsonString = '{"hexagon":{"x":100,"y":100,"sides":6,"radius":70,"fill":"red","stroke":"black","strokeWidth":4}}';
    
    try {
      // 将 JSON 解析为 JavaScript 对象
      const data = JSON.parse(jsonString);
      shapeData.value = data;
    } catch (error) {
      console.error('解析 JSON 时出错：', error);
    }
  };
  
  loadData();
});

const handleClick = () => {
  if (shapeData.value) {
    shapeData.value = {
      ...shapeData.value,
      hexagon: {
        ...shapeData.value.hexagon,
        fill: Konva.Util.getRandomColor()
      }
    };
  }
};
</script>

Open Sandbox