当前位置: > > > AS手机项目 - 一个实现触摸功能的例子(图形绘制)

AS手机项目 - 一个实现触摸功能的例子(图形绘制)

从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