2

我对Raphael.path2curve()有疑问。该函数修改 SVG 路径字符串，以便将所有路径命令转换为绝对三次曲线 (C)。该函数支持所有路径命令（mlcqahvstMLCQAHVST参见SVG SPEC）。

Raphael.path2curve() 可以在许多情况下处理良好的路径，例如。它甚至可以正确地将弧转换为三次，这不是一个简单的计算。我进行了许多测试，并意识到由 commands 组成的路径QT或CS转换HT得很好。以下内容也没有问题：MS, HS, VS, LS, TC, TH, TL, TV, QA, TA.

但它不能处理命令QS, TS, AS, TT（按那个顺序）。

如果我们例如。有这样的路径，转换失败：

M 0 0  T 205.4 112.9  S 260.8 23.36 82.45 72.86

但这转换正确：

M 0 0  S 211.9 54.20 52.14 144.4  T 98.85 44.45

所以，MTS 不行，但 MST 可以。有问题的是 S 和 T，因为当某些事情失败时，它们总是存在问题。

我制作了一个随机路径生成器（速度慢，但使用jsbin来提高速度），您可以在其中获取随机路径并使用 Raphael.path2curve() 将其转换为 Cubic 命令。在小提琴中单击 SVG 或在输入字段上按 enter 以获取新的随机路径。重复，直到你找到一个不正确的。在HTML 窗口中的jsfiddle中是一个参数var list = "st";，您可以在其中将路径命令设置为随机化。

这是一个示例图像。蓝色是原始路径，红色是转换路径。它们应该是相同的。

小路

我应该如何处理 Raphael 代码才能使转换正确？

（我做了一个错误报告，但现在已经尝试解决问题几个小时，但没有运气。

4

1 回答 1

7

看来我终于把它修好了。请测试！我制作了两个 jsbin 版本：

1) 使用未修改的 Raphael 库的非固定版本：jsbin.com/oqojan/33。
2) 修改 path2curve() 函数的 FIXED 版本：jsbin.com/oqojan/32。

在这两个版本中都有黑色（原始）和白色（标准化）路径。如果一切正常，您不应该在黑色路径下方看到白色路径。如果你看到白色的路径，则 lib 代码有一个错误（请参阅下面的一些轻微闪烁的解释）。

请在输入字段上按住 ENTER 大约一分钟。只要 ENTER 关闭，代码就会重复生成随机路径。更改属性var list = "mlcqahvstz";以更改随机化的基本字母。

这里是我对 lib 代码所做的解释。在原始 Raphaël 2.1.0 lib 代码中有一个函数 path2curve()，它具有以下几行：

case "S":
    nx = d.x + (d.x - (d.bx || d.x));
    ny = d.y + (d.y - (d.by || d.y));
    path = ["C", nx, ny][concat](path.slice(1));
    break;
case "T":
    d.qx = d.x + (d.x - (d.qx || d.x));
    d.qy = d.y + (d.y - (d.qy || d.y));
    path = ["C"][concat](q2c(d.x, d.y, d.qx, d.qy, path[1], path[2]));
    break;

当我将它们更改为：

case "S":
    if (pcom == "C" || pcom == "S") { // In "S" case we have to take into
                                      // account, if the previous command
                                      // is C/S.
        nx = d.x * 2 - d.bx;          // And reflect the previous 
        ny = d.y * 2 - d.by;          // command's control point relative
                                      // to the current point.  
    }
    else {                            // or some else or nothing
        nx = d.x;
        ny = d.y;
    }
    path = ["C", nx, ny][concat](path.slice(1));
    break;
case "T":
    if (pcom == "Q" || pcom == "T") { // In "T" case we have to take
                                      // into account, if the
                                      // previous command is Q/T.
        d.qx = d.x * 2 - d.qx;        // And make a reflection similar 
        d.qy = d.y * 2 - d.qy;        // to case "S".
    }
    else {                            // or something else or nothing
        d.qx = d.x;
        d.qy = d.y;
    }
    path = ["C"][concat](q2c(d.x, d.y, d.qx, d.qy, path[1], path[2]));
    break;

该功能按预期工作（即尊重每个可能的路径命令组合中的原始路径形状）。pcomvariable 指的是 ORIGINAL 路径的前一段，我还必须添加一种获取方法pcom，这很容易，因为对于除 A 之外的所有其他路径命令，从原始路径段类型到三次曲线 (C) 的转换只产生一个立方命令。在 A 的情况下，该函数可能会产生多个 C 命令（短角度产生一个或几个 C 段，而较大的角度产生更多）。

唯一轻微的不一致来自 Z 命令，因为 Raphaël 将每个 Z 转换为 C。这会影响路径开始（或结束）的视觉外观，但差异并不大。我假设它将 Z 转换为 C 以使路径具有动画效果。如果不需要动画，那么您可以考虑编辑函数以使 Z:s 不转换，在这种情况下转换保真度非常好。

我很惊讶所有路径命令都可以如此可靠地表示为三次曲线！

我希望这个错误在 Raphaël 的未来版本中得到修复。

编辑：也为路径动画制作了测试平台：
1）非固定：http: //jsbin.com/oqojan/44
2）固定：http: //jsbin.com/oqojan/42

在对非动画路径和动画路径进行彻底测试后，我可以确认我对 path2curve 函数的修复是稳定的，并且可以在生产代码中实现。如果您想确定，请使用上述测试平台。

于 2012-10-26T00:49:53.160 回答