AS手机项目 - 触摸和手势的例子(触摸绘制矩形,手势移动)
作者:hangge | 2014-12-29 10:44
flash或flex开发移动项目的时候,既支持触摸,也支持手势。

1,如果要使用手势,则只需把Multitouch.inputMode设置为MultitouchInputMode.GESTURE即可。
2,使用Multitouch.supportedGestures可以返回设备所支持的所有手势类型(返回一个字符串Vector集合)
3,对于用户发起的手势类型,分别有如下三种手势事件
(1)GestureEvent:只有一个事件类型属性GestureEvent.GESTURE_TWO_FINGER_TAP(表示两个手指轻击)
(2)PressAndTapGestureEvent:只有一个事件类型属性PressAndTapGestureEvent.GESTURE_PRESS_AND_TAP(一指按住一指轻击)
(3)TransformGestureEvent:有4个事件类型属性
TransformGestureEvent.GESTURE_PAN:平移手势
TransformGestureEvent.GESTURE_ROTATE:旋转手势
TransformGestureEvent.GESTURE_SWIPE:滑动手势
TransformGestureEvent.GESTURE_ZOOM:缩放手势
4,下面是一个触摸和手势的例子
(1)在舞台空白除拖拽绘制矩形(触摸模式)
(2)两个手指在矩形上可以进行手势移动
(3)由于触摸手势只能同时存在一种,加了个定时器,手势模式下如果一段时间不活动就改回触摸模式。
效果图如下:

代码如下:
package
{
import flash.display.Sprite;
import flash.display.Stage;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.GesturePhase;
import flash.events.TimerEvent;
import flash.events.TouchEvent;
import flash.events.TransformGestureEvent;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.ui.Multitouch;
import flash.ui.MultitouchInputMode;
import flash.utils.Timer;
[SWF( backgroundColor="0xFFFFFF", frameRate="25")]
public class MultitouchAndGestures extends Sprite
{
private var offsetX:Number; //记录第一次按下的x坐标
private var offsetY:Number; //记录第一次按下的y坐标
private var resetTouchTimer:Timer; //重置触摸模式计时器
private var currentTarget:String; //当前选中对象
public function MultitouchAndGestures()
{
super();
// 支持 autoOrient
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
//创建文本框(显示触摸点个数和支持的触摸类型)
var textField:TextField = new TextField();
textField.autoSize = TextFieldAutoSize.LEFT;
//判断是否支持触摸
var touchEnabled:Boolean = Multitouch.supportsTouchEvents;
//初始化重置模式计时器
resetTouchTimer = new Timer(1000, 0);
resetTouchTimer.addEventListener(TimerEvent.TIMER, onTimer);
switch(touchEnabled)
{
case true:
{
//设置触摸模式
Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;
textField.text = "支持的触摸点个数:"+ Multitouch.maxTouchPoints;
textField.text += "\n支持触摸类型:" +Multitouch.supportedGestures ;
// 注册触摸事件
stage.addEventListener(TouchEvent.TOUCH_BEGIN, onTouch);
stage.addEventListener(TouchEvent.TOUCH_MOVE, onTouch);
stage.addEventListener(TouchEvent.TOUCH_END, onTouch);
}
break;
case false:
{
textField.text = "不支持触摸";
}
break;
}
stage.addChild(textField);
}
/**
* 触摸事件响应
*/
private function onTouch(touchEvent:TouchEvent):void
{
var id:Number = touchEvent.touchPointID;
var x:Number = touchEvent.stageX;
var y:Number = touchEvent.stageY;
switch(touchEvent.type)
{
case TouchEvent.TOUCH_BEGIN:
//判断触摸对象是舞台,还是图形
if(touchEvent.target is Stage)
{
offsetX = x;
offsetY = y;
drawShape(id, x, y);
} else {
currentTarget = touchEvent.target.name;
initializeGestures(); //开启手势
}
break;
case TouchEvent.TOUCH_MOVE:
drawShape(id, x, y);
break;
default:
break;
}
}
/**
* 绘制矩形
*/
private function drawShape(id:Number, x:Number, y:Number):void
{
var shape:Sprite;
var name:String = id.toString();
if(!stage.getChildByName(name))
{
shape = new Sprite();
shape.name = id.toString();
shape.addEventListener(TransformGestureEvent.GESTURE_PAN, onPan);
stage.addChild(shape);
} else {
shape = stage.getChildByName(name) as Sprite;
}
shape.graphics.clear();
shape.graphics.lineStyle(2, 0x00ff00,0.7);
shape.graphics.beginFill(0x00ff00,0.3);
shape.graphics.drawRect(offsetX, offsetY, x-offsetX, y-offsetY);
shape.graphics.endFill();
}
/**
* 手势事件响应函数
*/
private function onPan(event:TransformGestureEvent):void
{
switch(event.phase)
{
case GesturePhase.UPDATE:
initializeReset();
stage.getChildByName(currentTarget).x = stage.getChildByName(currentTarget).x + event.offsetX;
stage.getChildByName(currentTarget).y = stage.getChildByName(currentTarget).y + event.offsetY;
break;
}
}
/**
* 开始计时器
*/
private function initializeReset():void
{
resetTouchTimer.delay = 1000;
if(!resetTouchTimer.running)
resetTouchTimer.start();
}
/**
* 计时器结束,变成触摸模式
*/
private function onTimer(e:TimerEvent):void
{
resetTouchTimer.stop();
initializeTouches();
}
/**
* 转为触摸模式
*/
private function initializeTouches():void
{
if(Multitouch.supportsTouchEvents)
{
Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;
TransformGestureEvent.GESTURE_ZOOM
}
}
/**
* 转为手势模式
*/
private function initializeGestures():void
{
if(Multitouch.supportsGestureEvents)
{
Multitouch.inputMode = MultitouchInputMode.GESTURE;
initializeReset();
}
}
}
}
全部评论(0)