How to get the position of a click event relative

Question

I'm developing a hex-grid strategy game in HTML5, and since it becomes complicated to add more buttons to UI, I'm rewriting my code using KineticJS to draw the canvas.

In my game, there is a minimap, and a rectangle in it showing the position of player's camera. When the player clicks on the minimap, the center of his camera will be set to the position he clicked. My original code does not use any external library, and it looks like this:

this.on('click', function(event){
    var canvas = document.getElementById('gameCanvas');
    var x = event.pageX - canvas.offsetLeft;
    var y = event.pageY - canvas.offsetTop;
    camera.setPos( // calculate new position based on x and y....);
    }
})

So basically what I want is the POSITION OF CLICK EVENT RELATIVE TO THE CANVAS. Since now KineticJS takes control of the canvas, and it does not let me set canvas id, I can't use getElementById to choose my canvas anymore. Is there another way to do it?

There might be some way I did not figure out that can set the canvas id, but I'm expecting a more elegent solution, idealy through KineticJS API.

Thanks.

Answer 1

Good question, and I think what you are looking for is getAbsolutePosition(). The following is useful things to know from my experience.

getPosition()

node x/y position relative to parent
if your shape is in layer, x/y position relative to layer
if your shape is in group, x/y position relative to group

getParent()

To know what parent node is

getX()

x position relative to parent

getY()

y position relative to parent

getAbsolutePosition()

absolute position relative to the top left corner of the stage container div

Few more useful things,

getScale()

if your stage is zoomed in or out, better to know this.

Everything is here in document, http://kineticjs.com/docs/symbols/Kinetic.Node.php

Answer 2

This is an old question, but as I can see, the best answer does not take into account the rotation.

So here it is my solution based on Kinetic v5.1.0. who take into account all transformation.

var myStage = new Kinetic.Stage();    
var myShape = new Kinetic.Shape(); // rect / circle or whatever

myShape.on('click', function(){
    var mousePos = myStage.getPointerPosition();
    var p = { x: mousePos.x, y: mousePos.y }; // p is a clone of mousePos
    var r =  myShape.getAbsoluteTransform().copy().invert().point(mousePos);

    // r is local coordinate inside the shape
    // mousePos is global coordinates
})

Answer 3

To get the mouse position on the stage (canvas), you can use:

    var mouseXY = stage.getPointerPosition();
    var canvasX = mouseXY.x;
    var canvasX = mouseXY.y;

You can get the mouse position inside a shape click the same way:

  myShape.on('click', function() {
    var mouseXY = stage.getPointerPosition();
    var canvasX = mouseXY.x;
    var canvasY = mouseXY.y;
  });

Answer 4

You should use event.layerX and event.layerY :

this.on('click', function(event){
    var canvas = document.getElementById('gameCanvas');
    var x = event.layerX;
    var y = event.layerY;
    camera.setPos( // calculate new position based on x and y....);
    }
})

Answer 5

I found out the best way to do it is...

var bgxy = bg.getAbsolutePosition();
var x = event.pageX - stage.getContainer().offsetLeft - bgxy.x;
var y = event.pageY - stage.getContainer().offsetTop - bgxy.y;