Question

我在论坛上搜索了很多，当然在这里，但我还没有找到明确的解决方案。我找到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？

Answer 1

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

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

在您的情况下，transform属性类似于：

 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)" />

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

1 个答案: