From a29fb2bffab57a0b83e406c6cadc93bd4033af34 Mon Sep 17 00:00:00 2001
From: Bunny <1319900154@qq.com>
Date: Thu, 25 Jul 2024 00:01:04 +0800
Subject: [PATCH] =?UTF-8?q?optimize:=20=E2=99=BB=EF=B8=8F=20horizontal-ver?=
 =?UTF-8?q?tical=E6=B7=BB=E5=8A=A0=E9=BC=A0=E6=A0=87=E7=BC=A9=E6=94=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/event-page/binding-event/index.vue  |  1 -
 .../event-page/horizontal-vertical/index.vue  | 50 +++++++++++++++++--
 2 files changed, 45 insertions(+), 6 deletions(-)

diff --git a/src/views/event-page/binding-event/index.vue b/src/views/event-page/binding-event/index.vue
index 68bf198..d9012c8 100644
--- a/src/views/event-page/binding-event/index.vue
+++ b/src/views/event-page/binding-event/index.vue
@@ -35,7 +35,6 @@ const zoomed = () => {
 
 		// 判断是向上滚动鼠标还是向下滚动鼠标，向下滚动为正。向上滚动为负
 		let direction = e.evt.deltaY > 0 ? -1 : 1;
-		// direction = -direction;
 
 		// 新的缩放比例X轴
 		const newScaleX = direction > 0 ? oldScaleX * SCALE_BY : oldScaleX / SCALE_BY;
diff --git a/src/views/event-page/horizontal-vertical/index.vue b/src/views/event-page/horizontal-vertical/index.vue
index ece373c..e74db71 100644
--- a/src/views/event-page/horizontal-vertical/index.vue
+++ b/src/views/event-page/horizontal-vertical/index.vue
@@ -1,12 +1,51 @@
-<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;
+		if (!ev.evt.ctrlKey) return;
+		ev.evt.preventDefault();
+
+		// 未缩放之前，缩放比例X和Y轴
+		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({ draggable: true });
 
 	// 限制横向移动
@@ -39,7 +78,8 @@ const initial = () => {
 	});
 	layer.add(vertically);
 
-	stage.add(layer);
+	stage.value.add(layer);
+	zoomed();
 };
 
 onMounted(() => {
@@ -51,4 +91,4 @@ onMounted(() => {
 	<div id="container"></div>
 </template>
 
-<style scoped lang="scss"></style>
+<style lang="scss" scoped></style>