關於任意點的旋轉矩陣

默認情況下，旋轉矩陣使用原點作爲旋轉中心。要圍繞任意點旋轉，您必須使用平移矩陣減去到原點的距離，旋轉，然後再平移。除此之外，這對我來說似乎沒有那麼好。我有以下代碼（假設我的目標是100×100與50,50中心）：關於任意點的旋轉矩陣

t = IDENTITY; 
t = translate(t, -50, -50); 
t = rotate(t, theta); 
t = translate(t, 50, 50);

不幸的是，如果我申請這個變換矩陣t我的對象，該對象的位置不正確。

我已經實現了一個快速的jsfiddle來證明我的問題：http://jsfiddle.net/9M3uy/67/

在的jsfiddle，紅色旋轉的廣場就是旋轉應該已經結束了（CSS3內置的變換起源提供），以及藍色旋轉正方形是我的計算結束的地方（綠色將是原始的非旋轉正方形）。

任何想法？我只是不理解如何翻譯，旋轉，翻譯機械工作，或者我在做一些可怕的錯誤？

來源

2012-10-22 syazdani

我看不到綠色... –

您必須使用Chrome或Safari。我更新了JSFiddle以包含所有瀏覽器所需的CSS。 – syazdani

是的！但是，你似乎找到了答案！我來得太晚了 –

有兩個問題在你的代碼：

矩陣乘法以相反的順序可能比你打算做。它看起來像你打算rotate(t, theta)返回一個矩陣，適用t後跟一個旋轉，但實際上是相反的 - 旋轉將在t之前應用。您需要在rotate和translate中調用matrixMultiply中的參數順序。
CSS matrix函數的參數順序錯誤。它應該是a11, a21, a12, a22, a13, a23。你傳遞的是a11, a12, a21, a22, a13, a23。

這是fixed version。

來源

2012-10-22 18:18:46 interjay

這是interjay的固定版本的優化版本。 http://jsfiddle.net/orwellophile/hvvo9oh8/ – Orwellophile

嘗試首先執行2d個「標準」3x3矩陣乘法，並且只在嘗試優化零部件後得出的結果。當索引方案太不正統時，看看公式是否正確有點難。

旋轉矩陣= [c -s 0; s c 0; 0 0 1]; 翻譯矩陣= [1 0 x; 0 1 y; 0 0 1];

我不得不假設css-翻譯功能也假設3x3結果。

乘法和旋轉都是通過將矢量（x，y，1）乘以相應的矩陣來執行的。

編輯：擺弄了一下後，似乎無論是矩陣米應該翻譯，或者運營商可以定義爲 return MatMul([rot matrix],m) and return MatMul([trans matrix],m)

EDIT2：現在我可以看到一些奇怪的事情：只有通過翻譯+ -50，+ -50並旋轉〜10度，拐角不會停留在紅色正方形的中間。但不管怎樣，都不明白css矩陣的格式。對不起......

來源

2012-10-22 15:25:11

我更新了這個例子是完整的3x3乘法：http://jsfiddle.net/9M3uy/5/。 css變換（我認爲這就是你的意思）以矩陣形式：矩陣（a，b，c，d，tx，ty）'（它放下第三行）。 – syazdani

您必須使用Chrome或Safari（或其他基於Webkit的瀏覽器）。默認情況下，CSS中變換的原點位於中心，如果您沒有更改CSS中的任何內容，則由我的代碼計算出的矩陣似乎可以工作，但僅僅是因爲瀏覽器正在爲您定位旋轉。如果您查看更新的小提琴，我將所有瀏覽器的原點設置爲0,0，您將看到您的建議更改不起作用。 – syazdani

關於任意點的旋轉矩陣

回答

相關問題