Relative Pointer Position

Question

I need some help figuring out how to calculate the relative pointer position on a KineticJS stage.

In my case my stage changes position , offset , and scale .

Here is the demo: http://jsfiddle.net/pCZzv/

function getRelativePointerPosition() {
    var pointer = stage.getPointerPosition();
    var pos = stage.getPosition();
    var offset = stage.getOffset();
    var scale = stage.getScale();

    return {
        x : ((pointer.x - pos.x + offset.x) / scale.x),
        y : ((pointer.y - pos.y + offset.y) / scale.y)
    };
}

I want the red circles to appear where the mouse is clicked. I'm running into problems when the stage has changed it's offset and scale.

Answer 1

Your calculation of the x and y coordinates are slightly off. This is a working demo of your example: http://jsfiddle.net/pCZzv/1/

Here is the relevant changed code:

function getRelativePointerPosition() {
    var pointer = stage.getPointerPosition();
    var pos = stage.getPosition();
    var offset = stage.getOffset();
    var scale = stage.getScale();

    return {
        x : ((pointer.x / scale.x) - (pos.x / scale.x) + offset.x),
        y : ((pointer.y / scale.y) - (pos.y / scale.y) + offset.y)
    };
}