How to reproduce an object's translation,rotation,scaling? (possibly language agnostic)

All,

I've got a rather frustrating problem that I think is simple, but my brain is just not working. In short, the problem is: given a sprite/image/thingy, you know that someone has rotated/translated/scaled the sprite, but you don't know the order in which these happen, how can you reproduce the exact开发者_如何学编程 image?

For illustration purposes -- Given an image like this:

Someone has the ability to rotate/translate/scale it so that it looks like this (What it looks like after manipulation --- there's two of them in this case...)

I know that the order of operations matter, that is if someone first rotates, then scales, then translates, you get a different image than if you were to do the reverse. The problem is that since I don't know the order beforehand, I am having a tough time reproducing the image. Here is what I get:

And here is what it looks like overlaid to give you an idea of how far off I am:

http://infinitetaco.com/pics/merged.png

I am setting the anchorPoints of the sprites to be at the center, so that isn't the issue. I am also taking into account the width/height of the scaled change, but for some reason it's always just a bit off. It seems that the more dramatic the amount of rotation, the further off my results are. In the right image you can see the result is perfect, but the left one, since there is significant rotation, it is way off.

I know this is probably an easy one, but I'd appreciate some help.

---

If you are limited to affine transformations (rotation, translation, scaling), then some linear algebra can give you transformation matrix.

You'll need the original bounding box of the sprite (x,y) and the transformed bounding box of the sprite (u,v). First remove the any translation by shifting the center of transformed coordinates to the center of the original coordinates. Now solve the equation below -- you have 4 unknowns and 4 equations, so just do some algebra to find a, b, c, and d.

[x1 x2 x3 x4; y1 y2 y3 y4] = [a b; c d]*[u1 u2 u3 u4; v1 v2 v3 v4]

For affine transformations, a, b, c, d follow this structure:

[sx*cos(theta) sy*sin(theta); -sx*sin(theta) sy*cos(theta)]

So you can reduce this down to scaling (sx, sy), rotation (theta), and you already computed the transformation.

There are probably faster ways to do this, but this method follows from first principles.

---

Solved! There were lots of stupid little things I did wrong, but the main bug was that the way I was calculating the center point of rotation was based on the upper left hand corner and not the center!