From d7434d70e7aa370a4439bc0d6235b251ba71f2df Mon Sep 17 00:00:00 2001
From: Bunny <1319900154@qq.com>
Date: Wed, 24 Jul 2024 23:49:26 +0800
Subject: [PATCH] =?UTF-8?q?optimize:=20=E2=99=BB=EF=B8=8F=20=E6=96=B0?=
 =?UTF-8?q?=E5=A2=9E=E7=94=BB=E5=B8=83=E7=BC=A9=E6=94=BE=E6=B3=A8=E9=87=8A?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/event-page/binding-event/index.vue | 10 +++++++---
 1 file changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/views/event-page/binding-event/index.vue b/src/views/event-page/binding-event/index.vue
index 42d725a..68bf198 100644
--- a/src/views/event-page/binding-event/index.vue
+++ b/src/views/event-page/binding-event/index.vue
@@ -18,6 +18,8 @@ const zoomed = () => {
 	// 平台鼠标缩放
 	stage.value!.on('wheel', e => {
 		if (!stage.value) return;
+		if (!e.evt.ctrlKey) return;
+		e.evt.preventDefault();
 
 		// 当前缩放比例，获取X或者是Y都一样
 		const oldScaleX = stage.value!.scaleX();
@@ -25,6 +27,7 @@ const zoomed = () => {
 
 		// 当前鼠标位置
 		const pointer = stage.value!.getPointerPosition();
+		// 鼠标在画布的平移量，除以缩放比例得到，鼠标在未缩放时的坐标
 		const mousePointTo = {
 			x: (pointer!.x - stage.value!.x()) / oldScaleX,
 			y: (pointer!.y - stage.value!.y()) / oldScaleY,
@@ -32,14 +35,15 @@ const zoomed = () => {
 
 		// 判断是向上滚动鼠标还是向下滚动鼠标，向下滚动为正。向上滚动为负
 		let direction = e.evt.deltaY > 0 ? -1 : 1;
-		if (e.evt.ctrlKey) direction = -direction;
+		// direction = -direction;
 
-		// 新增缩放大小X轴
+		// 新的缩放比例X轴
 		const newScaleX = direction > 0 ? oldScaleX * SCALE_BY : oldScaleX / SCALE_BY;
-		// 新的缩放大小Y轴
+		// 新的缩放比例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,