Zoom to and from point

Question

I'm trying to zoom a DisplayObject into a certain point. I figured it would be easy, but I've spent a day now trying to figure it out.

Basically, I think this should work. Emphasis on should.

//newPoint is the point being centered. There is no initial scaling, so I do not need to compensate for that (yet)
//scale is the zoom level
//container is the parent of the obj
//obj is the object being scaled/panned
var p:Point = new Point(
    ( this.container.width - this.obj.width * scale + newPoint.x * scale ) / 2, 
    ( this.container.height - this.obj.height * scale + newPoint.y * scale ) / 2 
);

this.obj.scaleX = this.obj.scaleY = scale;
this.obj.x = p.x;
this.obj.y = p.y;

It centers the point if scale is 1, but it gets further and further away from center as you increase the scale. I've tried dozens of different methods. This method, which I have seen on several sites, produced the same exact results. Anyone have any idea how to get this to work?

EDIT 10-1-12: As a followup, I took the code snippet that LondonDrugs_MediaServices provided as a basis for my original issue. I needed to be able to zoom to a specific point at a specific scale relative to the unscaled image (think how Google Maps zooms to a specific location). To do this, I had to center my image on the point before running the translation code. I've posted the additional code below. For other uses (pinch to zoom, scrolling, and double click), I used the code provided by Vesper, which worked quite well.

//obj is the object being translated
//container is its parent
//x and y are the coordinates to be zoomed to, in untranslated scaling
//obj.scaleX and obj.scaleY are always identical in my class, so there is no need to account for that


//calculates current center point, with scaling
var center:Point = new Point( ( this.container.width - this.obj.width * this.obj.scaleX ) / 2, ( this.container.height - this.obj.height * this.obj.scaleX ) / 2 );

//calulcates the distance from center the point is, with scaling
var distanceFromCenter:Point = new Point( this.obj.width * this.obj.scaleX / 2 - x * this.obj.scaleX, this.obj.height * this.obj.scaleX / 2 - y * this.obj.scaleX );

//center the object on that specific point
this.obj.x = center.x + distanceFromCenter.x;
this.obj.y = center.y + distanceFromCenter.y;

Answer 1

hie guys.... thank's your comments... i found the answer... code :

gambar.addEventListener(TransformGestureEvent.GESTURE_ZOOM , onZoom);
function onZoom(event:TransformGestureEvent):void {

    var locX:Number=event.localX;

    var locY:Number=event.localY;

    var stX:Number=event.stageX;

    var stY:Number=event.stageY;

    var prevScaleX:Number=gambar.scaleX;

    var prevScaleY:Number=gambar.scaleY;

    var mat:Matrix;

    var externalPoint=new Point(stX,stY);

    var internalPoint=new Point(locX,locY);

    gambar.scaleX *= event.scaleX;

    gambar.scaleY *= event.scaleY;

     if(event.scaleX>1 && gambar.scaleX>6){

         gambar.scaleX=prevScaleX;

         gambar.scaleY=prevScaleY;

       }

     if(event.scaleY>1 && gambar.scaleY>6){

         gambar.scaleX=prevScaleX;

         gambar.scaleY=prevScaleY;

       } 

      if(event.scaleX<1 && gambar.scaleX<0.8){

         gambar.scaleX=prevScaleX;

         gambar.scaleY=prevScaleY;

       }

     if(event.scaleY<1 && gambar.scaleY<0.8){

         gambar.scaleX=prevScaleX;

         gambar.scaleY=prevScaleY;

       }  

     mat=gambar.transform.matrix.clone();

     MatrixTransformer.matchInternalPointWithExternal(mat,internalPoint,externalPoint);

     gambar.transform.matrix=mat;

    }

Answer 2

The matrix answer is absolutely correct, but if you happen to be a Club GreenSock member you can get some nice functionality with very simple code with the TransformAroundPointPlugin

http://www.greensock.com/as/docs/tween/com/greensock/plugins/TransformAroundPointPlugin.html

You can see an example in the plugin explorer here: http://www.greensock.com/tweenlite/#plugins

I use this to tween all my zooms and have much better performance than when I tried to do this manually. IMO the whole library is worth it's weight in gold (and no I have no connection other than liking the library). If you need any of the other features I'd look into it. It also has the ThrowProps plugin ( http://www.greensock.com/throwprops/ )which is very important if you are going to have a bounding box on mobile that you want to have a smooth return into the boundaries.

Answer 3

var mat:Matrix=new Matrix();
mat.translate(-p.x,-p.y);
mat.scale(desiredScale,desiredScale);
mat.translate(p.x,p.y);
yourObject.transform.matrix=mat;

The core point is that scaling is done around (0,0), but you can do it with matrix that describes affine transformations. You first make an empty matrix (that is, a matrix that doesn't transform), then apply a set of transformations to it. First, place a desired point at (0,0) by translating by -1*coordinates, then scale, then translate back.

Answer 4

Set obj.x to -p.x and obj.y to -p.y, set the container scaleX and scaleY to the desired value and add p.x to the container x and p.y to the container y. Done!