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

    });
};

更新了小提琴here。

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

1 个答案: