svg - Raphael.js でパスを逆にする

Question

2 つのカーブしたパスがあり、どちらも大まかに左から右に進み、1 つは の上にあります。それらを直線で結合して閉じたパスにする必要があります。

これを行うには、大きな閉じたパスのパス文字列を作成する必要があると想定しています。しかし、パスを作成するには、2 番目のカーブを反転する必要があります。

Raphael.jsでパスを逆にするにはどうすればよいですか? または、私がやりたいことを行うためのより良い方法はありますか?

ありがとう。

Answer 1

この例を使ってみてもらえますか?

左から右に走る 2 つの独立したパスを作成します。次に、これらを閉じたパスにマージします。

JSFiddleで試してください。

編集:

var paper = Raphael(0, 0, 800, 600);

// Define 2 paths running left to right
var path1 = paper.path("M10 10L200 120 300 80 400 100 450 150")
                 .attr({stroke: "#00FF00"}),
    path2 = paper.path("M10 200L200 220 300 280 400 300 450 250")
                .attr({stroke: "#00FF00"}),

    closedPath = joinPaths(path1, path2)
                      .attr({ 
                            fill: "#FF0000", 
                            stroke: "#0000FF"
                        });


// This function is a poc and assumes that 
// the paths contain a "M" at the begining
// and that that "M" is replacable by "L" (absolute Line to) 

function joinPaths() {
    var i, 
        len = arguments.length, 
        pathArr =[], 
        finalPathArr =[];

    for (i = 0; i < len; i++) {
        pathArr[i] = arguments[i].attr("path");
        if (i) {
            pathArr[i][0][0] = "L";
            pathArr[i].reverse();
            if (i === len-1) {
                pathArr[i].push("Z");
            }
        }
        finalPathArr = finalPathArr.concat(pathArr[i]);      
    }

    return paper.path(finalPathArr);
}