如何在矩陣旋轉後得到正確的x，y位置？

Question

我在論壇中搜索了很多東西，當然在這裏，但我還沒有找到明確的解決方案。我發現了similar issues，但它不起作用。

當我畫一個矩形時，Inkscape給我從它的確切的x和y位置。但是，當我旋轉時，它會將x和y位置更改爲不可理解的值。例如：

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

這是確定的，但在旋轉時，看看 「改造」 的屬性，並在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 = 100 Y = 100從x = 4.9 ...和y = 154.9 ...或從矩陣值？

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