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

逃离我推掉我的手 2021-12-07 15:19 98阅读 0赞

**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>

例子截图：

![2012022810431910.jpg][]

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

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

有问题的朋友请留言~

** **

转载于:https://www.cnblogs.com/loveFlex/archive/2012/02/28/2371057.html

[2012022810431910.jpg]: /images/20211207/d03a42202aa64b5ba4c27dd7d58188e0.png