optimize: ♻️ 新增画布缩放注释

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,