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

您的代码中有两个问题：

  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; 0; 0 0 1]; 平移矩阵 = [1 0 x; 0 1 岁；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 回答