我从诸如rotate(45,30,50)
之类的SVG文件中的元素解析了一个transform属性,我想将其转换为矩阵形式。
我搜索了它,发现的只是rotate(a)
,没有坐标,看起来像这个[cos(a) sin(a) -sin(a) cos(a) 0 0]
谁能告诉我如何将rotate(angle, x , y)
转换为矩阵形式?
最佳答案
旋转矩阵只能描述围绕(0,0)的旋转,因此您必须使用平移。
编辑参见this JSFiddle。它绘制一个定义为具有偏移量,宽度和高度的矩形,并围绕枢轴点旋转。有趣的部分是最后10行左右,其中计算了offsetX
和offsetY
的值。获得这些文件后,就可以构建平移和旋转矩阵。然后,将平移乘以旋转,您将得到最终结果。不幸的是,Javascript不提供任何矩阵功能,所以如果您不提供代码,这就是我所能做的
如何制作翻译矩阵
1 0 offsetX
0 1 offsetY
0 0 1
如何制作旋转矩阵
cos -sin 0
sin cos 0
0 0 1