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方法有一个错误，它错误解释了几条曲线的大弧标志和扫描标志。我可能错了。

编辑：好的，我错了。你有一些糟糕的Arcs（A）在Raphael和浏览器之间的某个地方打破了一些东西，不知道在哪里。但问题是：

您在两个被弄乱的弧上设置负y半径。半径不能为负。在sequence_path定义中，将这两个-100更改为100（正半径为100 y）。更新小提琴：http://jsfiddle.net/m6cHw/4/

如果您要编写很多路径，我建议您阅读有关如何定义它们的标准规范：http://www.w3.org/TR/SVG/paths.html。我试图避免阅读一段时间，但最终我咬了一口子并经历了它。这是奇怪的东西，但如果你想让路径做你想做的事情，你需要理解它。

路径和子路径不以相同的方式管理弧形曲线

1 个答案: