CODEWITHSUNDEEP
javascriptjquerysvgraphael
jacktheripper
jacktheripper

Reputation: 14219

SVG Raphael jQuery Build path/trail

If I have an animating circle as in this example, is there a way in which it can leave a permanent trail on the canvas, of 1px solid white?

I have tried dynamically building a path, but could not get this to work.

Thanks in advance, any help would be much appreciated

Upvotes: 1

Views: 777

Answers (2)

Clafou
Clafou

Reputation: 15400

You can do something like this: http://jsfiddle.net/nDxbK/

Edit: I stated that this wouldn't work if the example wasn't of the circle moving in a straight line, and that SVG wouldn't be adequate if you wanted to do this sort of thing for random movement (but that canvas on the other hand would be ideal). Zero proved me wrong in his answer, and what I wrote was taken as a criticism of SVG--far from me! SVG is awesome.

Upvotes: 0

Kevin Nielsen
Kevin Nielsen

Reputation: 4433

I don't know why SVG gets such a bad rap compared to its country cousin, the canvas element. It is amazing how many times SVG is dismissed as inadequate or inappropriate before any serious attempt is even made to explore its capabilities.

Please take a look at this fiddle.

Most of this is driven by dynamic evaluation of a moving point on a path, as follows:

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;    
}

I challenge anyone to find a solution with HTML canvas that is more economical than this. If you are planning to add any interactivity to this widget, please consider how easy event binding is in SVG in your evaluation of economy.

Upvotes: 5

Related Questions