3

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.

Community
  • 1
  • 1
zipp
  • 1,116
  • 13
  • 27

2 Answers2

3

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();
    });
zipp
  • 1,116
  • 13
  • 27
  • 1
    According: https://github.com/ericdrowell/KineticJS/issues/771 _"getMousePosition and getTouchPosition are gone. You should use getPointerPosition instead."_ – Kiryl Mar 12 '15 at 11:06
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/

projeqht
  • 3,160
  • 3
  • 18
  • 32
  • Thank you for your answer and even if it is true the solution work for the sample example I linked it would not work for any node where you can't get the getHeight or getX such as path/line.See this [fiddle](http://jsfiddle.net/nDpYr/1/) for clearer view.Even if you could possibly calculate the center with the point it would require to look for shape type. And then what about path.That is why I was trying to look for something "generic" for any node. mousePos.x - absoluteX is a constant with the line example.The zoom mess with the stage offset that is why I was looking for a absolutePosition. – zipp Jun 27 '13 at 17:40
  • You can still use getX() and getY() for a line. Just replace the first point of the line with 0's, and then give that first coordinate of the line to the line's x and y value. http://jsfiddle.net/projeqht/WPb4C/ Also, forget about the height, it is not necessary. – projeqht Jun 27 '13 at 20:29