放大與縮小手勢（1）

放大與縮小手勢對應(yīng)TransformGestureEvent. GESTURE_ZOOM事件類型，使用時要求兩個手指觸摸屏幕，同時向外或向內(nèi)做放縮動作，如圖3-2所示。

圖3-2　放縮手勢

放縮手勢操作起來簡單且直觀，在觸摸屏設(shè)備上的應(yīng)用范圍很廣，比如瀏覽網(wǎng)頁時控制頁面上的字體大小，查看地圖時控制地圖的縮放級別等。

下面的實例程序GestureZoom演示了如何使用ZOOM手勢來控制圖片的放縮。對loader對象添加手勢監(jiān)聽器，事件響應(yīng)函數(shù)根據(jù)手勢動作，實現(xiàn)放大或縮小加載的圖片。主程序Main.as的代碼如下：

package  
{  
import flash.display.Loader;  
import flash.display.Sprite;　  
import flash.events.Event;  
import flash.events.TransformGestureEvent;  
import flash.geom.Point;  
import flash.net.URLRequest;  
　  
public class Main extends AppBase  
{  
private var loader:Loader;  
　  
　override protected function init():void  
　{  
　　//使用Loader對象加載圖片  
　　loader = new Loader();  
　　loader.contentLoaderInfo.addEventListener(Event.COMPLETE, onLoadComplete);  
　　addChild(loader);  
　　//加載目錄下的圖片  
　　loader.load( new URLRequest("dog.jpg") );  
　}　　  
　//處理加載事件  
　private function onLoadComplete(e:Event):void  
　{  
　　loader.contentLoaderInfo.removeEventListener(Event.COMPLETE, onLoadComplete);  
　//判斷設(shè)備是否支持手勢事件  
　if ( Multitouch.supportsGestureEvents )  
　{  
　//對loader對象添加手勢事件監(jiān)聽器  
　loader.addEventListener(TransformGestureEvent.GESTURE_ZOOM, onZoom);  
　}  
　}  
　//響應(yīng)放縮手勢  
　private function onZoom(e:TransformGestureEvent):void  
　{  
　　//記錄下手勢作用點的位置，采用loader對象中的本地坐標(biāo)  
　　var p:Point = new Point( e.localX, e.localY );  
　　//將坐標(biāo)轉(zhuǎn)換為父級容器的本地坐標(biāo)  
　　var parent_p:Point = this.globalToLocal(loader.localToGlobal(p));  
　　//對loader對象做放縮處理  
　　loader.scaleX *= e.scaleX;  
　　loader.scaleY *= e.scaleY;  
　　//loader對象縮放后，p點在loader對象中的坐標(biāo)沒有變，但在父級容器中的坐標(biāo)已發(fā)生變化，因此要//重新計算  
　　var parent_p2:Point = this.globalToLocal(loader.localToGlobal(p));  
　　//移動loader，使得點p在父級容器的坐標(biāo)保持不變  
　　loader.x += (parent_p.x - parent_p2.x);  
　　loader.y += (parent_p.y - parent_p2.y);  
　}  
} 

在本例中，使用Loader對象加載程序目錄下的圖片。加載完成后，對loader對象添加手勢事件監(jiān)聽器，代碼如下：

if ( Multitouch.supportsGestureEvents )  
{  
　loader.addEventListener(TransformGestureEvent.GESTURE_ZOOM, onZoom);  
} 

3.3.1　放大與縮小手勢（2）

由于Multitouch類的inputMode屬性默認(rèn)為處理手勢事件，因此無需更改交互模式即可處理手勢事件。使用手勢事件之前，對Multitouch類的supportsGestureEvents屬性做判斷是一個好習(xí)慣。事實上，僅僅做這一個判斷并不能確保設(shè)備就一定會支持所有的手勢。要做到萬無一失，還需要檢查Multitouch的supportedGestures屬性，檢查的過程如下：

var index:int = -1;  
if ( Multitouch.supportedGestures != null )  
{  
index = Multitouch.supportedGestures.indexOf(TransformGestureEvent.GESTURE_ZOOM);  
}  
if(Multitouch.supportsGestureEvents && index != -1 )  
{  
//添加其他代碼  
} 

supportedGestures是一個Vector類型的數(shù)組，包含了設(shè)備支持的所有手勢類型。每個元素代表一個事件類型，如果設(shè)備任何一個手勢都不支持，supportedGestures的值為null。因此，要檢測設(shè)備是否支持某個手勢，可以使用Vector的indexOf方法進行查找，確保代碼在設(shè)備上能夠正確運行。

處理GESTURE_ZOOM 事件時，使用TransformGestureEvent 對象的scaleX與scaleY，即可分別獲取水平方向與垂直方向的縮放值。如果手指向外滑動，表示放大，對應(yīng)的scaleX與scaleY值大于1，反之小于1。因此，用以下兩行代碼就可以實現(xiàn)放縮控制：

loader.scaleX *= e.scaleX;  
loader.scaleY *= e.scaleY; 

如果只是簡單地對loader對象做放縮處理，會帶來一個問題，那就是每次都是以loader的原點為中心點進行縮放。而符合邏輯的做法，應(yīng)該是以手勢動作的作用點為中心進行縮放。也就是說，要將手勢動作的作用點設(shè)置為loader對象的注冊點。雖然ActionScript并沒有提供修改可視元件注冊點的功能，但可以模擬這個行為。整個過程并不難，關(guān)鍵在于坐標(biāo)轉(zhuǎn)換，步驟如下：

步驟1　記錄手勢作用點在loader對象中的本地坐標(biāo)，記為點p，它將是新的“注冊點”。

步驟2　以loader對象的父級容器為參照物，計算出點p在父級容器中的本地坐標(biāo)，記為點parent_p。

步驟3　對loader對象進行縮放。

步驟4　計算縮放后點p在父級容器中的本地坐標(biāo)，記為點parent_p2。

步驟5　移動loader對象的坐標(biāo)，讓點p在父級容器中的坐標(biāo)保持不變。

第5步操作的原理是：點p是loader對象的本地坐標(biāo)，因此對loader對象進行縮放并不影響點p的值，但點p相對父級容器而言位置發(fā)生了變化，所以，根據(jù)縮放前后點p在父級容器中的位移，更改loader對象的坐標(biāo)，就能夠讓點p在父級容器的坐標(biāo)保持不變，從而達(dá)到了更改loader對象注冊點的目的。起決定性作用的兩行代碼如下：

loader.x += (parent_p.x - parent_p2.x);  
loader.y += (parent_p.y - parent_p2.y); 

請注意，程序GestureZoom的屏幕朝向設(shè)置為橫屏模式，在程序描述文件中對應(yīng)的設(shè)置項如下：

<aspectRatio>landscape</aspectRatio> 

到這里，一個簡單的圖片放大鏡就完工了。

注意　程序中使用的圖片放在bin目錄中，和其他文件一起被包含在APK文件中，與主SWF文件位于同一目錄結(jié)構(gòu)，因此使用相對路徑就可以直接加載。