Flex4.6【原创】移动设备拖曳、缩放、旋转手势并用(避免冲突)

Flex4.6 移动设备拖曳、缩放、旋转手势并用（避免冲突）

　　最近工作忙，做移动设备这块，发现flex4.6的源生手势事件没有避免拖曳、缩放、旋转之间的冲突问题，在googlecode找了找，发现这个比较好用且易懂的三方库。

　　1：定义一个GestureManager管理类的例子：

  1 package views 
  2 {
  3     import flash.display.*;
  4     import flash.events.Event;
  5     import flash.text.*;
  6     import flash.events.KeyboardEvent;
  7     import flash.ui.Keyboard;
  8     import org.tuio.adapters.NativeTuioAdapter;
  9     import org.tuio.gestures.*;
 10     
 11     import org.tuio.connectors.*;
 12     import org.tuio.*;
 13     import org.tuio.debug.*;
 14     
 15     /**
 16      * This is a demo class for using the GestureManager.
 17      * It uses TuioDebug to visualize the touch points.
 18      * A number of randomly colored rectangles will be drawn on the stage. 
 19      * You can drag, scale, rotate them with the help of the corresponding gestures.
 20      * You can use this class either as main class or it to the stage.
 21      * 
 22      * @author Immanuel Bauer
 23 */
 24     public class GestureManagerExample extends MovieClip {
 25         
 26         public var circleSize:Number;
 27         public var tf:TextField;
 28         
 29         private var tDbg:TuioDebug;
 30         
 31         public function GestureManagerExample() {
 32             if (stage) init();
 33             else addEventListener(Event.ADDED_TO_STAGE, init);
 34         }
 35         
 36         private function init(e:Event = null):void {    
 37             
 38             /**
 39              * You can replace the connector used for creating the TuioClient with any connector you'd like to use.
 40 */
 41 //            var tc:TuioClient = new TuioClient(new UDPConnector("0.0.0.0", 3333));
 42             var tc:NativeTuioAdapter = new NativeTuioAdapter(stage);
 43             tc.addListener(TuioManager.init(stage));
 44             var tm:GestureManager = GestureManager.init(stage);
 45             GestureManager.addGesture(new DragGesture());
 46             GestureManager.addGesture(new ZoomGesture(TwoFingerMoveGesture.TRIGGER_MODE_MOVE));  //TRIGGER_MODE_TOUCH for NativeTuioAdapter
 47             GestureManager.addGesture(new RotateGesture(TwoFingerMoveGesture.TRIGGER_MODE_MOVE)); //TRIGGER_MODE_TOUCH for NativeTuioAdapter
 48             tDbg = TuioDebug.init(stage);
 49             tc.addListener(tDbg);
 50             
 51             /**
 52              * And that's it for the tuio part.
 53 */
 54             tf = new TextField();
 55             tf.autoSize = TextFieldAutoSize.LEFT;
 56             tf.selectable = false;
 57             tf.defaultTextFormat = new TextFormat("Arial", null, 0x999999);
 58             tf.appendText("Press the UP arrow key to increase the circle size.");
 59             tf.appendText("\nPress the DOWN arrow key to decrease the circle size.");
 60             tf.appendText("\nPress SPACE for fullscreen.");
 61             tf.x = 11;
 62             tf.y = 11;
 63             
 64             this.addChild(tf);
 65             
 66             stage.addEventListener(KeyboardEvent.KEY_DOWN, handleKeyDown);
 67             
 68             stage.scaleMode = StageScaleMode.NO_SCALE;
 69             stage.align = StageAlign.TOP_LEFT;
 70             
 71             var item:DragRotateScaleMe;
 72             for (var c:int = 0; c < 10; c++ ) {
 73                 item = new DragRotateScaleMe(100 + Math.random() * (stage.stageWidth - 200), 100 + Math.random() * (stage.stageHeight - 200), stage.stageWidth / 2, stage.stageHeight / 2);
 74                 stage.addChild(item);
 75             }
 76             
 77         }
 78         
 79         public function handleKeyDown(event:KeyboardEvent):void {     
 80             if (event.keyCode == Keyboard.DOWN){
 81                 tDbg.cursorRadius -= 2;
 82             } else if (event.keyCode == Keyboard.UP){
 83                 tDbg.cursorRadius += 2;
 84             } else if (event.keyCode == Keyboard.SPACE) {
 85                 if(stage.displayState == StageDisplayState.NORMAL){
 86                     stage.displayState = StageDisplayState.FULL_SCREEN;
 87                     tf.text = "";
 88                     tf.appendText("Press the UP arrow key to increase the circle size.");
 89                     tf.appendText("\nPress the DOWN arrow key to decrease the circle size.");
 90                     tf.appendText("\nPress SPACE for windowmode.");
 91                 } else {
 92                     stage.displayState = StageDisplayState.NORMAL;
 93                     tf.text = "";
 94                     tf.appendText("Press the UP arrow key to increase the circle size.");
 95                     tf.appendText("\nPress the DOWN arrow key to decrease the circle size.");
 96                     tf.appendText("\nPress SPACE for fullscreen.");
 97                 }
 98             }
 99         } 
100     }
101     
102 }

