SVG Raphael jQuery Build path/trail



如果我有一个像这个例子一样的动画圆圈,有没有办法让它在画布上留下一个永久的轨迹,1px纯白色?

我尝试动态构建路径,但无法使其工作。

提前感谢,任何帮助将不胜感激

我不知道

为什么 SVG 与其乡村表亲 canvas 元素相比会得到如此糟糕的说唱。 令人惊讶的是,在认真尝试探索其功能之前,SVG被斥为不足或不合适。

请看一下这个小提琴。

其中大部分是由对路径上移动点的动态评估驱动的,如下所示:

function arrowline( canvas, pathstr, duration, attr, callback )
{    
    var guide_path = canvas.path( pathstr ).attr( { stroke: "none", fill: "none" } );
    var path = canvas.path( guide_path.getSubpath( 0, 1 ) ).attr( attr );
    var total_length = guide_path.getTotalLength( guide_path );
    var start_time = new Date().getTime();
    var interval_length = 25;
    var interval_id = setInterval( function()
        {
            var elapsed_time = new Date().getTime() - start_time;
            var this_length = elapsed_time / duration * total_length;
            var subpathstr = guide_path.getSubpath( 0, this_length );
            attr.path = subpathstr;
            path.animate( attr, interval_length );
            if ( elapsed_time >= duration )
            {
                clearInterval( interval_id );
                if ( callback != undefined ) callback();
            }                                       
        }, interval_length );  
    return path;    
}

我挑战任何人找到一个比这更经济的HTML画布解决方案。 如果您打算向此小部件添加任何交互性,请考虑在评估经济性时 SVG 中的事件绑定有多容易。

你可以做这样的事情: http://jsfiddle.net/nDxbK/

编辑:我说过,如果示例不是圆在直线上移动,这是行不通的,如果你想为随机移动做这种事情,SVG 是不够的(但另一方面,画布将是理想的)。Zero在他的回答中证明了我是错的,我写的东西被认为是对SVG的批评——离我很远!SVG很棒。

最新更新