3

我正在使用具有可拖动和可缩放舞台的 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会解决它。

最好的，

编辑：这个问题已经过时了。

4

2 回答 2

3

过时的答案

好的，我自己修复了它，即使我不使用我想要的绝对位置。

这是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();
    });
于 2013-06-28T00:07:11.533 回答
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/

于 2013-06-27T04:15:50.950 回答