标签:
在前面提到过,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)的讲解。
[转]starling教程-触摸事件(Touch Events)(四)
标签:
原文地址:http://www.cnblogs.com/leoin2012/p/4485777.html