kineticjs stage.getAbsoluteMousePosition()?

Question

我正在使用可拖动和可缩放的舞台与kineticjs进行交互，并且希望知道是否有一种方法可以获得 stage.getAbsoluteMousePosition()，就像我们可以获得一个节点的 absolutePosition 一样。 这里 是一个展示用例的 jsfiddle，注意当你缩放时工具提示的位置。

有趣的部分在这里：

circle.on('mouseover mousemove',function(){

     var mousePos = stage.getMousePosition();
     tooltip.setPosition(mousePos.x-stage.getAbsolutePosition().x,mousePos.y-stage.getAbsolutePosition().y);
     tooltip.setVisible(true);
     tooltip.moveToTop();
     layer.draw();        
});

我遇到了困难，无法使其正常工作。我相信使用 getAbsoluteMousePosition 可以解决这个问题。

最好的祝福，

编辑：此问题已过时。

- zipp

Answer 1

过时的答案

好的，我已经解决了，即使我不使用我想要的绝对定位。

这里是jsfiddle，正确的方法是这样的:

 circle.on('mouseover mousemove', function () {
         var mousePos = stage.getMousePosition();
         tooltip.setPosition(mousePos.x/ui.scale-stage.getAbsolutePosition().x/ui.scale+stage.getOffset().x,
         mousePos.y/ui.scale-stage.getAbsolutePosition().y/ui.scale+stage.getOffset().y);
         tooltip.setVisible(true);
         tooltip.moveToTop();
         layer.draw();
    });

- zipp

---

根据：https://github.com/ericdrowell/KineticJS/issues/771 “getMousePosition”和“getTouchPosition”已经被移除。您应该使用“getPointerPosition”代替。 - Kiryl

Answer 2

如果我理解正确，如果你想获取鼠标指针相对于屏幕的绝对位置，可以按照以下步骤进行：

circle.on('mouseover mousemove', function (e) {
    var mousePos = stage.getMousePosition();
    var absoluteX = e.screenX;
    var absoluteY = e.screenY;
    tooltip.setPosition(mousePos.x - absoluteX, mousePos.y - absoluteY);
    tooltip.setVisible(true);
    tooltip.moveToTop();
    layer.draw();
});

然而这并没有解决你的问题，因为鼠标的(x,y)坐标应该是相对于画布而不是屏幕的。 我不确切地知道为什么tooltip.setPosition(mousePos.x, mousePos.y);不能工作，缩放必须在某种程度上相对地破坏了mousePos坐标。

无论如何，如果你只需要让工具提示浮动在正确的节点上，而不是跟随鼠标位置，那么这个方法适用于您：

tooltip.setPosition(this.getX(), this.getY());

如果需要的话，你可以进行一定量的偏移，例如半个高度（半径）。

tooltip.setPosition(this.getX(), this.getY()-this.getHeight()/2);

http://jsfiddle.net/projeqht/nDpYr/

- projeqht

---

谢谢您的回答，即使这个解决方案对我提供的示例有效，它也无法适用于任何无法获取getHeight或getX的节点，例如路径/线。请参见此fiddle以获得更清晰的视图。即使您可能可以使用该点计算中心，但需要查找形状类型。那么路径呢？这就是为什么我试图寻找适用于任何节点的“通用”东西的原因。mousePos.x - absoluteX是线条示例中的常量。缩放会影响舞台偏移量，这就是我在寻找绝对位置的原因。 - zipp

你仍然可以使用getX()和getY()来获取线的坐标。只需将该线的第一个点替换为0，然后将该线的第一个坐标赋值给线的x和y值即可。http://jsfiddle.net/projeqht/WPb4C/ 另外，忘记高度吧，它不是必要的。 - projeqht