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

【问题标题】：How to apply transform matrix to path coordinates in Raphael JS 2?如何将变换矩阵应用于 Raphael JS 2 中的路径坐标？
【发布时间】：2012-01-11 02:58:23
【问题描述】：

我想在 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框架可以将路径坐标转换为绝对位置，并在过程中去掉变换矩阵。

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

【问题讨论】：

SvgToHtml 会将路径坐标转换为绝对位置，并在此过程中移除变换矩阵。 irunmywebsite.com/raphael/SVGTOHTML_LIVE.php
我最终存储了集合中每个路径的原始转换。每次我需要转换整个集合时，我将首先使用存储的转换预转换“...T”各个路径。此解决方案并不理想，因为它会使大型集合的拖动变得迟钝。

标签： javascript svg raphael svg-edit

【解决方案1】：

这是一个为您应用所有转换的 jsFiddle：http://jsfiddle.net/ecmanaut/cFSjt/

Raphael 可能会公开我自己填写的部分或全部工具，但如果没有，这些工具可以很好地解决问题。如果您的需求也涵盖更多非路径元素（如组、矩形、圆形、椭圆等），请先将它们转换为路径元素（例如使用 pathify）。

【讨论】：

不错。我很惊讶这样的东西不是 Raphael 核心的一部分，但我似乎无法在文档中找到它。似乎在很多情况下，人们希望将转换“应用”到某些路径数据。一个问题：您不是通过直接使用节点来在您的函数中假设 SVG（而不是 VML）吗？您能否举一个“纯”拉斐尔示例，使用这些方法克隆和展平转换后的拉斐尔路径？

【解决方案2】：

可以在这个 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);
}

它根据原始集中的每个字符创建一个新路径。但是，小提琴没有正确地分隔字符。

关于 raphael google group 的一些相关讨论： Some google group discussion here：https://groups.google.com/d/msg/raphaeljs/OP29oelR5Eg/zPi5m6rjsvIJ

【讨论】：