JavaDemo/konva-demo
JavaDemo
/
konva-demo
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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

This commit is contained in:
Bunny 2024-07-24 23:49:26 +08:00
parent 4e3b595694
commit d7434d70e7
1 changed files with 7 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/views/event-page/binding-event/index.vue
View File

@ -18,6 +18,8 @@ const zoomed = () => {
// 平台鼠标缩放 // 平台鼠标缩放
stage.value!.on('wheel', e => { stage.value!.on('wheel', e => {
if (!stage.value) return; if (!stage.value) return;
if (!e.evt.ctrlKey) return;
e.evt.preventDefault();
// 当前缩放比例，获取X或者是Y都一样 // 当前缩放比例，获取X或者是Y都一样
const oldScaleX = stage.value!.scaleX(); const oldScaleX = stage.value!.scaleX();
@ -25,6 +27,7 @@ const zoomed = () => {
// 当前鼠标位置 // 当前鼠标位置
const pointer = stage.value!.getPointerPosition(); const pointer = stage.value!.getPointerPosition();
// 鼠标在画布的平移量，除以缩放比例得到，鼠标在未缩放时的坐标
const mousePointTo = { const mousePointTo = {
x: (pointer!.x - stage.value!.x()) / oldScaleX, x: (pointer!.x - stage.value!.x()) / oldScaleX,
y: (pointer!.y - stage.value!.y()) / oldScaleY, y: (pointer!.y - stage.value!.y()) / oldScaleY,
@ -32,14 +35,15 @@ const zoomed = () => {
// 判断是向上滚动鼠标还是向下滚动鼠标，向下滚动为正。向上滚动为负 // 判断是向上滚动鼠标还是向下滚动鼠标，向下滚动为正。向上滚动为负
let direction = e.evt.deltaY > 0 ? -1 : 1; 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; const newScaleX = direction > 0 ? oldScaleX * SCALE_BY : oldScaleX / SCALE_BY;
// 新的缩放大小Y轴 // 新的缩放比例Y轴
const newScaleY = direction > 0 ? oldScaleY * SCALE_BY : oldScaleY / SCALE_BY; const newScaleY = direction > 0 ? oldScaleY * SCALE_BY : oldScaleY / SCALE_BY;
stage.value!.scale({ x: newScaleX, y: newScaleY }); stage.value!.scale({ x: newScaleX, y: newScaleY });
// 计算当前鼠标和移动之前鼠标乘以新的缩放比例大小，保持画布变化后鼠标图形依旧在鼠标相对位置上
const newPos = { const newPos = {
x: pointer!.x - mousePointTo.x * newScaleX, x: pointer!.x - mousePointTo.x * newScaleX,
y: pointer!.y - mousePointTo.y * newScaleY, y: pointer!.y - mousePointTo.y * newScaleY,