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

我想我会用Raphaël 来做这样的事情。它易于使用并支持所有主流浏览器。动画线条绘制可能有点麻烦，因为您必须将每个步骤生成为单独的路径，但这应该不难。

这是一个非常简单的例子

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>

The points are at the end of the HTML page, and in your application you could generate those from your model.

于 2012-11-10T11:55:38.737 回答