路徑和子路徑不會以同樣的方式管理弧線曲線

Question

我遇到了用拉斐爾生成弧線曲線的問題。

我在這裏創造一個減少的例子：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

看起來像拉斐爾的getSubpath方法有它曲解了大弧形標誌和掃描一對夫婦這些曲線的標誌的錯誤。我可能錯了。

編輯：好的我錯了。你有一些不好的Arcs（A）在Raphael和瀏覽器之間打破了某些地方，不知道在哪裏。但問題是：

您正在設置兩個弧上的負y-半徑得到混亂。半徑不能爲負。在你的sequence_path定義中，將這兩個-100改爲100（正半徑爲100）。更新提琴：http://jsfiddle.net/m6cHw/4/

如果你要手寫很多路徑，我建議你閱讀如何定義它們的標準規格：http://www.w3.org/TR/SVG/paths.html。我試圖避免一段時間閱讀，但最終我咬緊牙關，並通過它。這是奇怪的東西，但如果你想讓路徑做你想做的事，你需要了解它。