Konva JS拖拽Group后如何获取组内图形准确x、y坐标

坐标偏差来自两个错误用法：

• 直接读取group.attrs.x/y不可靠，Konva内部渲染过程中会更新节点状态，attrs存储的不一定是最终生效的属性值，必须用官方提供的API读取位置
• Group作为容器，组内子元素坐标是相对于Group自身坐标系的相对值，Group拖拽产生的位移是父层坐标系下的偏移，手动计算固定偏移适配不了不同尺寸、不同初始位置、带缩放/旋转的场景，Konva本身已经提供了现成的坐标转换能力，不需要手动计算。
• 原代码用mouseout判断拖拽释放逻辑错误，鼠标移出组范围不代表拖拽结束，会导致事件触发时机不对。

Konva所有节点都内置getAbsolutePosition()方法，可直接返回节点相对于Stage左上角的绝对坐标，无论节点嵌套多少层、父容器有没有拖拽/缩放/旋转，返回值都是精准的，不需要手动计算偏移。
根据持久化需求可选择两种方案：

方案1：仅保存Group位置（推荐，存储成本最低） #

拖拽结束时直接读取Group自身位置保存即可，加载时给Group设回保存的x/y值，组内所有子元素位置会自动还原，不需要单独存每个子元素的坐标。
核心代码片段：

// 用Konva官方提供的dragend事件，仅在拖拽释放时触发
group.on('dragend', function () {
  document.body.style.cursor = 'default';
  // 不要读attrs，用position()方法读取Group当前位置
  const groupPos = group.position();
  console.log('待持久化的Group坐标：', groupPos);

  // 验证：读取组内圆点的绝对位置绘制标记点，完全重合无偏差
  const circleInGroup = group.findOne('Circle');
  const circleAbsPos = circleInGroup.getAbsolutePosition();
  shapesLayer.add(createCircle(circleAbsPos.x, circleAbsPos.y));
  shapesLayer.batchDraw();
});

方案2：需要单独获取每个子元素绝对坐标 #

如果业务需要单独拿到rect、text、circle每个元素的绝对位置，直接遍历组内子元素调用getAbsolutePosition()即可：

group.on('dragend', function () {
  group.getChildren().forEach((child, index) => {
    // 子元素相对于Stage的绝对坐标
    const absPos = child.getAbsolutePosition();
    console.log(`子元素${index} 绝对坐标 x:${absPos.x}, y:${absPos.y}`);
    // 子元素相对于Group的相对坐标
    const relativePos = child.position();
    console.log(`子元素${index} 相对Group坐标 x:${relativePos.x}, y:${relativePos.y}`);
  });
});

<!DOCTYPE html>
<html>
  <head>
    <script src="https://unpkg.com/konva@8.3.5/konva.min.js"></script>
    <meta charset="utf-8" />
    <title>Konva Drag and Drop a Group Demo</title>
    <style>
      body {
        margin: 0;
        padding: 0;
        overflow: hidden;
        background-color: #f0f0f0;
      }
    </style>
  </head>
  <body>
    <div id="container"></div>
    <script>
      var width = window.innerWidth;
      var height = window.innerHeight;

      var stage = new Konva.Stage({
        container: 'container',
        width: width,
        height: height,
      });

      var shapesLayer = new Konva.Layer();

      var colors = ['red', 'orange', 'yellow', 'green', 'blue', 'purple'];
      var groups = [];
      for (var i = 0; i < 2; i++) {
        var group = new Konva.Group({
          draggable: true,
        });
        var box = new Konva.Rect({
          x: i * 200 + 20,
          y: i * 180 + 20,
          width: 100,
          height: 50,
          name: colors[i],
          fill: colors[i],
          stroke: 'black',
          strokeWidth: 1,
        });
        var txt = new Konva.Text({
          x:i*200 + 20,
          y: i*180 + 20,
          text: 'Java',
          fontSize: 26
        });
        var circle = createCircle(i * 200 + 20, i * 180 + 20);
     
        group.add(box);
        group.add(txt);
        group.add(circle);
        groups.push(group);
      }

      for (let i = 0; i < groups.length; i++) {
        let group = groups[i];
        group.on('mouseover', function () {
          document.body.style.cursor = 'pointer';
        });
        group.on('dragend', function () {
          document.body.style.cursor = 'default';
          const circleInGroup = group.findOne('Circle');
          const absPos = circleInGroup.getAbsolutePosition();
          shapesLayer.add(createCircle(absPos.x, absPos.y));
          shapesLayer.batchDraw();
          console.log('保存Group坐标：', group.position());
        });
        shapesLayer.add(group);
      }

      function createCircle(posx,posy){
        return new Konva.Circle({
          x: posx,
          y: posy,
          radius: 3,
          fill: 'red',
          stroke: 'red',
          strokeWidth: 0,
        });
      }
      stage.add(shapesLayer);
    </script>
  </body>
</html>

• 日常开发不要直接读写Konva节点的attrs对象，所有属性操作优先用官方提供的get/set方法：读位置用node.position()、node.x()、node.y()、node.getAbsolutePosition()，设位置用node.position(newPos)、node.x(newX)、node.y(newY)，避免出现属性值和渲染状态不一致的问题。
• 拖拽相关逻辑优先用Konva内置的dragstart、dragmove、dragend生命周期事件，不要用鼠标事件模拟拖拽判断，避免边界场景出错。

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