javascript - 如何获得点击形状的位置（KineticJS）

Question

我在这个层中有一个可拖动的层和一个大的透明背景。我想在用户点击的位置添加一个文本。当我没有拖动图层时，一切都很好，但是当我拖动它时，文本将添加到我不想要的地方。因为 event.x 和 event.y 不是形状点击区域的 x 和 y。坐标必须转换。但我不知道如何获得转换向量。

    plot = {};
    plot.stage = new Kinetic.Stage({width: 500, height:500,
      container: 'abc',
      'draggable': true});
    plot.layer = new Kinetic.Layer();
    plot.stage.add(plot.layer);
    plot.background = new Kinetic.Rect({
          x: -1000,
          y: -1000,
          width: 2000,
          height: 2000,
          fill: "#000000",
          opacity: 0.05,
          type: 'blank'
    });
    plot.layer.add(plot.background);

    plot.background.on('click', function(e) {
       e.x;
       e.y;
       // e.x and e.y are not true after dragging stage
    });

Answer 1

使用 KineticJS 时，您希望避免使用 event.x 和 event.y，因为 KineticJS 已经有获取位置的方法。

   var position = stage.getUserPosition();  // this returns an object like {x: 100, y: 140}

此外，检查您将文本添加到哪个图层的位置。另外，请显示一些代码。

Answer 2

您需要绝对设置元素的位置。用这个：

plot.setAbsolutePosition(stage.getUserPosition());