page: 📄 设置元素的zIndex相关API

README.md

@@ -1,6 +1,5 @@
 ```sh
 https://konvajs.org/docs/groups_and_layers/Layering.html
-https://konvajs.org/docs/groups_and_layers/zIndex.html
 
 https://konvajs.org/docs/tweens/Linear_Easing.html
 https://konvajs.org/docs/tweens/Common_Easings.html

src/views/groups/change-container/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>

src/views/groups/layering/index.vue

@@ -2,78 +2,49 @@
 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 yellowBox = ref<Rect>();
-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({
+	const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'purple'];
-		x: 100,
-		y: 100,
-		draggable: true,
-	});
 
-	blueGroup.value = new Konva.Group({
+	for (let n = 0; n < 6; n++) {
-		x: 300,
+		(function () {
-		y: 80,
+			const i = n;
-		draggable: true,
+			const box = new Konva.Rect({
-	});
+				x: i * 30 + 210,
+				y: i * 18 + 40,
+				width: 100,
+				height: 50,
+				fill: colors[i],
+				stroke: 'black',
+				strokeWidth: 4,
+				draggable: true,
+				name: colors[i],
+			});
 
-	box.value = new Konva.Rect({
+			box.on('mouseover', function () {
-		x: 10,
+				document.body.style.cursor = 'pointer';
-		y: 10,
+			});
-		width: 100,
+			box.on('mouseout', function () {
-		height: 50,
+				document.body.style.cursor = 'default';
-		fill: 'red',
+			});
-		stroke: 'black',
+			if (colors[i] === 'yellow') {
-	});
+				yellowBox.value = box;
+			}
+			layer.add(box);
+		})();
+	}
 
-	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();
 });
@@ -81,8 +52,13 @@ onMounted(() => {
 
 <template>
 	<div class="container-fluid">
-		<button id="toBlue" class="btn btn-primary" @click="toBlue">Move red box to blue group</button>
+		<div id="buttons">
-		<button id="toYellow" class="btn btn-warning" @click="toYellow">Move red box to yellow group</button>
+			<button id="toTop" class="btn btn-warning" @click="yellowBox?.moveToTop()">Move yellow box to top</button>
+			<button id="toBottom" class="btn btn-outline-info" @click="yellowBox?.moveToBottom()">Move yellow box to bottom</button>
+			<button id="up" class="btn btn-outline-warning" @click="yellowBox?.moveUp()">Move yellow box up</button>
+			<button id="down " class="btn btn-info" @click="yellowBox?.moveDown()">Move yellow box down</button>
+			<button id="zIndex" class="btn btn-primary" @click="yellowBox?.setZIndex(3)">Set yellow box zIndex to 3</button>
+		</div>
 		<div id="container"></div>
 	</div>
 </template>