从矩阵中获取角度

Question

我知道一个矩阵 [x缩放，y倾斜，x倾斜，y缩放，x平移，y平移]，想要得到以度为单位的角度。

谢谢！

- kreek

---

被旋转对象的中心，其边界将始终为矩形。 - kreek

我还应该补充一点，矩阵可能包含比纯旋转更多的缩放信息。 - kreek

你是在问这个问题吗：给定一个包含缩放和倾斜元素的变换矩阵，如何计算出等效的旋转角度？ - Dancrumb

从变换矩阵中获取角度。 - kreek

Answer 1

非常简单

1：获取矩阵并保存在变量中。

matrix='matrix(0.8660254037844387, 0.49999999999999994, -0.49999999999999994, 0.8660254037844387, 0, 0)';

2：分割值

var values = matrix.split('(')[1],
    values = values.split(')')[0],
    values = values.split(',');

var sin = values[1]; // 0.5

3: 计算角度

var angle = Math.round(Math.asin(sin) * (180/Math.PI));

结果：

function convertToAngle(matrix) {
     var values = matrix.split('(')[1],
        values = values.split(')')[0],
        values = values.split(',');

    var sin = values[1]; // 0.5

    return Math.round(Math.asin(sin) * (180/Math.PI));
}

- Behnam

---

简单而高效！ :) - Rafael Moni

所有我需要的就是这个公式（Math.round(Math.asin(sin) * (180/Math.PI))），然后它就像魔法般地工作了。 - oldboy

Answer 2

考虑以下矩阵：

| x_sc  y_sk  0  |
| x_sk  y_sc  0  |
| x_tr  y_tr  1  |

在这里，sk表示倾斜，sc表示缩放，tr表示平移。

只有当三个参数都为真时，这才代表纯旋转。

y_sk == -x_sk
y_sc == x_sc
x_sc * y_sc - x_sk * y_sk == 1

在这种情况下，如果theta是旋转角度，则

theta == arcos(x_sc)

这将以弧度形式（很可能）给出答案，因此您需要转换为角度。

假设您有一个名为M的对象，表示矩阵，该对象的属性与上述定义相匹配，您可以进行以下操作：

function toPureRotation(var M) {
    if( (M.y_sk != (-1 * M.x_sk)) ||
        (M.y_sc != M.x_sc) ||
        ((M.x_sc * M.y_sc - M.x_sk * M.y_sk) != 1)
    ) {
        return Number.NaN;
    }
    else {
        return Math.acos(M.x_sc); // For radians
        return Math.acos(M.x_sc) * 180 / Math.PI; // For degrees
    }
}

编辑

对于一个纯旋转后跟（或先跟）一个维持宽高比的缩放变换：

| sc   0  0 |
|  0  sc  0 |
|  0   0  1 |

然后您可以使用以下身份验证：

x_sc * y_sc - x_sk * y_sk == sc^2

这让我们...

function toRotation(var M) {
    if( (M.y_sk != (-1 * M.x_sk)) ||
        (M.y_sc != M.x_sc)
      )
    ) {
        return Number.NaN;
    }
    else {
        var scale_factor = Math.sqrt((M.x_sc * M.y_sc - M.x_sk * M.y_sk));
        return Math.acos(M.x_sc/scale_factor); // For radians
        return Math.acos(M.x_sc/scale_factor) * 180 / Math.PI; // For degrees
    }
}

如果您想考虑翻译，那么您将进入一个困难的世界。

- Dancrumb

---

这是纯旋转的正确答案，但对象可能也被缩放了。 - kreek

"你正在进入一个痛苦的世界"，这让我笑了，感谢你的回答。 - kreek

Answer 3

我在这里留下此内容以供日后参考。我已经创建了一个快速的jQuery方法，试图计算给定HTML元素的旋转角度。希望这能够为别人节省我所遇到的麻烦。 https://gist.github.com/1492454

- Wilhelm Murdoch