Zooming an object based on mouse position

Question

Hi, I've got a large large Sprite, and I want to zoom in and out keeping mouse position as the pivot point, exactly how google maps or the photoshop zoom works, when you rotate the mouse wheel.

To archieve the zoom effect I tween the scaleX and scaleY properties, but the fixed point is (0,0), while i need to be the mouse position (that changes everytime, of course).

How can I change this?

thanks.

Answer 1

I just did a Google search for "zoom about an arbitrary point" (minus the quotes) and the first result looks promising.

You have to take the original offset out the scale and then reapply it at the new scale. I've done this myself but don't have the code to hand right now, so I'll see if I can dig it out and post it later.

The pseudo code for this is something like this (from memory):

float dir = UP ? 1 : -1;
float oldXscale = Xscale;
float oldYscale = Yscale;
Xscale += dir * increment;
Yscale += dir * increment;
newX = (oldX - Xoffset) / Xscale;
newY = (oldY - Yoffset) / Yscale;
Xoffset += (newX * oldXscale) - (newX * Xscale);
Yoffset += (newY * oldYscale) - (newY * Yscale);

Anything not declared is a "global"

Answer 2

Found out by searching the right words on google ... This link explains the Affine Transformations http://gasi.ch/blog/zooming-in-flash-flex/ and so I can Tween the transformation Matrix:

var affineTransform:Matrix = board.transform.matrix;
affineTransform.translate( -mouseX, -mouseY );
affineTransform.scale( 0.8, 0.8 );
affineTransform.translate( mouseX, mouseY );
var originalMatrix:Matrix = board.transform.matrix;
TweenLite.to(originalMatrix, 0.7, {a:affineTransform.a, b:affineTransform.b, c:affineTransform.c, d:affineTransform.d, tx:affineTransform.tx, ty:affineTransform.ty, onUpdate:applyMatrix, onUpdateParams:[originalMatrix]});

:-)