4

是否可以让 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

我需要这条只有直线的路径！

4

1 回答 1

5

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

如果您查阅.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

于 2013-02-04T19:05:11.957 回答