• Soulock
• 2026年06月15日
• • 技术

Konva.js 滚轮缩放与平移：以鼠标为中心缩放 Stage 的正确实现

scale() vs width()/height() 缩放单个图片节点有两种方式： // scale()：保持节点尺寸不变，视觉上缩放 imageNode.scale({ x: 2, y: 2 });// width()/height()：真正修改节点尺寸 imageNode.width(600); imageNode.height(400);两者的区别在于 scale() 不改变节点的逻辑尺寸（width()/height() 返回值不变），而后者实际修改了尺寸。大多数场景用 scale() 更灵活。 标注工具：缩放整个 Stage 如果 Stage 上同时有图片和标注框（Rect/Line），不要缩放单个图片节点，应缩放整个 Stage： stage.scale({ x: newScale, y: newScale }); stage.position(newPos); stage.batchDraw();这样图片、标注框、文字所有节点都会同步缩放，坐标关系保持一致。CVAT、LabelImg 等标注工具都使用这种方式。 滚轮缩放（以鼠标位置为中心） const SCALE_BY = 1.05;stage.on('wheel', (e) => { e.evt.preventDefault(); const oldScale = stage.scaleX(); const pointer = stage.getPointerPosition(); // 鼠标在画布坐标系中的位置（排除当前 scale 和偏移） const mousePointTo = { x: (pointer.x - stage.x()) / oldScale, y: (pointer.y - stage.y()) / oldScale, }; const newScale = e.evt.deltaY > 0 ? oldScale / SCALE_BY // 向下：缩小 : oldScale * SCALE_BY; // 向上：放大 // 限制缩放范围 const clampedScale = Math.max(0.1, Math.min(newScale, 20)); stage.scale({ x: clampedScale, y: clampedScale }); // 调整偏移，使鼠标下方的点保持不动 stage.position({ x: pointer.x - mousePointTo.x * clampedScale, y: pointer.y - mousePointTo.y * clampedScale, }); stage.batchDraw(); });核心思路：缩放前记录鼠标在画布坐标系（未缩放坐标）的位置，缩放后重新计算 Stage 偏移使该点回到鼠标位置，从而实现"以鼠标为中心"的缩放效果。 拖拽平移 stage.draggable(true);启用后可以直接拖动整个 Stage。如果需要区分拖拽图片和拖拽画布，禁用 stage.draggable() 改为手动处理： let isDragging = false; let lastPos = null;stage.on('mousedown', () => { isDragging = true; lastPos = stage.getPointerPosition(); });stage.on('mousemove', () => { if (!isDragging) return; const pos = stage.getPointerPosition(); stage.position({ x: stage.x() + pos.x - lastPos.x, y: stage.y() + pos.y - lastPos.y, }); lastPos = pos; stage.batchDraw(); });stage.on('mouseup', () => { isDragging = false; });坐标系转换：获取原图坐标 点击事件的 stage.getPointerPosition() 返回的是屏幕坐标，需要转换为原图坐标： stage.on('click', () => { const pointer = stage.getPointerPosition(); const scale = stage.scaleX(); const imageX = (pointer.x - stage.x()) / scale; const imageY = (pointer.y - stage.y()) / scale; console.log('原图坐标:', imageX, imageY); });