SVG旋转变换矩阵

Question

我从SVG文件中的元素解析了一个transform属性rotate(45,30,50),我希望将它转换为矩阵形式.我搜索了它,所有我能找到的只是rotate(a)没有看起来像这样的坐标[cos(a) sin(a) -sin(a) cos(a) 0 0]

任何人都可以告诉我如何转换rotate(angle, x , y)为矩阵形式？

Answer 1

旋转矩阵只能描述关于(0,0)的旋转,因此您必须使用平移.

编辑看到这个JSFiddle.它绘制一个矩形,定义为偏移,宽度和高度,绕枢轴点旋转.最有趣的部分是最后10行左右,其中用于值offsetX和offsetY被计算.获得这些后,您可以构建翻译和旋转矩阵.然后,只需将平移乘以旋转,您就可以得到最终结果.不幸的是,Javascript不提供任何矩阵功能,所以如果你不提供你的代码,这就是我所能做的

如何制作翻译矩阵

1   0   offsetX
0   1   offsetY
0   0      1

如何制作旋转矩阵

cos   -sin    0
sin    cos    0
 0      0     1