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
      });

这里是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)并且棍棒片开始跟随鼠标指针。而且群体坐标与其子女之间的关系是什么。

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=preview

KonvaJS：小组关于儿童的协调员＃39;坐标

1 个答案: