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,