From 4e3b595694b403074d0998010e599e3e01cb9814 Mon Sep 17 00:00:00 2001
From: Bunny <1319900154@qq.com>
Date: Wed, 24 Jul 2024 23:27:29 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=F0=9F=A7=A9=20=E7=94=BB=E5=B8=83?=
 =?UTF-8?q?=E7=BC=A9=E6=94=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .vscode/extensions.json                      |  3 --
 public/verify.json                           |  2 +-
 src/views/event-page/binding-event/index.vue | 54 +++++++++++++++++---
 3 files changed, 48 insertions(+), 11 deletions(-)
 delete mode 100644 .vscode/extensions.json

diff --git a/.vscode/extensions.json b/.vscode/extensions.json
deleted file mode 100644
index a7cea0b..0000000
--- a/.vscode/extensions.json
+++ /dev/null
@@ -1,3 +0,0 @@
-{
-  "recommendations": ["Vue.volar"]
-}
diff --git a/public/verify.json b/public/verify.json
index c5f085b..4069bad 100644
--- a/public/verify.json
+++ b/public/verify.json
@@ -1 +1 @@
-{"version":1721355798048}
\ No newline at end of file
+{"version":1721834336660}
\ No newline at end of file
diff --git a/src/views/event-page/binding-event/index.vue b/src/views/event-page/binding-event/index.vue
index 1a6e343..42d725a 100644
--- a/src/views/event-page/binding-event/index.vue
+++ b/src/views/event-page/binding-event/index.vue
@@ -2,16 +2,55 @@
 	<div id="container"></div>
 </template>
 
-<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', e => {
+		if (!stage.value) return;
+
+		// 当前缩放比例，获取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,
+		};
+
+		// 判断是向上滚动鼠标还是向下滚动鼠标，向下滚动为正。向上滚动为负
+		let direction = e.evt.deltaY > 0 ? -1 : 1;
+		if (e.evt.ctrlKey) direction = -direction;
+
+		// 新增缩放大小X轴
+		const newScaleX = direction > 0 ? oldScaleX * SCALE_BY : oldScaleX / SCALE_BY;
+		// 新的缩放大小Y轴
+		const newScaleY = direction > 0 ? oldScaleY * SCALE_BY : oldScaleY / SCALE_BY;
+		stage.value!.scale({ x: newScaleX, y: newScaleY });
+
+		const newPos = {
+			x: pointer!.x - mousePointTo.x * newScaleX,
+			y: pointer!.y - mousePointTo.y * newScaleY,
+		};
+		stage.value!.position(newPos);
+	});
+};
 
 const initial = () => {
-	const stage = new Konva.Stage({ container: 'container', width: width.value, height: height.value });
-	const layer = new Konva.Layer({ draggable: true });
+	stage.value = new Konva.Stage({ container: 'container', width: width.value, height: height.value });
+	const layer = new Konva.Layer();
 
 	// 创建文本
 	const text = new Konva.Text({
@@ -26,8 +65,8 @@ const initial = () => {
 
 	// 创建元素
 	const circle = new Konva.Circle({
-		x: stage.width() / 2,
-		y: stage.height() / 2,
+		x: stage.value!.width() / 2,
+		y: stage.value!.height() / 2,
 		radius: 70,
 		fill: 'red',
 		stroke: 'black',
@@ -43,7 +82,8 @@ const initial = () => {
 		text.text('鼠标离开');
 	});
 
-	stage.add(layer);
+	zoomed();
+	stage.value!.add(layer);
 };
 
 onMounted(() => {