Raphael, 포인트 애니메이션

Question

시간 정보를 기반으로 선 (x 및 y 좌표)을 표시하는 기능이 있습니다. x 및 y 좌표는 그려진 점의 위치를 ​​지정하는 반면 time은 해당 점의 시간 소인 (밀리 초)을 나타냅니다.

질문은

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 }, 
      ]); 

, 나는이 어떻게 수정할 수 있습니다

현재, 다음과 같이 연관 배열을 사용하여 호출 할 수 있습니다

<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> 

그리고 기능 아래로 선을 표시하는 기능이있다 포인트가 아닌 라인을 표시하는 기능?

Answer 1

당신은

drawPoint(points[next - 1]); 

가 여기에 JSFiddle 년대 points[next] 비교하기 전에 x 및 y 특성 그리고

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

당신의 animate 기능에서 호출

와 객체를 취할 것 drawPoint 방법을 추가 할 수 있습니다 http://jsfiddle.net/jaimem/2krgN/

lin ES, 당신은 재귀 animate 콜백 읽기/이해하기 조금 어려울 수 있습니다 경로

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

을 필요로하지 않기 때문에 수도 그냥 setTimeout를 사용하고 싶습니다. 또한 id 요소가있는 문자열을 Raphael 생성자에 전달하면 라이브러리에서 DOM 노드를 찾을 수 있습니다.

JS 바이올린 : http://jsfiddle.net/jaimem/Q5G5y/2/