我有两条曲线路径,两条路径大致从左到右,一条在路径上方。我需要用直线将它们连接到一条封闭的路径上。
要做到这一点,我假设我需要构建大封闭路径的路径字符串。但是为了建立路径,我需要反转第二条曲线。
如何在Raphael.js中反转路径?或者有更好的方法来做我想做的事情吗?
感谢。
答案 0 :(得分: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);
}
答案 1 :(得分:0)
我最近需要这个功能来填充图表上曲线之间的区域。我使用了以下实现。
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';