javascript - 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

很奇怪，不知道拉斐尔为什么选择这样做。但不太难绕过:

如咨询the source对于 .transformPath() 方法，您会看到它是另外两个实用方法的组合:

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

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

出于某种原因，mapPath 包含对 .path2curve() method 的调用，这就是你遇到麻烦的原因。所以我们需要grab the source对该方法进行修改:

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