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

您可以添加一个 drawPoint 方法，该方法将获取一个具有x和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 回答