ActionScript 3 Issues with zooming and scrolling - actionscript-3

Question

I am using TransformGestureEvent and StartDrag and StopDrag events and I am having some issues.
I will do my best to explain, When I zoom in, my image zooms in and its centered while zooming. After I zoom in, I start to drag to the top of my image, when I reach the top I cant scroll now more (everything is working as expected so far) but when I goto zoom out my image y axis is no longer at the top, there is a blank white space where my image should be.
Here is my code:
mapMC.addEventListener(TransformGestureEvent.GESTURE_ZOOM, zoom);
mapMC.addEventListener(MouseEvent.MOUSE_DOWN, dragStart);
mapMC.addEventListener(MouseEvent.MOUSE_UP, dragEnd);
//Zooming Method
function zoom (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=mapMC.scaleX;
var prevScaleY:Number=mapMC.scaleY;
var mat:Matrix;
var externalPoint=new Point(stX,stY);
var internalPoint=new Point(locX,locY);
mapMC.scaleX *= event.scaleX;
mapMC.scaleY *= event.scaleY;
if(mapMC.scaleX > 6){
mapMC.scaleX=prevScaleX;
mapMC.scaleY=prevScaleY;
}
if(mapMC.scaleY > 6){
mapMC.scaleX=prevScaleX;
mapMC.scaleY=prevScaleY;
}
if(mapMC.scaleX < 1){
mapMC.scaleX=1;
mapMC.scaleY=1;
}
if(mapMC.scaleY < 1){
mapMC.scaleX=1;
mapMC.scaleY=1;
}
mat=mapMC.transform.matrix.clone();
MatrixTransformer.matchInternalPointWithExternal(mat,internalPoint,externalPoint);
mapMC.transform.matrix=mat;
}
//Dragging Start Method
function dragStart(e:MouseEvent):void
{
mapMC.startDrag(false, new Rectangle(0,0,-mapMC.width + stage.stageWidth, -mapMC.height + stage.stageHeight));
}
//Dragging Stop Method
function dragEnd(e:MouseEvent):void
{
mapMC.stopDrag();
}
What I am expected to happen is to zoom in on centre, be able to scroll within the Rectangle in my startDrag and zoom out on center while the top of the image stays at the top of the stage and the left of the image stays on the left of the stage.
I have tried adding these two lines of code in my zoom method, it works but I cant zoom in on center:
mapMC.y = 0;
mapMC.x = 0;
Here is a link to a sample project that will show you what I mean
https://drive.google.com/open?id=0B-p_9V3gzZZTcXpQZzI0RU9ZY0k

Answer 1

