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

Question

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

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

谢谢你的帮助！

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

Answer 1

你可以添加一个处理stage.onFrame其输出项目的坐标。当用户点击该按钮启动动画，并停止stage执行针对transitionTo方法回调时，只需启动stage：

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。