starling教程-触摸事件(Touch Events)（四）

在前面提到过，Starling是Sparrow的姊妹篇，正因为这样，Starling里的touch事件的机制其实是为移动设备的触摸交互设计的，所以当你使用它进行使用鼠标交互的桌面应用开发时，第一眼会感觉有些困惑。

首先，如果你看一下starling的类结构图的话，你会发现starling和本地显示列表结构不同的地方在于它没有InteractiveObject类（InteractiveObject 类是用户可以使用鼠标和键盘与之交互的所有显示对象的抽象基类），所有的显示对象使用默认的交互，换句话说，在displayobject中定义了这些交互行为（starling其实从本地stage中注册事件，然后通过自己的结构将本地MouseEvent和TouchEvent结合成为它自己的独有的TouchEvent，这样开发桌面应用时，基本不用做什么修改就可以移植到移动平台了，大家知道的，现在平板电脑正在疯狂普及呐！）。

我们在前面已经用到过touch事件了。我们从最基本的东西开始，比如捕捉当鼠标触碰到quad时触发的事件。为了实现这点我们使用 TouchEvent.TOUCH事件：

1 // when the sprite is touched 
2 _customSprite.addEventListener(TouchEvent.TOUCH, onTouchedSprite); 

你会不会认为这是一个相当有限的功能？事实上它是非常强大的，因为你可以从这个单一的事件里得到许多不同的状态。每当鼠标或手指和图形对象发生交互时，TouchEvent.TOUCH就会被触发。

让我们在进一步看看下面的代码，我们在onTouch方法里trace了一下Touch对象的phase属性：

 1 private function onTouch (e:TouchEvent):void 
 2 { 
 3   // get the mouse location related to the stage 
 4     var touch:Touch = e.getTouch(stage); 
 5     var pos:Point = touch.getLocation(stage); 
 6  
 7     trace ( touch.phase ); 
 8  
 9     // store the mouse coordinates 
10     _mouseY = pos.y; 
11     _mouseX = pos.x; 
12 } 

 

当我们开始和一个quad交互直到点击了它，这个过程会触发不同的phase。下面是TouchPhase类中所有phase的常量属性：

1 •  began : A mouse or finger starts interacting (similar to a mouse down state). 
2 •  ended : A mouse or finger stop interacting (similar to a native click state). 
3 •  hover : A mouse or finger is hovering an object. (similar to a native mouse over state) 
4 •  moved : A mouse or finger is moving an object (similar to a native  mouse down state + a mouse move state). 
5 •  stationary : A mouse or finger stopped interactng with an object and stays over it. 

我们再来看看TouchEvent类的其他一些常用的属性：

1 •  ctrlKey : A boolean returning the state of the ctrl key (down or not). 
2 •  getTouch: Gets the first Touch object that originated over a certain target and are in a certain phase. 
3 •  getTouches : Gets a set of Touch objects that originated over a certain target and are in a certain phase. 
4 •  shiftKey: A boolean returning the state of the shift key (down or not). 
5 •  timestamp : The time the event occurred (in seconds since application launch). 
6 •  touches : All touches that are currently happening. 

在使用键盘组合键的时候shiftKey和ctrlKey属性就非常有用了。综上，每当有交互发生不论是鼠标还是手指，都会有一个Touch事件相关联。

 

让我们来看看Touch类的pai：

 1 •  clone : Clones the object. 
 2 •  getLocation: Converts the current location of a touch to the local coordinate system of a display object. 
 3 •  getPreviousLocation: Converts the previous location of a touch to the local coordinate system of a display 
 4 object. 
 5 •  globalX: The x-position of the touch in screen coordinates. 
 6 •  globalY : The y-position of the touch in screen coordinates. 
 7 •  id: A unique id for the object. 
 8 •  phase : The current phase the touch is in. 
 9 •  previousGlobalX : The previous x-position of the touch in screen coordinates. 
10 •  previousGlobalY : The previous y-position of the touch in screen coordinates 
11 •  tapCount : The number of taps the finger made in a short amount of time. Use this to detect double-taps, etc. 
12 •  target : The display object at which the touch occurred. 
13 •  timestamp : The moment the event occurred (in seconds since application start). 
14  

 

模拟多点触摸

