求助：Konva Transformer实例化时基于父组坐标定位的问题

当然可以在实例化Konva Transformer时手动设置x、y坐标，但你遇到的核心问题其实是坐标系不匹配导致的错位——你的形状坐标是相对于父组的，而默认情况下，Transformer如果直接绑定形状且添加到舞台，它会错误地把形状的本地坐标当成舞台坐标系下的位置来使用。

下面给你两种最实用的解决思路：

方案一：将Transformer添加到形状的父组中（推荐） #

这是最省心的做法，让Transformer和形状处于同一个坐标系下，不需要手动计算坐标，它会自动正确定位。

示例代码：

// 创建父组和子形状
const parentGroup = new Konva.Group({ x: 80, y: 80 });
const targetShape = new Konva.Circle({
  x: 30,
  y: 30,
  radius: 40,
  fill: '#42b983'
});
parentGroup.add(targetShape);
stage.add(parentGroup);

// 创建Transformer并添加到父组，而非舞台
const transformer = new Konva.Transformer();
parentGroup.add(transformer);
transformer.nodes([targetShape]);

这样Transformer会继承父组的坐标系，自动匹配形状的位置，后续移动父组时，Transformer也会跟着同步移动，完全不需要额外处理。

方案二：手动计算形状的全局坐标并设置Transformer位置 #

如果你因为某些原因必须把Transformer添加到舞台，那需要先获取形状相对于舞台的真实坐标，再把这个坐标赋值给Transformer的x/y：

示例代码：

// 获取形状的全局（舞台坐标系）坐标
const shapeGlobalPosition = targetShape.getAbsolutePosition();

// 实例化Transformer时传入全局坐标
const transformer = new Konva.Transformer({
  x: shapeGlobalPosition.x,
  y: shapeGlobalPosition.y
});
stage.add(transformer);
transformer.nodes([targetShape]);

这里用到的getAbsolutePosition()方法会返回元素相对于舞台左上角的精确坐标，用它来初始化Transformer的位置就能完美对齐。

注意：如果后续父组有移动、缩放等变换，你需要监听父组的transform事件，实时更新Transformer的位置，不然会再次出现错位——这也是为什么更推荐第一种方案的原因。

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