Paths and subpath don't manage the arc curve the same way

Question

I'm having issue with generating arc curves with Raphael.

I created a reduced example here: http://jsfiddle.net/vaxilart/m6cHw/3/

As you can see, the first path drawn isn't the same as the second one, and the second one is only a subpath of the first.

Do you know why both are different? And how could I resolve this issue?

Here's the code:

function drawpath( canvas, bg, pathstr, duration, attr, callback ) {
    var guide_path = bg;
    var path = canvas.path( guide_path.getSubpath( 0, 1 ) ).attr( attr );
    var total_length = guide_path.getTotalLength( guide_path );
    var last_point = guide_path.getPointAtLength( 0 );
    var start_time = new Date().getTime();
    var interval_length = 50;
    var result = path;

    var run = function run() {
        var elapsed_time = new Date().getTime() - start_time;
        var this_length = elapsed_time / duration * total_length;
        var subpathstr = guide_path.getSubpath( 0, this_length );

        path.attr({ path: subpathstr });

        if ( elapsed_time >= duration ) {
            if ( callback != undefined ) callback();
        } else {
            requestAnimationFrame(run);
        }
    };
    run();
    return result;
}

var sequence_path = [
    [ "M", 200, 0 ],
    [ "V", 200 ],
    [ "A", 100, 100, 90, 0, 0, 300, 300 ],
    [ "H", 400 ],
    [ "A", 100, -100, 90, 0, 0, 500, 400 ],
    [ "V", 500 ],
    [ "A", 100, -100, 90, 0, 0, 400, 600 ],
    [ "H", 200 ],
    [ "A", 100, 100, 90, 0, 0, 100, 700 ],
    [ "V", 800 ]
];

var paper = Raphael(10, 50, 700, 1000);

var bg = paper.path(sequence_path).attr({
    stroke: 'white',
    'stroke-width': 64,
    'stroke-opacity': 1,
    fill: 'none',
    'fill-opacity': 0
});

drawpath( paper, bg, sequence_path, 3500, {
    stroke: 'orange',
    'stroke-width': 64,
    'stroke-opacity': 1,
    fill: 'none',
    'fill-opacity': 0
});

Owen Masback · Accepted Answer · 2013-05-02T01:41:15.797

Looks like Raphael's getSubpath method has a bug where it misinterprets the Large Arc Flags and Sweep Flags of a couple of those curves. I might be wrong.

Edit: OK I was wrong. You have some bad Arcs (A) that are breaking something somewhere between Raphael and the browser, not sure where. But the problem is:

You are setting negative y-radius on the two Arcs that get messed up. Radius cant be negative. in your sequence_path definition, change those two -100's to 100 (positive 100 y radius). updated fiddle: http://jsfiddle.net/m6cHw/4/

If you're going to be hand-writing a lot of paths, I suggest you read the standards specs on how to define them: http://www.w3.org/TR/SVG/paths.html. I tried to avoid reading that for a while but eventually I bit the bullet and went through it. It's weird stuff but you need to understand it if you want to make paths do what you want.

Paths and subpath don't manage the arc curve the same way

1 Answers1