KonvaJS：小组坐标相对于儿童坐标

Question

我在我的项目中使用KonvaJs。我用Konva.Group把Konva.Image、Konva.Rect这些项目组合在一起。但我在把他们置于mousemove事件的特定位置时，也面临着一些挑战。我有Konva.Group像这样:

 var group = new Konva.Group({
      x: 0,
      y: 0
    });

和一个像这样的图像和矩形

var border = new Konva.Rect({
      x: 115,
      y: 35,
      width: 116,
      height: 128,
      fill: 'grey'
    });
yoda = new Konva.Image({
        x: 120,
        y: 40,
        image: imageObj,
        width: 106,
        height: 118
      });

这是活塞。

现在我要做的是将组移动到鼠标指针所在的位置。为此，我要这样做:

stage.on('mousemove', function(e) {
      var point=stage.getPointerPosition();
      //Don't know why this is not puttig the group childern poperly
      //group.position(stage.getPointerPosition());
      yoda.position(point);
      border.position({
        x: point.x-5,
        y: point.y-5
      })
      layer.batchDraw();
    });

因为这里我只有两个元素，所以我可以一个一个地移动它们，但是如果我的组中的元素或子元素的数量会增加。我不能一个一个地移动它们。我试图移动整个组，但它不是跟随指针的位置。我想了解我如何才能把这件作品放在这样一种方式，我只是做group.position(position)和棍棒的作品开始跟随鼠标指针。以及Group的坐标和它的子元素之间的关系。

Answer 1

您可能会出现意外行为，因为您的子节点在组内移动。

创建图像时，x = 120 y = 140。当你设置组位置为(例如)x= 100 y = 100，图像将被放置在x= 210 (120 + 100) y = 240(140 + 100)。

只是减少子元素的位置:

      yoda = new Konva.Image({
        x: 5,
        y: 5,
        image: imageObj,
        width: 106,
        height: 118
      });
      group.add(border);
      group.add(yoda);

http://plnkr.co/edit/TkTGAw0eGHF5flbVYLuQ?p =预览