路径和子路径管理圆弧曲线的方式不同

Question

我在使用Raphael生成弧形曲线时遇到了问题。

我创建了一个简化的示例:http://jsfiddle.net/vaxilart/m6cHw/3/

可以看到，绘制的第一条路径与第二条路径不同，第二条路径只是第一条路径的子路径。

你知道为什么两者不同吗?我该如何解决这个问题呢?

代码如下:

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

Answer 1

看起来Raphael的getSubpath方法有一个错误，它误解了这些曲线的Large Arc Flags和Sweep Flags。我可能错了。

编辑:好吧，我错了。你有一些坏弧(A)在拉斐尔和浏览器之间的某个地方破坏了一些东西，不确定在哪里。但问题是:

你在两个混乱的圆弧上设置负的y半径。半径不能是负的。在sequence_path的定义中，将这两个-100改为100(正100 y半径)。更新提琴:http://jsfiddle.net/m6cHw/4/

如果你打算手写很多路径，我建议你阅读如何定义它们的标准规范:http://www.w3.org/TR/SVG/paths.html。有一段时间我试着不去读那篇文章，但最终我还是咬紧牙关读完了。这是很奇怪的东西，但如果你想让路径做你想做的事情，你需要理解它。