Question

I’m trying to get the coordinates of a rectangle while an animation is in action. You can see the code and type of animation here: http://jsfiddle.net/2UZM3/

As one can see, at the end of the animation the coordinates are printed. I want the coordinates to update permanently while the rectangle is moving.

Thank you for your help!

PS: The source code is originally from here: http://www.html5canvastutorials.com/kineticjs/html5-canvas-transition-easing-functions-with-kineticjs/

Answer 1

You could add a handler for stage.onFrame which outputs the item’s coordinates. Simply start the stage when the user clicks the button to start the animation, and stop the stage when the callback on the transitionTo method is executed:

window.onload = function() {
    var stage = new Kinetic.Stage({
        container: "container",
        width: 500,
        height: 200
    });
    var layer = new Kinetic.Layer();
    var greenBox = new Kinetic.Rect({
        x: 100,
        y: stage.getHeight() / 2,
        width: 100,
        height: 50,
        fill: 'green',
        stroke: 'black',
        strokeWidth: 4
    });


    layer.add(greenBox);
    stage.add(layer);

    stage.onFrame(function(frame) {
        // Update print coordinates on each frame of animation loop
        jQuery("#coordinates").text(Math.round(greenBox.getX()) + "," + Math.round(greenBox.getY()));      
    });

    jQuery("#StartAnim").click(function() {

        // Start the timer running
        stage.start();

        greenBox.transitionTo({
            x: 300,
            duration: 1,
            easing: 'ease-in-out',
            callback: function() {
                // Stop the stage loop
                stage.stop();
            }
        });

    });
};

Updated fiddle here.