Konva 9.3.8：图片X轴镜像后Transformer旋转锚点异常求助

当通过设置scaleX: -1实现图片X轴镜像后，绑定Transformer出现旋转锚点跑到图片底部的情况，这不是bug，是Konva坐标变换逻辑导致的——默认旋转锚点基于元素的原始坐标系，镜像后元素局部坐标系翻转，Transformer的锚点计算受此影响。

以下是两种可行的解决办法：

方法一：手动调整Transformer旋转锚点 #

创建Transformer后，手动将其旋转锚点设置为元素的顶部中心：

const transformer = new Konva.Transformer({
    nodes: [image],
    flipEnabled: false,
    rotateEnabled: true,
    enabledAnchors: ["top-left", "top-right", "bottom-left", "bottom-right", "top-center", "middle-left", "middle-right", "bottom-center"],
});
// 把旋转锚点定位到图片顶部中心位置
transformer.rotationPoint({
    x: image.width() / 2,
    y: 0
});

注意：如果后续图片尺寸发生变化，需要同步更新rotationPoint的坐标值。

方法二：使用Konva官方flip方法替代scaleX #

Konva提供的flipX(true)是专门的镜像API，会自动协调坐标系适配，Transformer的锚点逻辑会正常工作，无需额外调整：

// 替换scaleX: -1为flipX方法实现镜像
image.flipX(true);

const transformer = new Konva.Transformer({
    nodes: [image],
    flipEnabled: false,
    rotateEnabled: true,
    enabledAnchors: ["top-left", "top-right", "bottom-left", "bottom-right", "top-center", "middle-left", "middle-right", "bottom-center"],
});

这个方法更推荐，因为官方封装的flip操作会自动处理相关组件的行为一致性，避免底层变换带来的适配问题。

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