当进行移动设备的开发时，你会有很多时候想要使用多点触摸的交互操作，比如放大缩小图片。当你再台式电脑上进行开发时，手里没有移动设备，这时你就会需要使用到Starling内建的一个很好的模拟多点触摸的机制。

使用这个机制需要你将Starling类的simulateMultiTouch属性设置为true：

 

package
{ 
    import flash.display.Sprite; 
    import flash.display.StageAlign; 
    import flash.display.StageScaleMode; 
    import starling.core.Starling; 
     
    [SWF(width="1280", height="752", frameRate="60", backgroundColor="#002143")] 
    public class Startup extends Sprite 
    { 
        private var mStarling:Starling; 
         
        public function Startup() 
        { 
           // stats class for fps 
      addChild ( new Stats() ); 
       
      stage.align = StageAlign.TOP_LEFT; 
      stage.scaleMode = StageScaleMode.NO_SCALE; 
     
      // create our Starling instance 
              mStarling = new Starling(Game, stage); 
      // emulate multi-touch 
      mStarling.simulateMultitouch = true; 
             // set anti-aliasing (higher the better quality but slower performance) 
             mStarling.antiAliasing = 1; 
             // start it! 
      mStarling.start(); 
        } 
    } 
} 

按照上面的代码进行设置之后，按住ctrl键，这时会出现两个小圆圈来模拟多点触摸，下面的插图说明了这一点：

在下面的代码中，我们将使用模拟多点触摸的小圆点来将一个quad进行形变，就像使用两个手指一样。

我们取出两个触摸点并计算它们之间的距离：

 1 package  
 2 { 
 3     import flash.geom.Point; 
 4  
 5     import starling.display.Sprite; 
 6     import starling.events.Event; 
 7     import starling.events.Touch; 
 8     import starling.events.TouchEvent; 
 9     import starling.events.TouchPhase; 
10  
11     public class Game extends Sprite 
12     { 
13     private var customSprite:CustomSprite; 
14      
15         public function Game() 
16         {   
17       addEventListener(Event.ADDED_TO_STAGE, onAdded); 
18         } 
19  
20     private function onAdded ( e:Event ):void 
21     { 
22       // create the custom sprite 
23       customSprite = new CustomSprite(200, 200); 
24        
25       // positions it by default in the center of the stage 
26       // we add half width because of the registration point of the custom sprite (middle) 
27       customSprite.x = (stage.stageWidth - customSprite.width >> 1 ) + (customSprite.width >> 1); 
28       customSprite.y = (stage.stageHeight - customSprite.height >> 1) + (customSprite.height >> 1); 
29        
30       // show it 
31       addChild(customSprite); 
32  
33       // we listen to the mouse movement on the stage 
34       //stage.addEventListener(TouchEvent.TOUCH, onTouch); 
35       // need to comment this one ? ;) 
36       stage.addEventListener(Event.ENTER_FRAME, onFrame); 
37       // when the sprite is touched 
38       customSprite.addEventListener(TouchEvent.TOUCH, onTouchedSprite); 
39     } 
40  
41     private function onFrame (e:Event):void 
42     { 
43       // we update our custom sprite 
44       customSprite.update(); 
45     } 
46  
47     private function onTouchedSprite(e:TouchEvent):void 
48     { 
49             // retrieves the touch points 
50             var touches:Vector.<Touch> = e.touches; 
51  
52             // if two fingers 
53             if ( touches.length == 2 ) 
54             { 
55                 var finger1:Touch = touches[0]; 
56                 var finger2:Touch = touches[1]; 
57  
58                 var distance:int; 
59                 var dx:int; 
60                 var dy:int; 
61  
62                 // if both fingers moving (dragging) 
63                 if ( finger1.phase == TouchPhase.MOVED && finger2.phase == TouchPhase.MOVED ) 
64                 { 
65                     // calculate the distance between each axes 
66                     dx = Math.abs ( finger1.globalX - finger2.globalX ); 
67                     dy = Math.abs ( finger1.globalY - finger2.globalY ); 
68                      
69                     // calculate the distance 
70                     distance = Math.sqrt(dx*dx+dy*dy); 
71  
72                     trace ( distance ); 
73                 } 
74             } 
75     } 
76     } 
77 } 

下一篇我们进行如何操作纹理（texture）的讲解。