将形状移动到另一个容器

要将形状从一个容器移动到另一个容器，使用 Konva，我们可以使用 moveTo() 方法，该方法需要一个容器作为参数。
容器可以是另一个舞台、一个层或者一个组。你还可以将组移动到其他组和层，或者将形状从组直接移动到其他层。

说明：拖放这些组，观察红色矩形绑定到黄色组或蓝色组。使用左侧的按钮将盒子从一个组移动到另一个组。

Vanilla

import Konva from 'konva';

const width = window.innerWidth;
const height = window.innerHeight;

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

const layer = new Konva.Layer();

// 黄色组
const group1 = new Konva.Group({
x: 50,
y: 50,
draggable: true,
});

const yellow = new Konva.Rect({
width: 100,
height: 100,
fill: 'yellow',
stroke: 'black',
strokeWidth: 4,
});
group1.add(yellow);

// 蓝色组
const group2 = new Konva.Group({
x: 200,
y: 50,
draggable: true,
});

const blue = new Konva.Rect({
width: 100,
height: 100,
fill: 'blue',
stroke: 'black',
strokeWidth: 4,
});
group2.add(blue);

// 红色框
const redBox = new Konva.Rect({
x: 10,
y: 10,
width: 30,
height: 30,
fill: 'red',
});
group1.add(redBox);

layer.add(group1);
layer.add(group2);
stage.add(layer);

// 创建按钮
const moveToGroup1Btn = document.createElement('button');
moveToGroup1Btn.textContent = '移动到黄色组';
moveToGroup1Btn.addEventListener('click', () => {
redBox.moveTo(group1);
});

const moveToGroup2Btn = document.createElement('button');
moveToGroup2Btn.textContent = '移动到蓝色组';
moveToGroup2Btn.addEventListener('click', () => {
redBox.moveTo(group2);
});

document.body.appendChild(moveToGroup1Btn);
document.body.appendChild(moveToGroup2Btn);

Open Sandbox

React

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

const App = () => {
  const [redBoxGroup, setRedBoxGroup] = useState('yellow');

  return (
    <>
      <button onClick={() => setRedBoxGroup('yellow')}>
        移动到黄色组
      </button>
      <button onClick={() => setRedBoxGroup('blue')}>
        移动到蓝色组
      </button>
      <Stage width={window.innerWidth} height={window.innerHeight}>
        <Layer>
          <Group x={50} y={50} draggable>
            <Rect
              width={100}
              height={100}
              fill="yellow"
              stroke="black"
              strokeWidth={4}
            />
            {redBoxGroup === 'yellow' && (
              <Rect x={10} y={10} width={30} height={30} fill="red" />
            )}
          </Group>
          <Group x={200} y={50} draggable>
            <Rect
              width={100}
              height={100}
              fill="blue"
              stroke="black"
              strokeWidth={4}
            />
            {redBoxGroup === 'blue' && (
              <Rect x={10} y={10} width={30} height={30} fill="red" />
            )}
          </Group>
        </Layer>
      </Stage>
    </>
  );
};

export default App;

Open Sandbox

Vue

<template>
  <div>
    <button @click="moveToYellow">移动到黄色组</button>
    <button @click="moveToBlue">移动到蓝色组</button>
    <v-stage :config="stageSize">
      <v-layer>
        <v-group :config="yellowGroupConfig">
          <v-rect :config="yellowBoxConfig" />
          <v-rect v-if="redBoxGroup === 'yellow'" :config="redBoxConfig" />
        </v-group>
        <v-group :config="blueGroupConfig">
          <v-rect :config="blueBoxConfig" />
          <v-rect v-if="redBoxGroup === 'blue'" :config="redBoxConfig" />
        </v-group>
      </v-layer>
    </v-stage>
  </div>
</template>

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

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

const redBoxGroup = ref('yellow');

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

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

const yellowBoxConfig = {
  width: 100,
  height: 100,
  fill: 'yellow',
  stroke: 'black',
  strokeWidth: 4
};

const blueBoxConfig = {
  width: 100,
  height: 100,
  fill: 'blue',
  stroke: 'black',
  strokeWidth: 4
};

const redBoxConfig = {
  x: 10,
  y: 10,
  width: 30,
  height: 30,
  fill: 'red'
};

const moveToYellow = () => {
  redBoxGroup.value = 'yellow';
};

const moveToBlue = () => {
  redBoxGroup.value = 'blue';
};
</script>

Open Sandbox