3

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

4

3 回答 3

3

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

于 2013-08-22T09:42:26.377 回答
1

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

于 2012-10-15T16:24:18.100 回答
1

请在此处查看我的答案和此处的测试平台。

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

旧答案（不是那么完整的实现）：

当然，有一种方法（例如 JSBIN 中的示例）可以在应用转换后获取结果路径数据。甚至是非常简单的方法。

假设我们有一个 SVG 路径pathDOM，它是根元素svgDOM。我们可以使用 native 函数得到路径坐标空间到根元素坐标空间的变换矩阵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()并且matrixTransform()在 IE 中也可以按预期工作。我想同时测试这些不同的编码基础是如何一起发挥作用的。因为事实上 Raphael 本身还不够完美，无法处理所有可能的编码需求（缺少样式和组以及无法将 svg 元素附加为文本 xml 数据的可能性只是需要注意的）。

于 2012-10-27T18:00:01.500 回答