Flex GestureZoom not working properly specific area

Question

I tried zoom in and out functionality for android mobile ,by using transformGestureEvent.GESTURE_ZOOM but it does not zooming properly ,because it's always zoom center point only not exact between two fingers within content (specific area).

I tried below 3 functions sample for zoom in and out

        1.  private function onZoom(e:TransformGestureEvent):void/* not working properly  */
        {
            swfLoader.scaleX *= e.scaleX;
            swfLoader.scaleY *= e.scaleY;
        }
        2. private function onZoom(e:TransformGestureEvent):void/* not working properly  */
        {
            swfLoader.scaleX *= (e.scaleX+e.scaleY)/2;
            swfLoader.scaleY *= (e.scaleX+e.scaleY)/2;
        }3. private function onZoom(e:TransformGestureEvent):void
        {
            // scale the view
            swfLoader.scaleX *= e.scaleX;
            swfLoader.scaleY *= e.scaleY;

            var bounds2:Rectangle = swfLoader.content.getBounds(swfLoader.stage);
            var dx:Number = bounds2.x - bounds1.x;
            var dy:Number = bounds2.y - bounds1.y;
            var dw:Number = bounds2.width - bounds1.width;
            var dh:Number = bounds2.height - bounds1.height;

            // move the view to keep it centered while zooming
            swfLoader.x -= dx + dw/2;
            swfLoader.y -= dy + dh/2; 

        }<s:BorderContainer id="contentPanel" width="100%" height="100%" backgroundColor="#cccccc" >
    <s:Scroller id="scroller" width="100%" height="100%"   >
                <s:VGroup id="swfloadergroup" width="100%" height="100%"  horizontalAlign="center" verticalAlign="middle"  >

                <s:SWFLoader id="swfLoader" smoothBitmapContent="true"  autoLoad="true" doubleClickEnabled="true"
                             maintainAspectRatio="true" gestureZoom="onZoom(event)" scaleContent="true" loadForCompatibility="true"  />

                <s:SWFLoader id="preLLoader" autoLoad="true"  width="30%" height="30%"
                             source="@Embed('assets/loading.swf')"
                             maintainAspectRatio="true" scaleContent="true "/>
                </s:VGroup> 

    </s:Scroller>
</s:BorderContainer>

So what did wrong in my code . how can i zoom exact content(specific area) between two fingers . if anybody know then Please let me know.

Valentin Simonov Valentin Simonov · Accepted Answer · 2012-02-22T15:45:20

TransformGestureEvent has localX and localY properties which contain coorinates of the center between two fingers.

Though you can't zoom an object from a non-center point without moving it so only by zooming gestures you can move even a 'stationary' one. To make the gesture look natural first you need to move your sprite by the difference between positions and then zoom it from specific point.

You will need oldLocalX and oldLocalY to keep old coordinates. Set these vars to current localX/localY when gesture.phase == GesturePhase.BEGIN. After that move your sprite by new delta.

To zoom an object from a specific point do the following:

var matrix:Matrix = this.transform.matrix;
matrix.translate(-event.localX, -event.localY);
matrix.scale(event.scaleX, event.scaleY);
matrix.translate(event.localX, event.localY);
this.transform.matrix = matrix;

Flex GestureZoom not working properly specific area

2 Answers