Drawing dot on scaled diagram using kinetic.js

1
votes

See jsfiddle example here

I am trying to zoom in on a diagram and pan around it and then drop a pin in a specific place on the diagram but I am not sure how the kinetic scaling works. This is a problem when I need to work out the drop co-ordinates relative to the viewing port.

The demo works fine at scale = 1 but when you use the wheel mouse to scroll in or out then the pins get dropped in the wrong place.

The incorrect function is this one:

function getRelativePos(shape,stage) {
    var mousePos = stage.getUserPosition();
    var pos = shape.getAbsolutePosition();
    var size = shape.getSize();
    var scale = shape.getScale();

    var x = (mousePos.x - pos.x) * scale.x ;
    var y = (mousePos.y - pos.y) * scale.y ;
    return {
        x:x,
        y:y
    };    
}
1
kineticjs

1 Answers

1
votes

I fixed function:

function getRelativePos(shape,stage) {
    var mousePos = stage.getUserPosition();
    var pos = shape.getAbsolutePosition();
    var scale = shape.getScale();

       // return relative mouse position
    var x = (mousePos.x - pos.x) / scale.x ;
    var y = (mousePos.y - pos.y) / scale.y ;
    return {
        x:x,
        y:y
    };    
}

Example http://jsfiddle.net/lavrton/B8UDq/4/