　　2：定义的一个需要实现手势功能的Sprite对象：

package views 
{
    import flash.display.Sprite;
    import flash.events.TransformGestureEvent;
    import org.tuio.TuioTouchEvent;
    import flash.geom.*;
    
    public class DragRotateScaleMe extends Sprite {
        
        public var minScale:Number = 0.1;
        public var maxScale:Number = 2.5;
        
        private var curID:int = -1;
        
        public function DragRotateScaleMe(x:Number, y:Number, width:Number, height:Number) {
            this.graphics.beginFill(Math.random() * 0xcccccc);
            this.graphics.drawRect( -width / 2, -height / 2, width, height);
            this.graphics.endFill();
            this.x = x + width / 2;
            this.y = y + height / 2;
            
            this.addEventListener(TransformGestureEvent.GESTURE_PAN, handleDrag);
            this.addEventListener(TransformGestureEvent.GESTURE_ZOOM, handleScale);
            this.addEventListener(TransformGestureEvent.GESTURE_ROTATE, handleRotate);
            this.addEventListener(TuioTouchEvent.TOUCH_DOWN, handleDown);
        }
        
        private function handleScale(e:TransformGestureEvent):void {
            var p:Point  = this.localToGlobal(new Point(e.localX, e.localY));
            p = parent.globalToLocal(p);
            
            var m:Matrix = this.transform.matrix;
            m.translate( -p.x, -p.y);
            m.scale(e.scaleX, e.scaleY);
            m.translate(p.x, p.y);
            this.transform.matrix = m;
            
            if (this.scaleX > maxScale) {
                m = this.transform.matrix;
                m.translate( -p.x, -p.y);
                m.scale(maxScale/this.scaleX, maxScale/this.scaleY);
                m.translate(p.x, p.y);
                this.transform.matrix = m;
            } else if (this.scaleX < minScale) {
                m = this.transform.matrix;
                m.translate( -p.x, -p.y);
                m.scale(minScale/this.scaleX, minScale/this.scaleY);
                m.translate(p.x, p.y);
                this.transform.matrix = m;
            }
        }
        
        private function handleRotate(e:TransformGestureEvent):void {
            var p:Point  = this.localToGlobal(new Point(e.localX, e.localY));
            p = parent.globalToLocal(p);
            
            var m:Matrix = this.transform.matrix;
            m.translate(-p.x, -p.y);
            m.rotate(e.rotation * (Math.PI / 180));
            m.translate(p.x, p.y);
            this.transform.matrix = m;
        }
        
        private function handleDrag(e:TransformGestureEvent):void {
            this.x += e.offsetX;
            this.y += e.offsetY;
        }
        
        private function handleDown(e:TuioTouchEvent):void {
            if (curID == -1) {
                stage.setChildIndex(this, stage.numChildren - 1);
                this.curID = e.tuioContainer.sessionID;
                stage.addEventListener(TuioTouchEvent.TOUCH_UP, handleUp);
            }
        }
        
        private function handleUp(e:TuioTouchEvent):void {
            if(e.tuioContainer.sessionID == this.curID){
                this.curID = -1;
                stage.removeEventListener(TuioTouchEvent.TOUCH_UP, handleUp);
            }
        }
        
    }
    
}

　　3：移动项目的第一视图firstView：

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" title="主页视图"
        creationComplete="view2_creationCompleteHandler(event)" xmlns:mx="library://ns.adobe.com/flex/mx">
    <fx:Script>
        <![CDATA[
            import mx.events.FlexEvent;
            
            
            
            protected function view2_creationCompleteHandler(event:FlexEvent):void
            {
                // TODO Auto-generated method stub
                var gesMov:GestureManagerExample = new GestureManagerExample();
                ui.addChild(gesMov);
            }
            
        ]]>
    </fx:Script>
    <fx:Declarations>
        <!-- 将非可视元素（例如服务、值对象）放在此处 -->
    </fx:Declarations>
    <mx:UIComponent id="ui" width="100%" height="100%"/>
</s:View>