2

Web アプリで線をアニメーションとして表示する必要があるタスクを完了するのに苦労しています。

ライン データはデータベースに保存され、x、y、および時間情報で構成されます。x 座標と y 座標は描画されたポイントの位置を指定し、時間はそれぞれのポイントのタイムスタンプ (ミリ秒単位) を表します。

たとえば、ポイント 1 (x=10、y=23、t=152) ポイント 2 (x=21、y=29、t=385) ポイント 3 (x=15、y=20、t=506) .. . ...

したがって、タスクは、指定されたタイムスタンプに基づいてこれらのポイントを Web アプリに表示することです。

私の問題は、まず、使用するグラフィカルプラグインの種類と、それを実装する方法がわからないことです(つまり、タイマーの使用方法、アニメーションの実行方法など)。

私はあなたからの助けをいただければ幸いです！このタスクについてさらに情報が必要な場合はお知らせください。喜んで提供します。

よろしく、フリーダ

4

1 に答える 1

0

こういうのならラファエルを使うと思います。使いやすく、すべての主要なブラウザーをサポートしています。アニメーションの線画は、各ステップを個別のパスとして生成する必要があるため、少し面倒ですが、それほど難しいことではありません。

これは非常に簡単な例です

var points = [
    { x: 0, y: 0, t: 0 },
    { x: 100, y: 230, t: 1520 },
    { x: 210, y: 290, t: 3850 },
    { x: 150, y: 200, t: 5060 },
];

var paths = [];

// build paths
points.forEach(function (p, idx) {
    if (idx === 0) {
        paths.push('M ' + p.x + ' ' + p.y);
    } else {
        paths.push(paths[idx - 1] + ' L ' + p.x + ' ' + p.y);
    }
});

var paper = Raphael(10, 10, 300, 300);
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();

そして、これが実際の動作を確認できるフィドルです: http://jsfiddle.net/toxicsyntax/FLPdr/ UPDATE

上記のコードを使用した完全な HTML ページを次に示します。これはまだ単純化された例ですが、そこから自分のやり方で作業できるはずです。

<!DOCTYPE html>
<html>
    <head>
        <title>Raphael Play</title>
        <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];

                // build paths
                for (var i = 1; i < points.length; i++) {
                    var p = points[i];
                    paths.push(paths[i - 1] + ' L ' + p.x + ' ' + p.y);
                }

                // get drawing surface
                var paper = new Raphael(document.getElementById('canvas_container'), 500, 500);  

                // draw line
                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>
        <style type="text/css">
            #canvas_container {
                width: 500px;
                border: 1px solid #aaa;
            }
        </style>
    </head>
    <body>
        <div id="canvas_container"></div>
        <script type="text/javascript">
            window.onload = function () {
                // the points here should be generated by your ASP.NET application
                drawLine([
                    // the points here should be generated by your ASP.NET application
                    { 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>
    </body>
</html>

ポイントは HTML ページの最後にあり、アプリケーションでモデルからそれらを生成できます。

于 2012-11-10T11:55:38.737 に答える