I'm using a Flash transformation matrix for affine transformation.

I have a rectangular image being rotated and scaled (in 2D). There are two sets of scaling variables, ScreenScaleX and ScreenScaleY, and ScaleX and ScaleY, as well as a counter-clockwise rotation angle, theta. ScreenScaleX and ScreenScaleY are the scaling factors of the window; they should be applied in directions of the original X and Y axes after rotating the image. ScaleX and ScaleY should be applied in the new X and Y directions after rotating the image.

For example: if theta is 90 degrees, ScreenScaleX and ScreenScaleY will still stretch in the direction of the original X/Y axes, but now ScaleY will stretch in the screen's X direction, and ScaleX will stretch in the screen's Y direction.

I think I can accomplish this with some combination of scaling, rotation, and skewing, but I'm struggling to figure out what the matrix would look like. How would I construct a matrix from these variables in order to perform this transformation?


I think I solved it. The answer is:

var matrix = new Matrix();
var cos = Math.cos(angle);
var sin = Math.sin(angle);
matrix.a = scaleX * cos * screenScaleX;
matrix.b = scaleX * sin * screenScaleY;
matrix.c = -scaleY * sin * screenScaleX;
matrix.d = scaleY * cos * screenScaleY;

This way, the screen can use non-uniform scaling without distorting rotated images.


You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .