Konva中经Transformer变换后元素绕中心旋转偏移的问题求助

问题场景 #

画布内有一个Konva元素，期望点击按钮时始终绕自身中心旋转90度。初始状态下手动将元素原点设为中心后旋转正常，但经Transformer进行旋转或缩放操作后，第一次点击按钮旋转会出现位置偏移，后续点击才恢复正常绕中心旋转。

问题原因 #

原代码仅在第一次旋转时设置元素偏移，未考虑Transformer操作后元素的变换状态（旋转、缩放）已改变：Transformer会自动调整元素的offset、x、y等属性以实现交互变换，此时再用初始的width/height计算中心位置，会与元素当前的视觉中心不匹配，导致旋转偏移。

解决方案 #

每次旋转前，基于元素当前的视觉边界框（已包含所有变换影响）重新计算中心位置，并同步更新元素的偏移和位置，确保旋转中心始终是元素的视觉中心。

修改后的完整代码 #

<button @click="rotate">rotate</button>

<script>
let stage = new Konva.Stage({
    container: container,
    width: 800,
    height: 800,
});

let layer = new Konva.Layer();
stage.add(layer);

let rect = new Konva.Rect({
    x:50,
    y:50,
    width: 200,
    height: 150
});
layer.add(rect);

let transformer = new Konva.Transformer({
    rotationSnaps: [0, 90, 180, 270],
    nodes:[rect]
});
layer.add(transformer);

function rotate(){
    // 获取元素当前的视觉边界框（已考虑旋转、缩放等所有变换）
    const rectBox = rect.getClientRect();
    // 计算视觉中心坐标
    const centerX = rectBox.x + rectBox.width / 2;
    const centerY = rectBox.y + rectBox.height / 2;

    // 设置元素偏移为自身宽高的一半（确保旋转中心为元素自身中心）
    rect.setAttrs({
        offsetX: rect.width() / 2,
        offsetY: rect.height() / 2,
        // 将元素位置修正到视觉中心
        x: centerX,
        y: centerY
    });

    rect.rotate(90);
    // 更新Transformer，使其适配元素的新状态
    transformer.nodes([rect]);
}
</script>

关键说明 #

• getClientRect()：获取元素在舞台坐标系下的边界框，该结果自动包含了元素的旋转、缩放等变换影响，能准确反映元素的视觉位置和大小。
• 每次旋转前同步更新offset和x/y：确保无论元素之前经历过何种Transformer操作，旋转时的中心始终是当前视觉中心。
• 更新Transformer：避免元素变换后，Transformer的控件位置与元素不匹配。

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