AS手机项目 - 一个实现触摸功能的例子(图形绘制)
作者:hangge | 2014-12-26 16:09
从flash player10.1版本开始,便原生支持多点触摸功能了。随着iphone,android手机,平板的触摸屏普及,我们使用flash builder开发的移动应用就可以加入触摸来提升用户的体验。
1,下面是几个AS3中与触摸相关的知识点:
(1)通过Multitouch.supportsTouchEvents可以判断设备是否支持触摸
(2)Multitouch.maxTouchPoints可以得到设置最多支持的触摸点个数
(3)Multitouch.inputMode可以设置触摸输入模式,设置成MultitouchInputMode.TOUCH_POINT表示点触摸
(4)上面设置后,就可以返回并监听TouchEvent事件了,TouchEvent类有8种事件类型,主要用的如下几个:
TouchEvent.TOUCH_BEGIN:手指按下触摸开始
TouchEvent.TOUCH_MOVE:触摸移动
TouchEvent.TOUCH_END:触摸结束
2,下面是一个简单的触摸样例
(1)以手指按下为起点,抬起为终点绘制个矩形
(2)绘制过程中,同步显示横向和纵向的参考线以及坐标参考标签
(3)绘制完毕,移除参考线和标签,保留绘制的矩形

代码如下:
package
{
import flash.display.Sprite;
import flash.display.StageAlign;
import flash.display.StageScaleMode;
import flash.events.TouchEvent;
import flash.text.TextField;
import flash.text.TextFieldAutoSize;
import flash.ui.Multitouch;
import flash.ui.MultitouchInputMode;
public class MultitouchTest extends Sprite
{
private var multitouch:TextField; //显示是否支持触摸文本框
private var coordinates:TextField; //显示当前触摸点坐标
private var offsetX:Number; //记录第一次按下的x坐标
private var offsetY:Number; //记录第一次按下的y坐标
public function MultitouchTest()
{
super();
// 支持 autoOrient
stage.align = StageAlign.TOP_LEFT;
stage.scaleMode = StageScaleMode.NO_SCALE;
//创建文本框 - 显示时候支持触摸
multitouch = new TextField();
multitouch.autoSize = TextFieldAutoSize.LEFT;
//判断设备是否支持触摸
switch(Multitouch.supportsTouchEvents){
case true:
multitouch.text = "支持触摸";
//多点触摸的输入模式设置为 - 点触摸
Multitouch.inputMode = MultitouchInputMode.TOUCH_POINT;
stage.addEventListener(TouchEvent.TOUCH_BEGIN, onTouch);
stage.addEventListener(TouchEvent.TOUCH_MOVE, onTouch);
stage.addEventListener(TouchEvent.TOUCH_END, onTouch);
break;
case false:
multitouch.text = "不支持触摸";
break;
}
stage.addChild(multitouch);
}
/**
* 触摸响应事件
*/
private function onTouch(e:TouchEvent):void{
//触摸点ID(从按下,移动,抬起这一系列触摸点ID是同样的)
var id:Number = e.touchPointID;
var x:Number = e.stageX;
var y:Number = e.stageY;
switch(e.type){
//触摸开始
case TouchEvent.TOUCH_BEGIN:
drawLines(id, x, y);
drawShape(id, x, y);
break;
//触摸移动
case TouchEvent.TOUCH_MOVE:
moveLines(id, x, y);
drawShape(id, x, y);
break;
//触摸结束
case TouchEvent.TOUCH_END:
removeLines(id);
break;
}
}
/**
* 设置定位标签的数据和位置
*/
private function setCoordinates(x:Number, y:Number):void{
if(!coordinates){
coordinates = new TextField();
stage.addChild(coordinates);
}
coordinates.text = "("+x+", "+y+")";
coordinates.x = x +2;
coordinates.y = y-15;
}
/**
* 绘制定位线
*/
private function drawLines(id:Number, x:Number, y:Number):void{
offsetX = x;
offsetY = y;
//创建纵向定位线
var vertical:Sprite = new Sprite();
vertical.name = id+"v";
vertical.graphics.lineStyle(2, 0x000000);
vertical.graphics.moveTo(x,0);
vertical.graphics.lineTo(x, stage.stageHeight);
stage.addChild(vertical);
//创建横向定位线
var horizontal:Sprite = new Sprite();
horizontal.name = id+"h";
horizontal.graphics.lineStyle(2, 0x000000);
horizontal.graphics.moveTo(0,y);
horizontal.graphics.lineTo(stage.stageWidth, y);
stage.addChild(horizontal);
setCoordinates(x, y);
}
/**
* 移动定位线
*/
private function moveLines(id:Number, x:Number, y:Number):void{
//设置纵向定线
var vertical:Sprite = stage.getChildByName(id+"v") as Sprite;
vertical.x = x - offsetX;
//设置横向定位线
var horizontal:Sprite = stage.getChildByName(id+"h") as Sprite;
horizontal.y = y - offsetY;
//设置参考标签坐标
setCoordinates(x, y);
}
/**
* 移除定位线和定位标签
*/
private function removeLines(id:Number):void{
stage.removeChild(stage.getChildByName(id+"v") as Sprite);
stage.removeChild(stage.getChildByName(id+"h") as Sprite);
stage.removeChild(coordinates);
coordinates = null;
}
/**
* 绘制矩形
*/
private function drawShape(id:Number, x:Number, y:Number):void{
var shape:Sprite;
var shapeId:String = id.toString();
if(!stage.getChildByName(shapeId)){
shape = new Sprite();
shape.name = shapeId;
stage.addChild(shape);
}else{
shape = stage.getChildByName(shapeId) as Sprite;
}
var width:Number = x- offsetX;
var height:Number = y- offsetY;
shape.graphics.clear();
shape.graphics.lineStyle(2, 0x00ff00,0.7);
shape.graphics.beginFill(0x00ff00,0.3);
shape.graphics.drawRect(offsetX, offsetY, width, height);
shape.graphics.endFill();
}
}
}
全部评论(0)