Search code examples
actionscript-3flash

As3 Pinch Zoom picture from point of gesture keeping ratio


I am using below code to Zoom In/Out + Panning from point of gesture, works great for X/Y zoom gestures together, but it lost ratio scale if you do only X or only Y.

It is just a single MC "largeImageContainer", easy to duplicate the issue on Touch and Gesture over animate.

Any help will be really appreciated ;)

import flash.events.TransformGestureEvent;
import flash.ui.Multitouch;
import flash.ui.MultitouchInputMode;
import fl.motion.MatrixTransformer;

Multitouch.inputMode = MultitouchInputMode.GESTURE;
stage.addEventListener(TransformGestureEvent.GESTURE_ZOOM, onZoom);
function onZoom(event: TransformGestureEvent): void {
    //trace(e.localX);
    var locX: Number = event.localX;
    var locY: Number = event.localY;
    var stX: Number = event.stageX;
    var stY: Number = event.stageY;
    var prevScaleX: Number = largeImageContainer.scaleX;
    var prevScaleY: Number = largeImageContainer.scaleY;
    var mat: Matrix;
    var externalPoint = new Point(stX, stY);
    var internalPoint = new Point(locX, locY);

    largeImageContainer.scaleX *= event.scaleX;
    largeImageContainer.scaleY *= event.scaleY;

    if (event.scaleX > 1 && largeImageContainer.scaleX > 6) {
        largeImageContainer.scaleX = prevScaleX;
        largeImageContainer.scaleY = prevScaleY;
    }

    if (event.scaleY > 1 && largeImageContainer.scaleY > 6) {
        largeImageContainer.scaleX = prevScaleX;
        largeImageContainer.scaleY = prevScaleY;
    }

    if (event.scaleX < 1.1 && largeImageContainer.scaleX < 1) {
        largeImageContainer.scaleX = prevScaleX;
        largeImageContainer.scaleY = prevScaleY;
    }

    if (event.scaleY < 1.1 && largeImageContainer.scaleY < 1) {
        largeImageContainer.scaleX = prevScaleX;
        largeImageContainer.scaleY = prevScaleY;

    }
    mat = largeImageContainer.transform.matrix.clone();
    MatrixTransformer.matchInternalPointWithExternal(mat, internalPoint, externalPoint);
    largeImageContainer.transform.matrix = mat;
}

largeImageContainer.addEventListener(MouseEvent.MOUSE_DOWN, f_begin);
largeImageContainer.addEventListener(MouseEvent.MOUSE_UP, f_end);
function f_begin(e: MouseEvent): void {
    largeImageContainer.startDrag();
}
function f_end(e: MouseEvent): void {
    largeImageContainer.stopDrag();
}

Solution

  • Actually this did it what i want ;) keeping the ratio since i am focusing on Y more than X.

    largeImageContainer.scaleX *= event.scaleY;
    largeImageContainer.scaleY *= event.scaleY;