math - SVG 矩阵到旋转度数

Question

我正在从具有以下格式矩阵的 SVG 文件中读取矩形的位置和旋转:

<rect transform="matrix(1.02414 -0.133308 0.122628 0.942091 190.767 780.999)" width="122" height="20"/>

现在我试图将这些值解析为 Lua 到 draw with Corona and physics like this ，但它们部分出现错误，并且在我目前的半猜测方法中也经常出现 NAN。 我需要做什么才能将上述矩阵转换为适当的 Lua 旋转度数？

我目前所拥有的如下(值数组是按 SVG 顺序排列的矩阵值)。谢谢!

local x = values[5]; local y = values[6]
local rotation = math.acos(values[1])
if values[2] < 0 then rotation = -rotation end
rotation = math.floor( math.deg(rotation) )
rotation = rotation % 360

app.spritesHandler:createBar( math.floor(x), math.floor(y), rotation )

Answer 1

首先，我认为您需要从 0 到 5 进行索引，而不是从 1 到 6。

根据 the spec ，旋转矩阵为:

a  c  e
b  d  f
0  0  1

其中 a-f 是矩阵列表中的 6 个数字。

我们还发现围绕 cx,cy 的 rotate(angle,cx,cy) 等价于

1. 翻译(cx,cy)
2. 旋转(角度)
3. 翻译(-cx,-cy)

这将是:

|1 0 cx|  |cos(t) -sin(t) 0|  |1 0 -cx|
|0 1 cy|  |sin(t)  cos(t) 0|  |0 1 -cy|
|0 0 1 |  |  0       0    1|  |0 0  1 |

  |cos(t)   -sin(t)  cx|  |1 0 -cx|
= |sin(t)    cos(t)  cy|  |0 1 -cy|
  |   0        0      1|  |0 0  1 |

  |cos(t)   -sin(t)  (-cx cos(t) + cy sin(t) + cx) |
= |sin(t)    cos(t)  (-cx sin(t) - cy cos(t) + cy) |
  |  0         0              1                    |

因此这表明角度信息在系数 a、b、c 和 d 中完全独立可用。如果唯一应用的是这个矩阵，那么 a 和 d 应该匹配，b 和 c 应该正好相反。

但是，查看您的数字列表，它们不是，所以我想知道是否也应用了其他一些转换？正如评论者指出的那样，数字大于 1，因此不是对角度进行简单三角运算的结果。

一种可能性是也有缩放。该矩阵是:

| sx 0  0|
|  0 sy 0| 
|  0  0 1|

所以如果先应用它，然后再旋转，我们将得到:

| sx 0  0| |cos(t)   -sin(t)  (-cx cos(t) + cy sin(t) + cx) |
|  0 sy 0| |sin(t)    cos(t)  (-cx sin(t) - cy cos(t) + cy) |
|  0  0 1| |  0         0              1                    |

  |sx cos(t)   -sx sin(t)   sx (-cx cos(t) + cy sin(t) + cx) |
= |sy sin(t)    sy cos(t)   sy (-cx sin(t) - cy cos(t) + cy) |
  |  0               0                  1                    |

从那个矩阵:

a/c = sx cos(t) / (-sx sin(t))
    = - cos(t) / sin(t)
    = 1/tan(t)
tan(t) = c/a

tan(t) = 0.122628/1.02414
       = 0.119738
    t  = 6.82794 degrees.

从图像上看，我认为这看起来是正确的。

既然我们知道t，我们就可以算出sx和sy:

a = sx cos(t) 
sx = a/cos(t) = 1.0315

和系统:

d = sy cos(t)
sy = d/cos(t) = 0.94882

获取 cx 和 cy 以找到旋转中心，然后使用我们已经获得的值进一步代入上述 e 和 f 的方程。