Question

考虑我有以下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）。

Answer 1

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

Answer 2

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

Answer 3

请检查我的回答HERE和测试床HERE。

有一个函数flatten_transformations（）可以烘焙（或应用）转换到路径，以便可以删除transform属性。它可以处理所有路径段（也是弧形）。

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;

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

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

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

该代码适用于最新的主浏览器，甚至适用于IE9。我修改转换的代码是jQuery，Raphael和本机代码的相当有趣的组合，它可能导致IE9在单击按钮时出现一些问题，但幸运的是那些必要的本机函数getTransformToElement()，createSVGPoint()和{{ 1}}在IE中也按预期工作。我想同时测试这些不同的编码库如何一起播放。因为拉斐尔本身并不足以处理所有可能的编码需求（缺乏样式和组以及缺乏附加svg元素的可能性，因为文本xml数据只是需要注意的事实）。

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

3 个答案: