如何调整Konva.js缩放逻辑使可视区中心对象缩放后保持居中

原代码的偏移计算仅以初始画布中心为固定缩放锚点，未考虑用户平移画布后，当前可视区中心对应的画布内实际坐标，因此平移画布后缩放会出现中心对象偏移的问题。

修正逻辑 #

• 计算当前可视区的中心视口坐标，即Stage宽高的1/2
• 将该视口中心坐标转换为缩放前的画布内部绝对坐标，作为固定缩放锚点
• 根据新的缩放比例，反向计算新的Stage偏移量，保证上述锚点缩放后仍落在视口中心位置

修正后代码 #

// 注意需提前维护好scalePrev变量，存储当前生效的缩放比例
const zoom = (isZoomIn) => {
  const oldScale = scalePrev;
  const scaleToSet = getScale(isZoomIn);

  const stage = konvaStage.current;
  const stageWidth = stage.width();
  const stageHeight = stage.height();

  // 1. 计算可视区中心的视口坐标
  const viewportCenterX = stageWidth / 2;
  const viewportCenterY = stageHeight / 2;

  // 2. 转换为缩放前的画布内部绝对坐标（固定锚点）
  const anchorCanvasX = (viewportCenterX - stage.x()) / oldScale;
  const anchorCanvasY = (viewportCenterY - stage.y()) / oldScale;

  // 3. 计算新的偏移量，保证锚点缩放后仍在视口中心
  const newX = viewportCenterX - anchorCanvasX * scaleToSet;
  const newY = viewportCenterY - anchorCanvasY * scaleToSet;

  stage.setAttrs({
    position: { x: newX, y: newY },
    scale: { x: scaleToSet, y: scaleToSet }
  });

  // 更新全局存储的当前缩放比例
  scalePrev = scaleToSet;
}

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