1
\$\begingroup\$

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?

\$\endgroup\$
1
\$\begingroup\$

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.

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.