应用转换后如何获得结果 pathString？答案

【问题标题】：How do I get resulted pathString after transformation is applied?应用转换后如何获得结果 pathString？
【发布时间】：2012-10-05 15:33:35
【问题描述】：

假设我有以下 HTML5 路径：

var myPath = paper.path([
  'M', 0, 0
  'L', 100, 100,
  'L', 150, 50,
  'Z']
]);

myPath.transform(['s', 0.5, 0.5, 0, 0]);

在转换（缩放）之后，我的路径相应地调整了一半，但检查元素是相同的路径字符串，但应用了转换矩阵。有什么方法可以检索结果的 pathString（比如说 M,0,0,L,50,50,L,75,24,z）。

【问题讨论】：

这称为“扁平化”。见flatten.js。或者只是谷歌“svg flatten transform”。

标签： javascript html canvas svg raphael

【解决方案1】：

我认为你需要 transformPath 方法：http://raphaeljs.com/reference.html#Raphael.transformPath

【讨论】：

【解决方案2】：

唯一的解决方案是使用 Raphael 1.x，它用于修改路径而不是应用转换。否则，您需要编写自己的例程来将应用矩阵转换转换为路径（真的很难）。

【讨论】：

【解决方案3】：

请查看我的答案HERE 和测试平台HERE。

有一个函数 flatten_transformations() 可以烘焙（或应用）变换到路径，因此可以删除变换属性。它可以处理所有路径段（也包括弧）。

OLD ANSWER（不是那么完整的实现）：

当然有一种方法 (example in JSBIN) 可以在应用转换后获取结果路径数据。甚至是非常简单的方法。

假设我们有一个 SVG 路径 pathDOM，它是根元素 svgDOM。我们可以使用原生的getTransformToElement()函数得到路径坐标空间到根元素坐标空间的变换矩阵。它是这样使用的：

var matrix = pathDOM.getTransformToElement(svgDOM);

当我们将此矩阵应用于路径中的所有点时，我们会得到一个新的路径数据，其中所有坐标都相对于根元素。可以这样做：

var pt = svgDOM.createSVGPoint();
pt.x = some_x_coordinate_of_path_data;
pt.y = some_y_coordinate_of_path_data;
var new_point = pt.matrixTransform(matrix); // <- matrix object, which we created earlier
var new_x = new_point.x;
var new_y = new_point.y;

就是这样！转换后可以清空transform属性。

当然，路径中的所有坐标都必须转换为绝对坐标，例如。弧线段必须转换为线段或立方线段，这两者都可以通过 Raphaël 的path2curve() 函数来实现。

我在 JSBIN 中做了一个使用“扁平化转换”功能的完整示例。有一个现成的函数 flatten_transformations()，它是唯一需要的（其余的用于 UI 目的）。该示例有一个嵌套在两个 g 元素内的路径。 Path 应用了自己的转换，以及两个 g 元素。目的是测试嵌套转换是否也被展平。

该代码适用于最新的主要浏览器，甚至在 IE9 中。我修改转换的代码是 jQuery、Raphael 和本机代码的相当有趣的组合，这可能是在单击按钮时在 IE9 中导致一些问题的原因，但幸运的是，这些基本的本机函数 getTransformToElement()、createSVGPoint() 和 matrixTransform() 按预期工作也在IE中。我想同时测试这些不同的编码基础是如何一起发挥作用的。因为 Raphael 本身还不够完美，无法处理所有可能的编码需求（需要注意的是缺少样式和组以及无法将 svg 元素附加为文本 xml 数据的可能性）。

【讨论】：