Svg 在Raphael.js中反转路径

我有两条弯曲的路径，都大致从左到右，一条在顶部。我需要用直线将它们连接成一条封闭的路径

为此，我假设我需要构建大的封闭路径的路径字符串。但是为了建立路径，我需要反转第二条曲线

如何在Raphael.js中反转路径？还是有更好的方法来做我想做的事

---

谢谢。

你能试着用这个例子吗

它创建了两条从左到右的独立路径。然后它将这些合并到一个封闭的路径中

试一试

编辑：

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

var-paper=Raphael（0,0,800600）；
//定义从左到右的两条路径
var path1=纸张路径（“M10 10L200 120 300 80 400 100 450 150”）
.attr（{stroke:#00FF00}），
路径2=纸张路径（“M10 200L200 220 300 280 400 450 250”）
.attr（{stroke:#00FF00}），
closedPath=joinpath（路径1、路径2）
.attr（{
填写：“FF0000”，
笔划：“0000FF”
});
//此函数是一个poc，并假定
//路径的开头包含一个“M”
//“M”可以被“L”（绝对线到）替换
函数joinPaths（）{
var i，
len=arguments.length，
pathArr=[]，
finalPathArr=[]；
对于（i=0；i

您可以尝试使用此示例吗

它创建了两条从左到右的独立路径。然后它将这些合并到一个封闭的路径中

试一试

编辑：

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

var-paper=Raphael（0,0,800600）；
//定义从左到右的两条路径
var path1=纸张路径（“M10 10L200 120 300 80 400 100 450 150”）
.attr（{stroke:#00FF00}），
路径2=纸张路径（“M10 200L200 220 300 280 400 450 250”）
.attr（{stroke:#00FF00}），
closedPath=joinpath（路径1、路径2）
.attr（{
填写：“FF0000”，
笔划：“0000FF”
});
//此函数是一个poc，并假定
//路径的开头包含一个“M”
//“M”可以被“L”（绝对线到）替换
函数joinPaths（）{
var i，
len=arguments.length，
pathArr=[]，
finalPathArr=[]；
对于（i=0；i

我最近需要这个功能来填充图形上曲线之间的区域。我使用了以下实现

函数反向路径（路径字符串）{
var pathPieces=pathString.match（/[MLHVCSQTA][0-9.，]*/gi）；
var反向=“”；
var skip=true；
var-previousPathType；
对于（var i=pathPieces.length-1；i>=0；i--）{
var pathType=pathPieces[i].substr（0,1）；
var pathValues=pathPieces[i].substr（1）；
交换机（路径类型）{
案例“M”：
案例“L”：
反向+=（跳过？''：路径类型）+路径值；
跳过=错误；
打破
案例“C”：
var curvePieces=pathValues.match（/^（[-0-9.]*，[-0-9.]*），（[-0-9.]*，[-0-9.]*），（[-0-9.]*，[-0-9.]*）$/；
反向+=curvePieces[3]+路径类型+curvePieces[2]+'，'+curvePieces[1]+'，'；
跳过=真；
打破
违约：
警报（“未实现：”+路径类型）；
打破
}
}
反向返回；
}

我这样称呼它：

---

我最近需要这个功能来填充图形上曲线之间的区域。我使用了以下实现

函数反向路径（路径字符串）{
var pathPieces=pathString.match（/[MLHVCSQTA][0-9.，]*/gi）；
var反向=“”；
var skip=true；
var-previousPathType；
对于（var i=pathPieces.length-1；i>=0；i--）{
var pathType=pathPieces[i].substr（0,1）；
var pathValues=pathPieces[i].substr（1）；
交换机（路径类型）{
案例“M”：
案例“L”：
反向+=（跳过？''：路径类型）+路径值；
跳过=错误；
打破
案例“C”：
var curvePieces=pathValues.match（/^（[-0-9.]*，[-0-9.]*），（[-0-9.]*，[-0-9.]*），（[-0-9.]*，[-0-9.]*）$/；
反向+=curvePieces[3]+路径类型+curvePieces[2]+'，'+curvePieces[1]+'，'；
跳过=真；
打破
违约：
警报（“未实现：”+路径类型）；
打破
}
}
反向返回；
}

我这样称呼它：

---

我目前正在考虑的方法是在路径的各个部分中循环，并试图以此为基础构建路径的相反方向。我想这将是一个有点复杂的方法来做它-有人能救我吗？我现在正在考虑的方法是通过循环的路径段，并试图建立从这条路径的反向路径。我想这将是一个有点复杂的方式来做它-有人能救我从这个吗？谢谢，它的接近：检查我的结果在这里：。这两条路径在一侧正确连接，但在另一侧有一条不需要的曲线。有什么想法吗？可能是因为使用了“C”。我的路径被创建了