我在项目中使用KonvaJs。我正在使用Konva.Group将诸如Konva.ImageKonva.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
      });


这是plunkr

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

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)并且棍状棋子开始跟随鼠标指针。还有,组的坐标与它的孩子之间的关系是什么。

最佳答案

由于您的子节点在组内移动,因此您可能会有意外的行为。

创建图像时,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=preview

10-05 20:29