svg - 在 Raphael.js 中反转路径

Question

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

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

如何在 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);
}

Answer 2

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

function reversePath(pathString) {
    var pathPieces = pathString.match(/[MLHVCSQTA][-0-9.,]*/gi);
    var reversed = '';
    var skip = true;
    var previousPathType;
    for (var i = pathPieces.length - 1; i >= 0; i--) {
        var pathType = pathPieces[i].substr(0, 1);
        var pathValues = pathPieces[i].substr(1);
        switch (pathType) {
            case 'M':
            case 'L':
                reversed += (skip ? '' : pathType) + pathValues;
                skip = false;
                break;
            case 'C':
                var curvePieces = pathValues.match(/^([-0-9.]*,[-0-9.]*),([-0-9.]*,[-0-9.]*),([-0-9.]*,[-0-9.]*)$/);
                reversed += curvePieces[3] + pathType + curvePieces[2] + ',' + curvePieces[1] + ',';
                skip = true;
                break;
            default:
                alert('Not implemented: ' + pathType);
                break;
        }
    }
    return reversed;
}

我会这样称呼它：

var combinedPath = path1 + 'L' + reversePath(path2) + 'Z';