如何将转换矩阵应用于Raphael JS 2中的路径坐标？

我想在Raphael JS 2中应用或'烘焙'几个路径的转换，以便我可以将它们合并成一条路径。如何将转换矩阵应用于Raphael JS 2中的路径坐标？

这里是一个示例路径，我希望将“transform”属性应用于所有“d”坐标。

<path style="" fill="#000000" stroke="none" d="M150,-265C182,-275,171,-220,180,-194L178,-194C181,-192,180,-185,181,-180C211,-169,282,-173,306,-166C308,-169,316,-171,315,-165C268,-157,225,-148,184,-137C188,-118,186,-96,190,-79L282,-131C289,-131,296,-135,297,-126C293,-118,271,-105,236,-80C190,-48,155,-20,125,-6C112,-15,115,-34,111,-51C121,-70,108,-107,107,-133C70,-132,-5,-126,0,-157C18,-170,39,-181,64,-191C75,-190,92,-181,100,-185C99,-198,95,-211,89,-225Z" transform="matrix(0.1389, 0, 0, 0.1389, 291.91, 235.465)" stroke-width="7.199999999999999">

据我所知，svg-edit框架可以将路径坐标转换为绝对位置，并移除过程中的变换矩阵。

一些相关的问题，这是我无法从我得到的答案：

来源

2011-12-02 Jedateach

我最终存储了集合中每个路径的原始转换。每次我需要转换整个集合时，我将首先使用存储的转换对“... T”单个路径进行预转换。这种解决方案并不理想，因为它会拖累大型设备的滞后。 – Jedateach

SvgToHtml会将路径坐标转换为绝对位置，并删除该过程中的变换矩阵。 http://irunmywebsite.com/raphael/SVGTOHTML_LIVE.php – Chasbeen

的部分解决方案可以在此的jsfiddle发现：http://jsfiddle.net/X6YNm/1/

//include whoa font, and raphael 
paper = Raphael('holder'); 
var text = paper.print(300, 50, 'Foo', paper.getFont('whoa'), 50, 'baseline'); 
var path = new Array(); 
for (var i = 0; i < text.length; i ++) { 
    path[i] = paper.path(Raphael.pathToRelative(text[i].attr('path'))); 
    path[i].attr({ fill: 'red' }).translate(i * 250, 300); 
}

It cr基于原始集合中的每个字符创建一条新路径。但是，小提琴不能正确放置角色。

在拉斐尔谷歌小组的一些相关讨论：一些谷歌的小组讨论在这里：https://groups.google.com/d/msg/raphaeljs/OP29oelR5Eg/zPi5m6rjsvIJ

来源

2012-02-06 22:56:52 Jedateach

下面是适用所有变换为你的jsfiddle：http://jsfiddle.net/ecmanaut/cFSjt/

这有可能是拉斐尔暴露了一些或全部的我已经填充了自己的工具，但如果没有，这些技巧很好。如果您的需求也覆盖更多的非路径元素（如组，rects，圆形，省略号等），请先将它们转换为路径元素（例如使用pathify）。

来源

2012-07-09 06:15:16 ecmanaut

不错。我很惊讶像这样的东西不是拉斐尔核心的一部分，但我似乎无法在文档中找到它。似乎有很多情况下，人们会想要将转换应用于某些路径数据。一个问题：你是不是在你的函数中直接使用节点来假设SVG（而不是VML）？你能否给出一个“纯粹的”拉斐尔使用这些方法克隆和变平变形拉斐尔路径的例子？ – Ben

如何将转换矩阵应用于Raphael JS 2中的路径坐标？

回答

相关问题