[ActionScript] 手勢操作系列(四)-Zoom Gesture 中心點縮放(central point scale)

在手勢操作系列(三)介紹了Flash所支援的Zoom Gesture，也實作了簡單的縮放功能，User只要將兩指放到縮放物件上使用Pinch手勢，TransformGesture Event就會自動取得Scale Rate，縮放功能可以利用這個Rate動態的進行物件的縮放。

上一篇作法的最大限制是物件縮放點都在左上(一般物件的預設註冊點，除非是使用Flash IDE針對元件進行註冊點更改)，而一般常見的Zoom Gesture都是以兩指中點或是物件中心點來進行縮放，因此，本篇文章將針對如何實作一個可由中心點進行手勢縮放的物件進行說明(以Flex為例)。


實作以中心點進行手勢縮放的Image Class

1、判斷目前執行環境是否支援手勢輸入，如果支援就註冊Zoom Gesture Listener

//whether support gesture or not(確認是否支援gesture)
if(Multitouch.supportsGestureEvents){
  //Register 註冊Gesture Zoom事件傾聽函式)
  addEventListener(TransformGestureEvent.GESTURE_ZOOM, zoomHandler);
}

2、在Zoom Gesture Event Listener中實作以物件中心點進行縮放功能

/**Gesture Zoom Event Handler(zoom手勢事件處理函式)*/
private function zoomHandler(e:TransformGestureEvent):void{
  //get Image's matrix(取得目前圖片的matrix)
  var zoomMatrix:Matrix = this.transform.matrix;
  //get central point
  var zoomPoint:Point = zoomMatrix.transformPoint(new Point((width/2), (height/2)));
  //將image的中心點移至(0,0)的位置
  zoomMatrix.translate(-zoomPoint.x, -zoomPoint.y);
  //從TransformGestureEvent取得Scale Rate
  zoomMatrix.scale(e.scaleX, e.scaleY);
  //將中心點移回原來位置
  zoomMatrix.translate(zoomPoint.x, zoomPoint.y);
  //set scled matrix to image
  this.transform.matrix = zoomMatrix;
}

3、實際測試
將可縮放的圖片類別加入至Flex Application並發佈到支援Gesture Input的Device就可以看到以中心點進行縮放的效果了。

中心點縮放的實作細節

本文是透過變更Image的Matrix來進行中心點縮放，Matrix常用來進行DisplayObject的各種變形，像是：平移(translate)、縮放(scale)、rotate(旋轉)、傾斜(skew)等，你可以建立Matrix物件來進行各種變形處理後，將其設定為DisplayObject Transform物件的matrix屬性就可以達到變形的效果。以下將針對以中心點進行縮放的實作細節進行說明：

a. 取得目前該圖的Matrix
首先以Transform類別的matrix屬性取得目前套用至該Image的Matrix，它將會是接下來進行變形操作的目標。

var zoomMatrix:Matrix = this.transform.matrix;

b. 取得圖片中心點
再來取得圖片中心點，中心點的算法就是(width/2, height/2)，但這個點必須以圖片左上角的位置在(0,0)為前提，為了要取得正確的中心點，使用matrix提供的transformPoint()方法，將正確的中心點取得(見下圖)。

zoomMatrix.transformPoint(new Point((width/2), (height/2)));

c. 將中心點移至(0,0)的位置並進行縮放
這是中心縮放的重要步驟，將任一圖型的中心點移至(0,0)的位置，會讓圖型不論是在x軸或y軸方向都會有一半在正坐標另一半在負座標，再運用scale(sx, sy)的定義：將x軸上的所有pixel位置乘以sx，將y軸的所有pixel位置乘上sy。

你會發現處在x負座標值的像素會往左scale(因為負值座標乘正整數將會愈往左)，而另一半x正座標值的像素會往右scale，y座標軸也是同樣道理，藉由這樣作達到中心點縮放的效果(以中心為縮放點，像素平均scale)。

zoomMatrix.translate(-zoomPoint.x, -zoomPoint.y);
zoomMatrix.scale(e.scaleX, e.scaleY);

d. 最後將圖移回原來位置，完成中心點縮放

zoomMatrix.translate(zoomPoint.x, zoomPoint.y);