求助：Konva点击对象后无法实现缩放居中效果

首先，你的问题核心在于Layer的offset设置和缩放位移的计算逻辑不匹配——Layer已经通过offset把原点移到了画布中心，后续位移计算必须考虑这个偏移的影响，同时要确保对象中心最终对齐到Stage的中心。

修正后的实现代码 #

const handleAreaClick = (e) => {
    e.evt.preventDefault();
    const parkingSpace = e.target;
    const stage = newStageArea;
    const layer = newLayerArea;

    // 获取对象在Layer坐标系下的包围盒
    const parkingSpaceBox = parkingSpace.getClientRect({ relativeTo: layer });
    const objCenterX = parkingSpaceBox.x + parkingSpaceBox.width / 2;
    const objCenterY = parkingSpaceBox.y + parkingSpaceBox.height / 2;

    // 计算缩放比例（保留你的逻辑，确保对象带padding完全显示）
    const padding = 10;
    const focusZoomScale = Math.min(
        stage.width() / (parkingSpaceBox.width + padding * 2),
        stage.height() / (parkingSpaceBox.height + padding * 2)
    );

    // Stage的中心坐标（和Layer的offset设置对应）
    const stageCenterX = stage.width() / 2;
    const stageCenterY = stage.height() / 2;

    // 计算Layer需要的位移：
    // 1. 让缩放后的对象中心对齐Stage中心
    // 2. 抵消Layer的offset在缩放后的影响
    const targetX = stageCenterX - objCenterX * focusZoomScale - layer.offsetX() * focusZoomScale;
    const targetY = stageCenterY - objCenterY * focusZoomScale - layer.offsetY() * focusZoomScale;

    // 应用属性（用to()添加平滑过渡，不需要可改回setAttrs）
    layer.to({
        x: targetX,
        y: targetY,
        scaleX: focusZoomScale,
        scaleY: focusZoomScale,
        duration: 0.3
    });
}

关键逻辑说明 #

1. 对象坐标修正：不需要对Y轴取反，getClientRect返回的是Layer坐标系下的真实坐标，数据源的原点设置已经通过Layer的offset处理，直接用原始值即可。
2. 位移计算核心：
   • stageCenterX - objCenterX * focusZoomScale：保证缩放后的对象中心对齐Stage中心的基础位移。
   • - layer.offsetX() * focusZoomScale：Layer的offset是-(canvasWidth/2)，缩放后这个偏移会被放大，必须抵消这个缩放后的偏移量，否则会导致整体位置偏移。
3. 动画优化：用to()代替setAttrs()可以添加平滑的缩放过渡，提升用户体验，不需要的话直接替换为layer.setAttrs({...})即可。

额外注意点 #

• 建议直接用stage.width()和stage.height()获取Stage实际尺寸，避免外部变量windowWidth/canvasHeight取值不一致的问题。
• Stage开启拖拽后，Konva会自动维护Layer的x/y属性，无需额外处理。

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