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

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

　　

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

　　

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

　　

package views 
{
    import flash.display.*;
    import flash.events.Event;
    import flash.text.*;
    import flash.events.KeyboardEvent;
    import flash.ui.Keyboard;
    import org.tuio.adapters.NativeTuioAdapter;
    import org.tuio.gestures.*;
 10     
    import org.tuio.connectors.*;
    import org.tuio.*;
    import org.tuio.debug.*;
 14     
    /**
     * This is a demo class for using the GestureManager.
     * It uses TuioDebug to visualize the touch points.
     * A number of randomly colored rectangles will be drawn on the stage. 
     * You can drag, scale, rotate them with the help of the corresponding gestures.
     * You can use this class either as main class or it to the stage.
     * 
     * @author Immanuel Bauer
*/
    public class GestureManagerExample extends MovieClip {
 25         
        public var circleSize:Number;
        public var tf:TextField;
 28         
        private var tDbg:TuioDebug;
 30         
        public function GestureManagerExample() {
            if (stage) init();
            else addEventListener(Event.ADDED_TO_STAGE, init);
        }
 35         
        private function init(e:Event = null):void {    
 37             
            /**
             * You can replace the connector used for creating the TuioClient with any connector you'd like to use.
*/
//            var tc:TuioClient = new TuioClient(new UDPConnector("0.0.0.0", 3333));
            var tc:NativeTuioAdapter = new NativeTuioAdapter(stage);
            tc.addListener(TuioManager.init(stage));
            var tm:GestureManager = GestureManager.init(stage);
            GestureManager.addGesture(new DragGesture());
            GestureManager.addGesture(new ZoomGesture(TwoFingerMoveGesture.TRIGGER_MODE_MOVE));  //TRIGGER_MODE_TOUCH for NativeTuioAdapter
            GestureManager.addGesture(new RotateGesture(TwoFingerMoveGesture.TRIGGER_MODE_MOVE)); //TRIGGER_MODE_TOUCH for NativeTuioAdapter
            tDbg = TuioDebug.init(stage);
            tc.addListener(tDbg);
 50             
            /**
             * And that's it for the tuio part.
*/
            tf = new TextField();
            tf.autoSize = TextFieldAutoSize.LEFT;
            tf.selectable = false;
            tf.defaultTextFormat = new TextFormat("Arial", null, 0x999999);
            tf.appendText("Press the UP arrow key to increase the circle size.");
            tf.appendText("\nPress the DOWN arrow key to decrease the circle size.");
            tf.appendText("\nPress SPACE for fullscreen.");
            tf.x = 11;
            tf.y = 11;
 63             
            this.addChild(tf);
 65             
            stage.addEventListener(KeyboardEvent.KEY_DOWN, handleKeyDown);
 67             
            stage.scaleMode = StageScaleMode.NO_SCALE;
            stage.align = StageAlign.TOP_LEFT;
 70             
            var item:DragRotateScaleMe;
            for (var c:int = 0; c < 10; c++ ) {
                item = new DragRotateScaleMe(100 + Math.random() * (stage.stageWidth - 200), 100 + Math.random() * (stage.stageHeight - 200), stage.stageWidth / 2, stage.stageHeight / 2);
                stage.addChild(item);
            }
 76             
        }
 78         
        public function handleKeyDown(event:KeyboardEvent):void {     
            if (event.keyCode == Keyboard.DOWN){
                tDbg.cursorRadius -= 2;
            } else if (event.keyCode == Keyboard.UP){
                tDbg.cursorRadius += 2;
            } else if (event.keyCode == Keyboard.SPACE) {
                if(stage.displayState == StageDisplayState.NORMAL){
                    stage.displayState = StageDisplayState.FULL_SCREEN;
                    tf.text = "";
                    tf.appendText("Press the UP arrow key to increase the circle size.");
                    tf.appendText("\nPress the DOWN arrow key to decrease the circle size.");
                    tf.appendText("\nPress SPACE for windowmode.");
                } else {
                    stage.displayState = StageDisplayState.NORMAL;
                    tf.text = "";
                    tf.appendText("Press the UP arrow key to increase the circle size.");
                    tf.appendText("\nPress the DOWN arrow key to decrease the circle size.");
                    tf.appendText("\nPress SPACE for fullscreen.");
                }
            }
        } 
    }
101     
}

 

　　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>

 

　　例子截图：

 

　　这里是手势库的下载地址，

　　https://files.cnblogs.com/loveFlex/GeoGesture.rar

　　有问题的朋友请留言~