0

時間情報に基づいて線 (x 座標と y 座標) を表示する関数があります。x 座標と y 座標は描画されたポイントの位置を指定し、時間はそれぞれのポイントのタイムスタンプ (ミリ秒単位) を表します。

現在、以下のように行を表示する機能があります

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

問題は、この関数を線ではなく点を表示するように変更するにはどうすればよいかということです。

4

1 に答える 1

1

プロパティを持つオブジェクトxを取得する drawPoint メソッドを追加できます。y

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

次に、比較animateの前に関数から呼び出しますpoints[next]

drawPoint(points[next - 1]);

これがJSFiddle http://jsfiddle.net/jaimem/2krgN/です

行が必要ない場合は、パスは必要ありません

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-18T01:31:30.220 に答える