Question

我有一个基于时间信息显示线（x和y坐标）的功能。 x和y坐标指定绘制点的位置，而time表示各点的时间戳（以毫秒为单位）。

目前，有一个显示以下行的功能

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

问题是，如何修改此功能以显示点而不是线？

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

拉斐尔，点动画

1 个答案: