javascript - 在动画运行时获取矩形的坐标

Question

我正在尝试在动画运行时获取矩形的坐标。您可以在此处查看动画的代码和类型：http: //jsfiddle.net/2UZM3/

可以看到，在动画结束时会打印坐标。我希望在矩形移动时坐标永久更新。

感谢您的帮助！

PS：源代码最初来自这里：http ://www.html5canvastutorials.com/kineticjs/html5-canvas-transition-easing-functions-with-kineticjs/

Answer 1

您可以添加一个stage.onFrame输出项目坐标的处理程序。只需stage在用户单击按钮开始动画时启动，并在方法stage上的回调transitionTo执行时停止：

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

    });
};

在这里更新了小提琴。