Get angle from matrix

问题

I know a matrix [x scale, y skew, x skew, y scale, trans x, trans y], and would like to get the angle in degrees.

thanks!

回答1:

Consider the following matrix

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

with sk indicating skew, sc indicating scale and tr indicating translation.

This only represents a pure rotation if all three are true

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

In this case, if theta is the angle of rotation, then

theta == arcos(x_sc)

This will give you the answer in radians (most likely), so you'll need to convert to degrees.

Assuming you have an object called M, representing the matrix, the properties that match my definitions above, you could do:

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
    }
}

EDIT

For a pure rotation followed by (or preceded by) a scaling transform that maintains aspect ratio:

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

Then you can us the following identity:

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

This gives us

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
    }
}

If you want to factor in translations, you're entering a world of hurt.

回答2:

very simple

1: get matrix and save in variable

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

2: split value

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

var sin = values[1]; // 0.5

3: calc angle

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

result:

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));
}

回答3:

I'm just gonna place this here for future reference. I went ahead and created a quick jQuery method that attempts to calculate the angle of rotation of a given HTML element. Hopefully, this will save someone the trouble I had.

https://gist.github.com/1492454

来源：https://stackoverflow.com/questions/5072271/get-angle-from-matrix