Raphaël - transformPath () to return rows instead of curves

Question

Is it possible to force Raphael.transformPath () to return a path from strings instead of a path made from curves?

var path = "M10,20L30,40"; var trans = "t100,100s2,2"; var trpath = Raphael.transformPath(path, trans); console.log('trpath: ' + trpath); 

will output:

 trpath: M100,110C100,110,140,150,140,150 

I need this path only with straight lines!

Answer 1

Strange, I don’t know why Rafael decided to do this. But not too hard to get around:

If you refer to the source for the .transformPath () method, you will see that it is part of two other utility methods:

 transformPath = R.transformPath = function (path, transform) { return mapPath(path, toMatrix(path, transform)); } 

Pretty straightforward: .toMatrix () analyzes the conversion of a string into a matrix, and mapPath applies this matrix to a path string.

For some reason mapPath includes a method call . path2curve () , so you are having problems. Therefore, we need to grab the source for this method and change it:

 var mapPathStraight = function (path, matrix) { if (!matrix) { return path; } var x, y, i, j, ii, jj, pathi; //replace following line with .parsePathString(), which also parses path string into an array without adding curves //path = path2curve(path); path = Raphael.parsePathString(path); for (i = 0, ii = path.length; i < ii; i++) { pathi = path[i]; for (j = 1, jj = pathi.length; j < jj; j += 2) { x = matrix.x(pathi[j], pathi[j + 1]); y = matrix.y(pathi[j], pathi[j + 1]); pathi[j] = x; pathi[j + 1] = y; } } return path; }; 

Now we can reach a straight line:

 var trpath = mapPathStraight(path, Raphael.toMatrix(path, trans)); 

Which gives me the conclusion:

 trpath: M100,110L140,150 

Here jsFiddle