Konva实现围绕指针缩放舞台内图层图像问题求助

• 核心问题原因：官方示例默认操作对象是整个舞台的缩放与位移，当缩放目标为图层内的独立图像时，直接复用舞台坐标计算逻辑会导致坐标偏移、缩放锚点与指针位置不匹配的问题，核心差异在于需要将指针的全局舞台坐标转换为目标图像的本地坐标系后再做缩放计算。
• 实现步骤：
  1. 绑定舞台滚轮事件，阻止默认滚动行为

  stage.on('wheel', (e) => {
    e.evt.preventDefault();
    // 后续逻辑都写在该事件回调内
  });
  

  2. 获取指针的全局舞台坐标，以及指针对应到目标图像的本地坐标（Konva 内置方法直接调用即可，无需手动计算偏移）

  const pointerGlobalPos = stage.getPointerPosition();
  const pointerImageLocalPos = targetImage.getRelativePointerPosition();
  

  3. 计算新的缩放比例，可自行配置缩放系数与缩放边界限制

  const SCALE_STEP = 1.1; // 单次滚轮滚动的缩放幅度，数值越大缩放越快
  const MAX_SCALE = 5; // 最大缩放倍数
  const MIN_SCALE = 0.5; // 最小缩放倍数
  const oldScale = targetImage.scaleX();
  const newScale = e.evt.deltaY > 0 
    ? Math.max(MIN_SCALE, oldScale / SCALE_STEP) 
    : Math.min(MAX_SCALE, oldScale * SCALE_STEP);
  

  4. 基于本地锚点计算图像新的位置，保证缩放前后指针所在的图像像素点始终与指针位置重合

  targetImage.scale({ x: newScale, y: newScale });
  const newImagePos = {
    x: pointerGlobalPos.x - pointerImageLocalPos.x * newScale,
    y: pointerGlobalPos.y - pointerImageLocalPos.y * newScale
  };
  targetImage.position(newImagePos);
  

  5. 刷新图层渲染即可

  targetLayer.batchDraw();
  

注意事项：如果你的图像还有拖动交互，缩放后如果需要做边界限制，需要用targetImage.width() * newScale计算缩放后的实际渲染宽度，再做边界判断，否则会出现边界计算错位的问题。

内容的提问来源于stack exchange，提问作者Olle