Relative Pointer Position

canvas, javascript, kineticjs

Solution

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

Problem

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.

Original source