Since the builtin touch gestures of Air are not very handy for this, I've implemented a selfmade zoom functionality using MultitouchInputMode.TOUCH_POINT.
import flash.events.Event;
import flash.geom.Rectangle;
import flash.events.MouseEvent;
import flash.ui.MultitouchInputMode;
import flash.events.TouchEvent;
import flash.geom.Point;
//Vars
var touchpoints:Array = []
var touch_mode:String = null
var touch_start:Point
var map_start:Point
var map_zoom:Number
var map_width:Number
var map_height:Number
var zoom_startdist:Number
//Config
var max_zoom:Number = 6
var min_zoom:Number = 1
var map_bounds:Rectangle = new Rectangle(0,0,mapMC.width,mapMC.height) // this defines the area in which the map should fit
//Allow Touch Gestures
Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;
//Zoom and Drag Event Listeners
stage.addEventListener(TouchEvent.TOUCH_BEGIN, touchBegin)
stage.addEventListener(TouchEvent.TOUCH_MOVE, touchMoved)
stage.addEventListener(TouchEvent.TOUCH_END, touchEnd)
// Touch Handlers
function touchBegin(e:TouchEvent){
if(touchpoints.length<2){ // only accept 2 active touchpoints, ignore the 3rd,4th,etc
touchpoints.push({id:e.touchPointID,x:e.stageX,y:e.stageY})
touchpointsChanged()
}
}
function touchMoved(e:TouchEvent){
var touchpoint:Object = getTouchPointById(e.touchPointID) // get current touchpoint...
if(touchpoint){
// ... and update the position
touchpoint.x = e.stageX
touchpoint.y = e.stageY
touchpointMoved()
}
}
function touchEnd(e:TouchEvent){
removeTouchPoint(e.touchPointID)
touchpointsChanged()
}
// Pan & Zoom logic
function touchpointsChanged(){
if(touchpoints.length==1){ // 1 touch point => panning
startPan()
}else if(touchpoints.length==2){ // 2 touch points => zooming
startZoom()
}
}
function startPan(){
touch_mode = 'pan'
touch_start = new Point(touchpoints[0].x,touchpoints[0].y)
map_start = new Point(mapMC.x,mapMC.y)
}
function startZoom(){
touch_mode = 'zoom'
touch_start = getZoomCenter()
zoom_startdist = getZoomDist()
map_start = new Point(mapMC.x,mapMC.y)
map_zoom = mapMC.scaleX
map_width = mapMC.width
map_height = mapMC.height
}
function touchpointMoved(){
switch(touch_mode){
case 'pan':
mapMC.x = map_start.x + touchpoints[0].x - touch_start.x
mapMC.y = map_start.y + touchpoints[0].y - touch_start.y
break
case 'zoom':
var current_scale:Number = map_zoom*getZoomFactor() // get current zoom factor (relative to the previous zoom of the map)
current_scale = Math.min(max_zoom,Math.max(min_zoom,current_scale)) // limit zoom (as defined in -> Config)
mapMC.scaleX = mapMC.scaleY = current_scale
// Set map position to the current center of zoom
var zoom_pos:Point = getZoomCenter()
mapMC.x = map_start.x + zoom_pos.x - touch_start.x
mapMC.y = map_start.y + zoom_pos.y - touch_start.y
// Correct map position regarding the scaling
mapMC.x += -(current_scale-map_zoom)*map_width*((touch_start.x-map_start.x)/map_width)/map_zoom
mapMC.y += -(current_scale-map_zoom)*map_height*((touch_start.y-map_start.y)/map_height)/map_zoom
break
}
// Make sure the map doesnt leave its defined area - see Config (map_bounds)
if(mapMC.x>map_bounds.x)
mapMC.x = map_bounds.x
else if(mapMC.x+mapMC.width<map_bounds.x+map_bounds.width)
mapMC.x = map_bounds.x+map_bounds.width-mapMC.width
if(mapMC.y>map_bounds.y)
mapMC.y = map_bounds.y
else if(mapMC.y+mapMC.height<map_bounds.y+map_bounds.height)
mapMC.y = map_bounds.y+map_bounds.height-mapMC.height
}
// Helper functions
function getTouchPointById(id:int):Object{
for(var i:uint=0;i<touchpoints.length;i++){
if(touchpoints[i].id==id)
return touchpoints[i]
}
return null
}
function removeTouchPoint(id:int){
for(var i:uint=0;i<touchpoints.length;i++){
if(touchpoints[i].id==id){
touchpoints.splice(i,1)
return
}
}
}
function getZoomCenter():Point{
//get the average of the 2 touchpoints
return new Point((touchpoints[0].x+touchpoints[1].x)/2,(touchpoints[0].y+touchpoints[1].y)/2)
}
function getZoomDist():Number{
// calculate the distance between the 2 touchpoints
return getDist(touchpoints[0].x,touchpoints[0].y,touchpoints[1].x,touchpoints[1].y)
}
function getZoomFactor():Number{
// calculate the difference of distance between the 2 touchpoints from when the zoom gesture started
return getZoomDist()/zoom_startdist
}
function getDist(x1:Number,y1:Number,x2:Number,y2:Number){
// pythagoras, yo
var deltaX:Number = x2-x1
var deltaY:Number = y2-y1
return Math.sqrt(deltaX*deltaX + deltaY*deltaY)
}
Let me know if anything is unclear, I'll try to add more comments.