7

デフォルトでは、回転行列は原点を回転の中心として使用します。任意の点を中心に回転するには、平行移動行列を使用して原点までの距離を減算し、回転を行ってから、逆に平行移動する必要があります。これが私にとってあまりうまく機能していないように見えることを除いて。私は次のコードを持っています（私のオブジェクトが100x100で、中心が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に組み込まれているtransform-originの提供）、青い回転した正方形は計算が終了する場所です（緑は元の回転していない正方形でした）。 ）。

何か案は？翻訳、回転、逆翻訳のメカニズムがどのように機能するかを理解していないだけですか、それともひどく間違ったことをしていますか？

4

2 に答える 2

2

コードには2つの問題があります。

  1. 行列の乗算は、おそらく意図したのとは逆の順序で実行されます。rotate(t, theta)適用した後に回転が続く行列を返すつもりのように見えますtが、実際には逆です。回転はの前に適用されtます。matrixMultiplyinrotateと。の呼び出しでパラメータの順序を逆にする必要がありますtranslate。

  2. CSSmatrix関数のパラメーターの順序が間違っています。する必要がありますa11, a21, a12, a22, a13, a23。あなたが渡しているのはですa11, a12, a21, a22, a13, a23。

これが修正バージョンです。

于 2012-10-22T18:18:46.467 に答える
0

最初に2dの場合の「標準」3x3行列乗算を実装し、ゼロを乗算した結果として生じる要素を最適化しようとした後にのみ実装してみてください。インデックス付けスキームがあまりにも非正統的である場合、式が正しいかどうかを確認するのは少し難しいです。

回転行列=[c-s 0; sc 0; 0 0 1]; 変換行列=[10 x; 01年; 0 0 1];

css-translation関数も3x3の結果を想定していると想定する必要があります。

乗算と回転の両方は、ベクトル（x、y、1）に対応する行列を乗算することによって実行されます。

編集：少しいじった後、行列mを変換するか、演算子を次のように定義できるようです。 return MatMul([rot matrix],m) and return MatMul([trans matrix],m)

EDIT2：今、私は奇妙な何かを見ることができます：+ -50、+ -50だけ平行移動し、約10度回転すると、角は赤い正方形の真ん中に留まりません。しかし、とにかくcss行列の形式を理解しないでください。ごめん...

于 2012-10-22T15:25:11.473 に答える