Raphael，點的動畫

我有一個函數，它顯示基於時間信息的線（x和y座標）。 x和y座標指定繪製點的位置，而時間表示各個點的時間戳（以毫秒爲單位）。Raphael，點的動畫

目前，還其顯示線如下

<script type="text/javascript" src="https://raw.github.com/DmitryBaranovskiy/raphael/master/raphael-min.js"></script> 
    <script type="text/javascript"> 
     function drawLine(points) { 
      var paths = ['M ' + points[0].x + ' ' + points[0].y]; 
      for (var i = 1; i < points.length; i++) { 
       var p = points[i]; 
       paths.push(paths[i - 1] + ' L ' + p.x + ' ' + p.y); 
      } 
      var paper = new Raphael(document.getElementById('canvas_container'), 500, 500); 
      var line = paper.path(paths[0]); 
      var next = 1; 

      function animate() { 
       if (paths[next]) { 
        duration = points[next].t - points[next - 1].t   
        line.animate({ path: paths[next] }, duration, 'linear', animate); 
        next++; 
       } 
      } 
      animate(); 
     } 
    </script>

和功能的功能可以使用關聯數組如下可以稱爲：

drawLine([ 
       { x: 0, y: 0, t: 0 }, 
       { x: 100, y: 230, t: 1520 }, 
       { x: 210, y: 290, t: 3850 }, 
       { x: 150, y: 200, t: 5060 }, 
      ]);

的問題是，如何可以修改此函數來顯示點而不是線？

來源

2012-11-17 Frida

你想繪製指向座標從數組？這裏的't'參數是什麼？建議 - 繪製小半徑的圓圈 –

@eicto t是時間戳 – Frida

是的...... @ eicto是正確的，只需畫出圓圈，或者使用標記來使用任何形式的點可視化，在這裏使用單一路徑是很乏味的。 – philipp

您可以將points[next]比較

drawPoint(points[next - 1]);

這裏的的jsfiddle前添加drawPoint方法，這將需要一個對象，具有x和y性能

function drawPoint(point) { 
    paper.circle(point.x, point.y, 5).attr('fill', 'red'); 
};

然後從你的animate函數調用它， http://jsfiddle.net/jaimem/2krgN/

如果你不想要林ES，那麼你不需要路徑

function drawPoints(points){ 
    var paper = new Raphael('canvas_container', 500, 500), 
     idx = 0; 

    function animate(){ 
     if(points[idx]){ 
      var currP = points[idx], 
       prevP = points[idx - 1], 
       d  = currP.t - (prevP ? prevP.t : 0); 
      paper.circle(currP.x, currP.y, 1) 
       .attr('fill', 'red') 
       .animate({r:5}, d, animate); 
      idx++  
     } 
    } 
    animate(); 
}

遞歸animate回調可能有點難以理解/讀取，所以可能只是想用一個setTimeout。您也可以將一個元素的id的字符串傳遞給Raphael構造函數，並且該庫將爲您找到DOM節點。

JS小提琴：http://jsfiddle.net/jaimem/Q5G5y/2/

來源

2012-11-18 01:31:30 jaime

謝謝！有效。 – Frida

Raphael，點的動畫

回答

相關問題