从 JSON 加载简单 HTML5 Canvas 阶段教程

要使用 Konva 从 JSON 加载一个简单的舞台，可以使用 Konva.Node.create() 方法。create() 方法接受一个 JSON 字符串和容器 ID 作为参数。

Vanilla
React
Vue

import Konva from 'konva';

// 从之前保存的 JSON 字符串
const json = '{"attrs":{"width":400,"height":400},"className":"Stage","children":[{"attrs":{},"className":"Layer","children":[{"attrs":{"x":100,"y":100,"radius":50,"fill":"red","stroke":"black","strokeWidth":3},"className":"Circle"}]}]}';

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

// 你可以继续添加事件等
const circle = stage.findOne('Circle');
circle.on('click', () => {
  circle.fill(Konva.Util.getRandomColor());
});

Open Sandbox

注意： 在 React 或 Vue 中直接使用 Konva.Node.create() 是反模式。在这些框架中，我们应该将状态（数据）与视图（组件）分开管理。与其序列化和加载整个节点结构，不如保存和加载定义我们形状的数据，然后让框架组件处理渲染。这种方法更符合 React 和 Vue 的声明式、基于状态的模式，并提供更好的组件生命周期和事件控制。

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

const App = () => {
  // 在 React 中，我们将形状数据存储为状态，而不是使用 Konva.Node.create()
  const [shapeData, setShapeData] = useState(null);
  
  useEffect(() => {
    // 模拟从存储或 API 加载 JSON 数据
    const savedShapeData = {
      circle: {
        x: 100,
        y: 100,
        radius: 50,
        fill: 'red',
        stroke: 'black',
        strokeWidth: 3
      },
      // 此处可以有更多形状
    };
    
    // 在真实应用中，这可能是：
    // fetch('/api/shapes').then(response => response.json()).then(setShapeData)
    setShapeData(savedShapeData);
  }, []);
  
  const handleCircleClick = () => {
    setShapeData({
      ...shapeData,
      circle: {
        ...shapeData.circle,
        fill: Konva.Util.getRandomColor()
      }
    });
  };
  
  // 在我们有数据之前不进行渲染
  if (!shapeData) return <div>加载中...</div>;
  
  return (
    <Stage width={400} height={400}>
      <Layer>
        <Circle
          {...shapeData.circle}
          onClick={handleCircleClick}
        />
      </Layer>
    </Stage>
  );
};

export default App;

Open Sandbox

<template>
  <v-stage :config="stageSize" v-if="shapeData">
    <v-layer>
      <v-circle
        :config="shapeData.circle"
        @click="handleCircleClick"
      />
    </v-layer>
  </v-stage>
  <div v-else>加载中...</div>
</template>

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

const stageSize = {
  width: 400,
  height: 400
};

// 在 Vue 中，我们将形状数据存储为响应式状态
const shapeData = ref(null);

onMounted(() => {
  // 模拟从存储或 API 加载 JSON 数据
  const savedShapeData = {
    circle: {
      x: 100,
      y: 100,
      radius: 50,
      fill: 'red',
      stroke: 'black',
      strokeWidth: 3
    }
    // 此处可以有更多形状
  };
  
  // 在真实应用中，这可能是：
  // fetch('/api/shapes').then(response => response.json()).then(data => shapeData.value = data)
  shapeData.value = savedShapeData;
});

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

Open Sandbox