kineticjs stage.getAbsoluteMousePosition()?

Question

I am playing with kineticjs with a draggable and zoomable stage and I'd like to know if there is a way to get the stage.getAbsoluteMousePosition() as we can have the absolutePosition of a Node.

Here is the jsfiddle showing a use case, note the position of the tooltip when you zoom in/out.

The interesting part is here:

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

I am having trouble to make it work and I believe with the getAbsoluteMousePosition would fix it.

Best,

Edit: This question is outdated.

Answer 1

Outdated Answer

Ok, fixed it myself even thought I don't use the absoluteposition I wanted to.

Here is the jsfiddle, the proper way of doing it was like this:

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

Answer 2

If I understand correctly, if you want to get the absolute position of your mouse pointer to the screen this is how you could do it:

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

This doesn't solve your answer though as the (x,y) coordinate of the mouse should be relative to the canvas, not your screen. I'm not exactly sure why tooltip.setPosition(mousePos.x, mousePos.y); wouldn't work, the zoom must be messing up the mousePos coordinates relatively somehow.

Anyways, if you only need the tooltip to hover above the correct node, and not follow the mouse position, than this should work for you:

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

And if you need, you could offset it by a certain amount for example half the height (radius).

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

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