How to move image in Kineticjs on mousedown?

Question

I am developing an javascript editor using Kineticjs where I can add images and move them to up, down, left and right directions. I have managed to move image to any of these directions by using move method of the group like this

CurrentGroup.move(0,-1);

Now I want that when user click on any up, down , left and right key. The image should keep moving on the mousedown as long as the user keep the mouse clicked. I am stuck here because my current method is not working in this scenario.

Thank in advance.

Answer 1

You can listen for keydown events on the document and move your Kinetic object appropriately.

$(document).keydown(function (event) {
    switch(event.which){
        case 37: // left-arrow
            CurrentGroup.move(-1,0);
            layer.draw();
            break;
        case 39: // right-arrow
            CurrentGroup.move(1,0);
            layer.draw();
            break;
        case 38: // up-arrow
            CurrentGroup.move(0,-1);
            layer.draw();
            break;
        case 40: // down-arrow
            CurrentGroup.move(0,1);
            layer.draw();
            break;
    }
});