如何在矩阵旋转后获得正确的 x,y 位置？

【问题标题】：How to get the correct x,y position after matrix rotation?如何在矩阵旋转后获得正确的 x,y 位置？
【发布时间】：2012-11-06 15:21:09
【问题描述】：

我已经在论坛和这里进行了很多搜索，但我还没有找到明确的解决方案。我找到了similar issues，但它不起作用。

当我绘制一个矩形时，Inkscape 会给出准确的 x 和 y 位置。但是，当我旋转时，它会将 x 和 y 位置更改为难以理解的值。例如：

<rect
   id="rect2985"
   width="100"
   height="100"
   x="100"
   y="100" />

没关系，但是旋转时，看看“transform”属性和x,y：

<rect
   id="rect2985"
   width="100"
   height="100"
   x="4.9038105"
   y="154.90381"
   transform="matrix(0.8660254,-0.5,0.5,0.8660254,0,0)" />

如何从 x=4.9... 和 y=154.9... 或从矩阵值计算得到 x=100 y=100？

【问题讨论】：

标签： javascript matrix svg transform inkscape

【解决方案1】：

如果您想保留x=100 y=100 值，则必须计算不同的转换矩阵。在正方形中心上的旋转相当于 3 次变换：

 translate(-(x + centerX), -(y + centerY))
 rotate(angle)
 translate(x + centerX, y + centerY)

在您的情况下，转换属性将类似于：

 transform = "translate(150, 150) rotate(45) translate(-150, -150)"

我不确定您是否对数学感兴趣，或者只是想要转换矩阵。如果你只想要最终的矩阵值，你可以看看这个小提琴：http://jsfiddle.net/mihaifm/PQvBj/

我使用getCTM 来获取矩阵a,b,c,d,e,f 值。

最终结果（假设旋转 45 度）：

<rect
   id="rect4"
   width="100"
   height="100"
   x="100"
   y="100"
   transform="matrix(0.7071067811865476, 0.7071067811865475, -0.7071067811865475, 0.7071067811865476, 150, -62.132034355964265)" />

【讨论】：