Реверсирование пути в Raphael.js

Question

У меня есть два изогнутых пути, идущих слева направо, один над. Мне нужно объединить их с прямыми линиями в замкнутый путь.

Для этого я предполагаю, что мне нужно построить строку пути большого замкнутого пути. Но для того, чтобы построить путь, мне нужно обратить вспять вторую кривую.

Как изменить путь в Raphael.js? Или есть лучший способ сделать то, что я хочу сделать?

Спасибо.

Answer 1

Можете ли вы попробовать использовать этот пример?

Он создает 2 независимых пути, идущих слева направо. Затем он объединяет их в замкнутый путь.

Попробуйте JSFiddle.

EDITED:

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';