使用Konva为打包圆可视化添加缩放功能（解决中心缩放重定位问题）

问题修复方案 #

重定位的计算逻辑需要以「点击的圆缩放后对齐舞台中心」为核心推导，正确推导逻辑如下：
组内元素最终在画布上的坐标计算公式为：
元素最终屏幕坐标 = 组偏移坐标 + 元素原始坐标 * 组缩放比例
我们的目标是让点击的圆最终屏幕坐标等于舞台中心坐标，反推即可得到组的正确偏移值。

修正后的核心代码 #

function zoom(circle) {
  // 缩放比例计算保持不变
  let scaleBy = root.data.konva.radius() / circle.radius()
  group.scale({x: scaleBy, y: scaleBy})
  
  // 重定位逻辑修正：用舞台中心减去 目标圆原始坐标*缩放比例
  let newX = width / 2 - circle.x() * scaleBy
  let newY = height / 2 - circle.y() * scaleBy
    
  group.position({x: newX, y: newY})
}

效果说明 #

修改后点击任意圆，该圆会自动居中显示在视口中央，缩放逻辑和原有逻辑保持一致。

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