feat: 🚀 移动到不同组中

src/views/groups/layering/index.vue

@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import { useWindowSize } from '@vueuse/core';
+import { onMounted, ref } from 'vue';
+import Konva from 'konva/lib';
+import { Group } from 'konva/lib/Group';
+import { Rect } from 'konva/lib/shapes/Rect';
+
+const { width, height } = useWindowSize();
+const yellowGroup = ref<Group>();
+const blueGroup = ref<Group>();
+const box = ref<Rect>();
+
+const initial = () => {
+	const stage = new Konva.Stage({ container: 'container', width: width.value, height: height.value });
+	const layer = new Konva.Layer();
+	stage.add(layer);
+
+	yellowGroup.value = new Konva.Group({
+		x: 100,
+		y: 100,
+		draggable: true,
+	});
+
+	blueGroup.value = new Konva.Group({
+		x: 300,
+		y: 80,
+		draggable: true,
+	});
+
+	box.value = new Konva.Rect({
+		x: 10,
+		y: 10,
+		width: 100,
+		height: 50,
+		fill: 'red',
+		stroke: 'black',
+	});
+
+	const yellowCircle = new Konva.Circle({
+		x: 0,
+		y: 0,
+		radius: 50,
+		fill: 'yellow',
+		stroke: 'black',
+	});
+
+	const blueCircle = new Konva.Circle({
+		x: 0,
+		y: 0,
+		radius: 50,
+		fill: 'blue',
+		stroke: 'black',
+	});
+
+	yellowGroup.value.add(yellowCircle);
+	yellowGroup.value.add(box.value);
+	blueGroup.value.add(blueCircle);
+	layer.add(yellowGroup.value);
+	layer.add(blueGroup.value);
+	stage.add(layer);
+};
+
+/**
+ * * 移动到蓝色组
+ */
+const toBlue = () => {
+	box.value?.moveTo(blueGroup.value);
+};
+
+/**
+ * * 移动到黄色
+ */
+const toYellow = () => {
+	box.value?.moveTo(yellowGroup.value);
+};
+
+onMounted(() => {
+	initial();
+});
+</script>
+
+<template>
+	<div class="container-fluid">
+		<button id="toBlue" class="btn btn-primary" @click="toBlue">Move red box to blue group</button>
+		<button id="toYellow" class="btn btn-warning" @click="toYellow">Move red box to yellow group</button>
+		<div id="container"></div>
+	</div>
+</template>
+
+<style scoped lang="scss"></style>