Raphaël - transformPath()返回行而不是曲线

Question

是否有可能让Raphael.transformPath()返回由行组成的路径而不是曲线构成的路径？

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

将输出:

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

我只用直线需要这条路!

Answer 1

很奇怪,不知道拉斐尔选择这样做的原因.但不是太难以解决:

如果您查阅.transformPath()方法的源代码,您将看到它是两个其他实用程序方法的组合:

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

非常简单:.toMatrix()解析将字符串转换为矩阵,mapPath将该矩阵应用于路径字符串.

出于某种原因,mapPath包含对.path2curve()方法的调用,这就是您遇到问题的原因.所以我们需要获取该方法的源并修改它:

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

现在我们可以像这样实现一条直线:

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

这给了我一个输出:

trpath: M100,110L140,150 

这是jsFiddle