如何在Raphael JS 2中应用变换矩阵到路径坐标
How to apply transform matrix to path coordinates in Raphael JS 2?
我想在Raphael JS 2中应用或'bake'几个路径的转换,这样我就可以将它们组合成一个单一的路径。
这里是一个示例路径,我希望"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框架可以将路径坐标转换为绝对位置,并在此过程中删除变换矩阵。
一些相关的问题,我无法得到我的答案:
- 烘烤转换为SVG路径元素命令
- 如何应用变换矩阵?
下面是一个为您应用所有转换的jsFiddle: http://jsfiddle.net/ecmanaut/cFSjt/
有可能拉斐尔暴露了我自己填充的部分或全部工具,但如果没有,这些工具也很好地发挥了作用。如果您需要覆盖更多的非路径元素(如组、矩形、圆圈、椭圆等),首先将它们转换为路径元素(例如使用pathify)。
可以在以下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);
}
它基于原始集合中的每个字符创建一个新路径。但是,fiddle不能正确地间隔字符。
关于拉斐尔谷歌组的一些相关讨论:这里的一些谷歌组讨论:https://groups.google.com/d/msg/raphaeljs/OP29oelR5Eg/zPi5m6rjsvIJ
相关文章:
- EaseJS拖放;放下(动画CC)电影剪辑的鼠标坐标
- 如何在d3.js中返回路径的y坐标
- 在谷歌地图上获取事件的x,y坐标
- 通过ajax将坐标传递到php服务器端,并在处理后检索到javascript
- 当带有渲染器的DOM元素不在屏幕顶部时,移动了场景的坐标
- 如何在JS Leatflet绘图插件中获取圆的坐标
- 点击(右键点击)使用传单地图库获取图像覆盖的像素坐标
- 查找带有边框的HTML5 Canvas(点击)事件的坐标
- HTML5获取弧的坐标's结束
- 如何在OpenLayers中获取动态绘制的多边形的坐标
- 获取用户位置并将坐标保存在数据库中
- fabric js多边形集合坐标
- 使用D3.js和GeoJson在地图上的某些坐标上设置一个小图像
- 设置变换原点特性的X和Y坐标
- 通过Panzoom变换放大时,获取画布单击坐标
- 如何将屏幕坐标转换为z变换元素上的坐标
- 如何在Raphael JS 2中应用变换矩阵到路径坐标
- 使用D3将NZTM2000坐标变换为WGS84
- 变换后的矩形坐标
- 矩阵变换:将SVG路径坐标转换为传单坐标系