1

我在用 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
});
4

1 回答 1

1

看起来 Raphael 的 getSubpath 方法有一个错误，它误解了其中几条曲线的大弧标志和扫描标志。我可能错了。

编辑：好的，我错了。你有一些糟糕的 Arc (A) 破坏了 Raphael 和浏览器之间的某个地方，不确定在哪里。但问题是：

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

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

于 2013-05-02T01:06:42.340 回答