KonvaJs：子组相对于父组的位置不正确

Question

我试图将信息卡（由Konva.Rect和Konva.Text组成）显示在图像下方，同时将其悬停在图像上。我尝试将信息卡合并到一个单独的子组中，并将其添加到由图像和图像标签组成的父组中。问题是，将鼠标悬停在图像上时，矩形会出现在右侧，而不是正确的x，y位置。如何设置子组的坐标，以使图像在屏幕上移动时信息卡始终显示在其下方？

我尝试将矩形的x属性设置为group.x()（其中group是父组的x坐标）。我也尝试将其设置为image.x()，但矩形仍显示在父图像的右侧。

let group = new Konva.Group({
      x: 100,
      y: 20,
      id: attr.status,
      visible: ng.checkboxValues[status] ? true : false,
    });
    let image = new Konva.Image({
      x: group.x(),
      y: group.y(),
      image: DOMImage,
      width: 40,
      height: 40,
      listening: true,
      visible: true,
    });
    let robotAlias = new Konva.Text({
      x: image.x() - 20,
      y: image.y() + 10,
      text: attr.alias,
      fontSize: 13,
      fontFamily: 'Roboto',
      fill: ng.colorMap[attr.status],
      visible: true,
    });
    let complexText = new Konva.Text({
      x: image.x(),
      y: image.y(),
      text: `${attr.alias}-${attr.status}`,
      fontSize: 15,
      padding: 10,
      fontFamily: 'Roboto',
      align: 'center',
      fill: this.colorMap[attr.status],
      height: 60,
      width: 160,
      visible: true,
    });

    let rect = new Konva.Rect({
      x: image.x(),
      y: image.y(),
      stroke: '#fff',
      strokeWidth: 1,
      fill: '#fff',
      height: 60,
      width: 160,
      shadowColor: 'black',
      shadowBlur: 5,
      shadowOffset: [10, 10],
      shadowOpacity: 0.2,
      visible: true,
    });

    let descriptionCardGroup = new Konva.Group({
      x: image.x(),
      y: image.y(),
      visible: false,
      name: `${attr.id}`,
    })

    group.add(image);
    group.add(robotAlias);
    descriptionCardGroup.add(rect);
    descriptionCardGroup.add(complexText);
    group.add(descriptionCardGroup);

以下是当前行为的屏幕截图：https://ibb.co/QMYjxrw