HTML5 Canvas 组教程

要使用 Konva 创建图形组，可以实例化一个 Konva.Group() 对象。

有关完整的属性和方法列表，请参阅 Group API 参考。

Vanilla

import Konva from 'konva';

const stage = new Konva.Stage({
  container: 'container',
  width: window.innerWidth,
  height: window.innerHeight
});

const layer = new Konva.Layer();
stage.add(layer);

const group = new Konva.Group({
  x: 50,
  y: 50,
  draggable: true
});

const circle = new Konva.Circle({
  x: 0,
  y: 0,
  radius: 30,
  fill: 'red'
});

const rect = new Konva.Rect({
  x: 20,
  y: 20,
  width: 100,
  height: 50,
  fill: 'green'
});

group.add(circle);
group.add(rect);
layer.add(group);

React

import { Stage, Layer, Group, Circle, Rect } from 'react-konva';
import { useState } from 'react';

const App = () => {
  const [position, setPosition] = useState({ x: 50, y: 50 });

  return (
    <Stage width={window.innerWidth} height={window.innerHeight}>
      <Layer>
        <Group
          x={position.x}
          y={position.y}
          draggable
          onDragEnd={(e) => {
            setPosition({ x: e.target.x(), y: e.target.y() });
          }}
        >
          <Circle x={0} y={0} radius={30} fill="red" />
          <Rect x={20} y={20} width={100} height={50} fill="green" />
        </Group>
      </Layer>
    </Stage>
  );
};

export default App;

Vue

<template>
  <v-stage :config="stageSize">
    <v-layer>
      <v-group :config="groupConfig">
        <v-circle :config="circleConfig" />
        <v-rect :config="rectConfig" />
      </v-group>
    </v-layer>
  </v-stage>
</template>

<script setup>
const stageSize = {
  width: window.innerWidth,
  height: window.innerHeight
};

const groupConfig = {
  x: 50,
  y: 50,
  draggable: true
};

const circleConfig = {
  x: 0,
  y: 0,
  radius: 30,
  fill: 'red'
};

const rectConfig = {
  x: 20,
  y: 20,
  width: 100,
  height: 50,
  fill: 'green'
};
</script>