feat: 🚀 groups缩放完成

src/views/groups/change-container/index.vue

@@ -1,19 +1,59 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 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';
+import { Stage } from 'konva/lib/Stage';
 
 const { width, height } = useWindowSize();
 const yellowGroup = ref<Group>();
 const blueGroup = ref<Group>();
 const box = ref<Rect>();
+const SCALE_BY = 1.1;
+const stage = ref<Stage>();
+
+/**
+ * * 缩放画布
+ */
+const zoomed = () => {
+	stage.value?.on('wheel', ev => {
+		if (!stage.value) {
+			return;
+		}
+
+		// 之前缩放比例
+		const oldScaleX = stage.value?.scaleX();
+		const oldScaleY = stage.value?.scaleY();
+
+		// 当前鼠标位置
+		const pointer = stage.value?.getPointerPosition();
+		const mousePointTo = {
+			x: (pointer!.x - stage.value?.x()) / oldScaleX,
+			y: (pointer!.y - stage.value?.y()) / oldScaleY,
+		};
+
+		// 判断鼠标向上滚动还是向下滚动
+		const direction = ev.evt.deltaY > 0 ? -1 : 1;
+
+		// 新的缩放比例
+		const newScaleX = direction > 0 ? oldScaleX * SCALE_BY : oldScaleX / SCALE_BY;
+		const newScaleY = direction > 0 ? oldScaleY * SCALE_BY : oldScaleY / SCALE_BY;
+		stage.value?.scale({ x: newScaleX, y: newScaleY });
+
+		// 设置鼠标移动，保持指针在画布上不变
+		const newPosition = {
+			x: pointer!.x - mousePointTo.x * newScaleX,
+			y: pointer!.y - mousePointTo.y * newScaleY,
+		};
+		stage.value!.position(newPosition);
+	});
+};
 
 const initial = () => {
-	const stage = new Konva.Stage({ container: 'container', width: width.value, height: height.value });
+	stage.value = new Konva.Stage({ container: 'container', width: width.value, height: height.value });
 	const layer = new Konva.Layer();
-	stage.add(layer);
+	stage.value.add(layer);
 
 	yellowGroup.value = new Konva.Group({
 		x: 100,
@@ -52,12 +92,13 @@ const initial = () => {
 		stroke: 'black',
 	});
 
+	zoomed();
 	yellowGroup.value.add(yellowCircle);
 	yellowGroup.value.add(box.value);
 	blueGroup.value.add(blueCircle);
 	layer.add(yellowGroup.value);
 	layer.add(blueGroup.value);
-	stage.add(layer);
+	stage.value.add(layer);
 };
 
 /**
@@ -87,4 +128,4 @@ onMounted(() => {
 	</div>
 </template>
 
-<style scoped lang="scss"></style>
+<style lang="scss" scoped></style>

src/views/groups/groups/index.vue

@@ -1,14 +1,52 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import { useWindowSize } from '@vueuse/core';
-import { onMounted } from 'vue';
+import { onMounted, ref } from 'vue';
 import Konva from 'konva/lib';
+import { Stage } from 'konva/lib/Stage';
 
 const { width, height } = useWindowSize();
+const stage = ref<Stage>();
+const SCALE_BY = 1.1;
 
+/**
+ * * 缩放画布
+ */
+const zoomed = () => {
+	stage.value?.on('wheel', ev => {
+		if (!stage.value) {
+			return;
+		}
+
+		// 之前缩放X和Y轴缩放比例
+		const scaleX = stage.value?.scaleX();
+		const scaleY = stage.value?.scaleY();
+
+		// 当前鼠标移动位置
+		const pointer = stage.value?.getPointerPosition();
+		const mousePointTo = {
+			x: (pointer!.x - stage.value?.x()) / scaleX,
+			y: (pointer!.y - stage.value?.y()) / scaleY,
+		};
+
+		// 判断鼠标滚轮向上移动还是向下移动
+		const direction = ev.evt.deltaY > 0 ? -1 : 1;
+
+		// 新的缩放
+		const x = direction > 0 ? scaleX * SCALE_BY : scaleX / SCALE_BY;
+		const y = direction > 0 ? scaleY * SCALE_BY : scaleY / SCALE_BY;
+		stage.value?.scale({ x, y });
+
+		const position = {
+			x: pointer!.x - mousePointTo.x * x,
+			y: pointer!.y - mousePointTo.y * y,
+		};
+		stage.value!.position(position);
+	});
+};
 const initial = () => {
-	const stage = new Konva.Stage({ container: 'container', width: width.value, height: height.value });
+	stage.value = new Konva.Stage({ container: 'container', width: width.value, height: height.value, draggable: true });
 	const layer = new Konva.Layer();
-	stage.add(layer);
+	stage.value.add(layer);
 
 	const group = new Konva.Group({ x: 120, y: 40, rotation: 20, draggable: true });
 	const colors = ['red', 'orange', 'yellow'];
@@ -26,6 +64,7 @@ const initial = () => {
 		group.add(rect);
 	}
 
+	zoomed();
 	layer.add(group);
 };
 
@@ -38,4 +77,4 @@ onMounted(() => {
 	<div id="container"></div>
 </template>
 
-<style scoped lang="scss"></style>
+<style lang="scss" scoped></style>

src/views/groups/layering/index.vue

@@ -1,16 +1,51 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import { useWindowSize } from '@vueuse/core';
 import { onMounted, ref } from 'vue';
 import Konva from 'konva/lib';
 import { Rect } from 'konva/lib/shapes/Rect';
+import { Stage } from 'konva/lib/Stage';
 
 const { width, height } = useWindowSize();
 const yellowBox = ref<Rect>();
+const stage = ref<Stage>();
+const SCALE_BY = 1.1;
+
+/**
+ * * 缩放画布
+ */
+const zoomed = () => {
+	stage.value?.on('wheel', ev => {
+		if (!stage.value) return;
+
+		// 之前缩放比例
+		const scaleX = stage.value?.scaleX();
+		const scaleY = stage.value?.scaleY();
+
+		const pointer = stage.value?.getPointerPosition();
+		const mousePointTo = {
+			x: (pointer!.x - stage.value?.x()) / scaleX,
+			y: (pointer!.y - stage.value?.y()) / scaleY,
+		};
+
+		// 判断鼠标滚轮向上还是向下
+		const direction = ev.evt.deltaY > 0 ? -1 : 1;
+
+		const x = direction > 0 ? scaleX * SCALE_BY : scaleX / SCALE_BY;
+		const y = direction > 0 ? scaleY * SCALE_BY : scaleY / SCALE_BY;
+		stage.value?.scale({ x, y });
+
+		const position = {
+			x: pointer!.x - mousePointTo.x * x,
+			y: pointer!.y - mousePointTo.y * y,
+		};
+		stage.value?.position(position);
+	});
+};
 
 const initial = () => {
-	const stage = new Konva.Stage({ container: 'container', width: width.value, height: height.value });
+	stage.value = new Konva.Stage({ container: 'container', width: width.value, height: height.value });
 	const layer = new Konva.Layer();
-	stage.add(layer);
+	stage.value.add(layer);
 
 	const colors = ['red', 'orange', 'yellow', 'green', 'blue', 'purple'];
 
@@ -42,7 +77,8 @@ const initial = () => {
 		})();
 	}
 
-	stage.add(layer);
+	zoomed();
+	stage.value.add(layer);
 };
 
 onMounted(() => {
@@ -63,4 +99,4 @@ onMounted(() => {
 	</div>
 </template>
 
-<style scoped lang="scss"></style>
+<style lang="scss" scoped></style>

src/views/groups/z-index/index.vue

@@ -1,16 +1,49 @@
-<script setup lang="ts">
+<script lang="ts" setup>
 import { useWindowSize } from '@vueuse/core';
 import Konva from 'konva/lib';
 import { onMounted, ref } from 'vue';
 import { Circle } from 'konva/lib/shapes/Circle';
+import { Stage } from 'konva/lib/Stage';
 
 const { width, height } = useWindowSize();
 const circle = ref<Circle>();
+const stage = ref<Stage>();
+const SCALE_BY = 1.1;
+
+const zoomed = () => {
+	stage.value?.on('wheel', ev => {
+		if (!stage.value) {
+			return;
+		}
+
+		// 之前缩放比例
+		const scaleX = stage.value?.scaleX();
+		const scaleY = stage.value?.scaleY();
+
+		const pointer = stage.value?.getPointerPosition();
+		const mousePointTo = {
+			x: (pointer!.x - stage.value?.x()) / scaleX,
+			y: (pointer!.y - stage.value?.y()) / scaleY,
+		};
+
+		const direction = ev.evt.deltaY > 0 ? -1 : 1;
+
+		const x = direction > 0 ? scaleX * SCALE_BY : scaleX / SCALE_BY;
+		const y = direction > 0 ? scaleY * SCALE_BY : scaleY / SCALE_BY;
+		stage.value?.scale({ x, y });
+
+		const position = {
+			x: pointer!.x - mousePointTo.x * x,
+			y: pointer!.y - mousePointTo.y * y,
+		};
+		stage.value?.position(position);
+	});
+};
 
 const initial = () => {
-	const stage = new Konva.Stage({ container: 'container', width: width.value, height: height.value });
+	stage.value = new Konva.Stage({ container: 'container', width: width.value, height: height.value });
 	const layer = new Konva.Layer();
-	stage.add(layer);
+	stage.value.add(layer);
 
 	const group = new Konva.Group();
 	layer.add(group);
@@ -30,6 +63,8 @@ const initial = () => {
 		width: 100,
 		height: 100,
 	});
+
+	zoomed();
 	group.add(blackRect);
 };
 
@@ -52,4 +87,4 @@ onMounted(() => {
 	</div>
 </template>
 
-<style scoped lang="scss"></style>
+<style lang="scss" scoped></style>