关于任意点的旋转矩阵

Question

默认情况下,旋转矩阵使用原点作为旋转的中心.要围绕任意点旋转,您必须使用平移矩阵减去到原点的距离,进行旋转,然后平移.除了这对我来说似乎没有那么好用.我有以下代码(假设我的对象是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内置的变换原点提供),蓝色旋转的方块是我的计算结束的地方(绿色将是原始的非旋转方块) ).

有任何想法吗？我只是不明白翻译,旋转,翻译机制是如何运作还是我做了一些可怕的错误？

Answer 1

您的代码中有两个问题：

1. 矩阵乘法的执行顺序与您可能想要的相反。看起来您打算rotate(t, theta)返回一个先应用t后旋转的矩阵，但实际上恰恰相反 - 旋转将先应用t。matrixMultiply您需要颠倒inrotate和调用中的参数顺序translate。

2. CSS 函数的参数matrix顺序错误。它应该是a11, a21, a12, a22, a13, a23。你传递的是a11, a12, a21, a22, a13, a23.

这是固定版本。