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, 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
有问题的朋友请留言~