AS3中将TUIO协议转换到传统触摸事件

TUIO是一个用途广泛,支持厂商众多的多点触摸协议。 其编码采用XML抽象描述,所以任何支持XML的语言都可以使用TUIO协议的触摸设备。另外,TUIO不受windows触摸点上限限制,即设备支持多少个点,你就能使用多少个。

    现在最新的TUIO协议版本是2.0 ,  但是仍然没有普及,现有设备还是以1.0为默认支持。


    希望在设备中使用TUIO,必须要与TUIO服务建立一个连接,TUIO协议的默认端口为 3000,这里跳过连接直接进入主题。

   

    这是一个TUIO协议的一个数据包,其包含至少3个名为MESSAGE子项,每个子项的第一个子项的value属性定义了此子项的数据类型,

    以此例为示,它有3个子项,第1个子项(alive)代表着当前存在的触摸点,这里是指所有在设备上的触摸点,包括那些正在移动的和静止的。第2个子项(set)对应了一个触摸点的详细数据,第3个子项(fseq)定义了包的序列ID。

  1. <OSCPACKET ADDRESS="127.0.0.1" PORT="55448" TIME="-3736546999771946328">  
  2.   <MESSAGE NAME="/tuio/2Dcur">  
  3.     <ARGUMENT TYPE="s" VALUE="alive"/>  
  4.     <ARGUMENT TYPE="i" VALUE="4"/>  
  5.   </MESSAGE>  
  6.   <MESSAGE NAME="/tuio/2Dcur">  
  7.     <ARGUMENT TYPE="s" VALUE="set"/>  
  8.     <ARGUMENT TYPE="i" VALUE="4"/>  
  9.     <ARGUMENT TYPE="f" VALUE="0.014778325123152709"/>  
  10.     <ARGUMENT TYPE="f" VALUE="0.03414634146341464"/>  
  11.     <ARGUMENT TYPE="f" VALUE="0"/>  
  12.     <ARGUMENT TYPE="f" VALUE="0"/>  
  13.     <ARGUMENT TYPE="f" VALUE="0"/>  
  14.   </MESSAGE>  
  15.   <MESSAGE NAME="/tuio/2Dcur">  
  16.     <ARGUMENT TYPE="s" VALUE="fseq"/>  
  17.     <ARGUMENT TYPE="i" VALUE="3"/>  
  18.   </MESSAGE>  
  19. </OSCPACKET>  
<OSCPACKET ADDRESS="127.0.0.1" PORT="55448" TIME="-3736546999771946328">
  <MESSAGE NAME="/tuio/2Dcur">
    <ARGUMENT TYPE="s" VALUE="alive"/>
    <ARGUMENT TYPE="i" VALUE="4"/>
  </MESSAGE>
  <MESSAGE NAME="/tuio/2Dcur">
    <ARGUMENT TYPE="s" VALUE="set"/>
    <ARGUMENT TYPE="i" VALUE="4"/>
    <ARGUMENT TYPE="f" VALUE="0.014778325123152709"/>
    <ARGUMENT TYPE="f" VALUE="0.03414634146341464"/>
    <ARGUMENT TYPE="f" VALUE="0"/>
    <ARGUMENT TYPE="f" VALUE="0"/>
    <ARGUMENT TYPE="f" VALUE="0"/>
  </MESSAGE>
  <MESSAGE NAME="/tuio/2Dcur">
    <ARGUMENT TYPE="s" VALUE="fseq"/>
    <ARGUMENT TYPE="i" VALUE="3"/>
  </MESSAGE>
</OSCPACKET>

    事实上,我们只需要使用alive和set消息,其他的消息都不在我们的考虑之内,

    set消息传过来的参数只是TUIO设备上的坐标比例,从0-1,将其与本地舞台大小相乘才能得到舞台坐标。


   alive消息描述了当前存在的点,根据这个参数我们可以排除那些已经消失的点。首先,我们先创建一个触摸点类

[javascript] view plain copy
print ?
  1.     import flash.display.InteractiveObject;  
  2.   
  3.     public class TuioObject  
  4.     {  
  5.         /** 触摸id */  
  6.         public var id:int;  
  7.           
  8.         /** 远程触摸编号 */  
  9.         public var remoteID:int;  
  10.           
  11.         /** 指针对象 */  
  12.         public var target:InteractiveObject;  
  13.           
  14.         /** 屏幕上的位置 */  
  15.         public var x:int;  
  16.           
  17.         /** 屏幕上的位置 */  
  18.         public var y:int;  
  19.           
  20.         /** 生效时候的位置 */  
  21.         public var startX:Number;  
  22.           
  23.         /** 生效时候的位置 */  
  24.         public var startY:Number;  
  25.           
  26.         /** 是否存在 */  
  27.         public var isExist:Boolean;  
  28.           
  29.         public function TuioObject(touchID:int,x:Number,y:Number)  
  30.         {  
  31.             id = touchID;  
  32.             this.x = startX = x;  
  33.             this.y = startY = y;  
  34.             isExist = true;  
  35.         }  
    import flash.display.InteractiveObject;

    public class TuioObject
    {
        /** 触摸id */
        public var id:int;
        
        /** 远程触摸编号 */
        public var remoteID:int;
        
        /** 指针对象 */
        public var target:InteractiveObject;
        
        /** 屏幕上的位置 */
        public var x:int;
        
        /** 屏幕上的位置 */
        public var y:int;
        
        /** 生效时候的位置 */
        public var startX:Number;
        
        /** 生效时候的位置 */
        public var startY:Number;
        
        /** 是否存在 */
        public var isExist:Boolean;
        
        public function TuioObject(touchID:int,x:Number,y:Number)
        {
            id = touchID;
            this.x = startX = x;
            this.y = startY = y;
            isExist = true;
        }

    这个类描述了一个TUIO触摸点,每次出现新的触摸点时我们实例化一个与其相对应的触摸点。由于传输过来的数据并没有告诉我们某个触摸点是刚出现的,我们必须从现有的触摸点集合中查找ID,如果没有找到则判断为新的触摸事件。

[javascript] view plain copy
print ?
  1. //根据ID查找TOUCH  
  2. private function searchByRemoteName(remoteID:int):TuioObject{  
  3.     for each(var touch:TuioObject in _touchList){  
  4.         if(touch.remoteID == remoteID){  
  5.             return touch;  
  6.         }  
  7.     }  
  8.     return null;  
  9. }  
		//根据ID查找TOUCH
		private function searchByRemoteName(remoteID:int):TuioObject{
			for each(var touch:TuioObject in _touchList){
				if(touch.remoteID == remoteID){
					return touch;
				}
			}
			return null;
		}


    当有一个新点出现时,我们必须为它指定一个指向显示对象,以便从其向舞台冒泡事件,如果从这个点没有找到显示对象,则直接对舞台抛事件。注意,只有InteractiveObject才能抛出触摸事件,而Bitmap或Shape则不能接受鼠标事件

[javascript] view plain copy
print ?
  1. //搜索舞台元素    
  2. private function findDisplayObject(x:Number,y:Number):InteractiveObject{  
  3.     var obj:DisplayObject;  
  4.     var objArray:Array = _stage.getObjectsUnderPoint(new Point(x,y));  
  5.     if(objArray.length>0){  
  6.         obj=objArray[objArray.length-1];  
  7.         if(!(obj is InteractiveObject)){  
  8.             obj = obj.parent;  
  9.         }  
  10.         return obj;  
  11.     }else{  
  12.         return _stage;  
  13.     }  
  14. }  
		//搜索舞台元素  
		private function findDisplayObject(x:Number,y:Number):InteractiveObject{
			var obj:DisplayObject;
			var objArray:Array = _stage.getObjectsUnderPoint(new Point(x,y));
			if(objArray.length>0){
				obj=objArray[objArray.length-1];
				if(!(obj is InteractiveObject)){
					obj = obj.parent;
				}
				return obj;
			}else{
				return _stage;
			}
		}

    而由于从tuio里发送过来的事件都是以TUIO自己习惯进行编号的,为了防止与本地的触摸冲突,我们需要给每个触摸点一个本地的ID,本地的触摸编号从1开始到255结束,我们就从256开始,上限随你设定,尽管你设置的上限足够大,但是必须为其准备一个超出上限了就返回-1的默认值

[javascript] view plain copy
print ?
  1.         private function getFreeID():int{  
  2.             for(var i:int=256;i<1024;i++){  
  3.                 var used:Boolean=false;  
  4.                 for each(var temp:TuioObject in _touchList){  
  5.                     used = i == temp.id;  
  6.                 }  
  7.                 if(!used)return i;  
  8.             }  
  9.             return -1;  
  10.         }  
        private function getFreeID():int{
            for(var i:int=256;i<1024;i++){
                var used:Boolean=false;
                for each(var temp:TuioObject in _touchList){
                    used = i == temp.id;
                }
                if(!used)return i;
            }
            return -1;
        }

    为了让程序更清晰一点,我们将   触摸点生效、触摸点移动、触摸点消失  三个状态的处理函数分开来写。

[javascript] view plain copy
print ?
  1.               //应用新的触摸点  
  2. private function addTouch(touchPoint:TuioObject):void{  
  3.     touchPoint.target = findDisplayObject(touchPoint.x,touchPoint.y);  
  4.     if(touchPoint.target == _stage){  
  5.         _stage.dispatchEvent(new TouchEvent(TouchEvent.TOUCH_BEGIN,  
  6.             true,false,touchPoint.id,false,touchPoint.x,touchPoint.y));  
  7.     }else{  
  8.         var local:Point = touchPoint.target.globalToLocal(new Point(touchPoint.x,touchPoint.y));  
  9.         touchPoint.target.dispatchEvent(new TouchEvent(TouchEvent.TOUCH_BEGIN,  
  10.             true,false,touchPoint.id,false,local.x,local.y));  
  11.     }  
  12. }  
  13.   
  14. //触摸点移动  
  15. private function moveTouch(touchPoint:TuioObject):void{  
  16.     var oldTarget:InteractiveObject = touchPoint.target;  
  17.     touchPoint.target = findDisplayObject(touchPoint.x,touchPoint.y);  
  18.     var local:Point = touchPoint.target.globalToLocal(new Point(touchPoint.x,touchPoint.y));  
  19.     if(touchPoint.target == oldTarget){  
  20.         oldTarget.dispatchEvent(new TouchEvent(TouchEvent.TOUCH_MOVE,  
  21.             true,false,touchPoint.id,false,local.x,local.y));  
  22.     }else{  
  23.         var old:Point = oldTarget.globalToLocal(new Point(touchPoint.x,touchPoint.y));  
  24.         oldTarget.dispatchEvent(new TouchEvent(TouchEvent.TOUCH_OUT,  
  25.             true,false,touchPoint.id,false,old.x,old.y,NaN,NaN,NaN,touchPoint.target));  
  26.           
  27.         touchPoint.target.dispatchEvent(new TouchEvent(TouchEvent.TOUCH_OVER,  
  28.             true,false,touchPoint.id,false,local.x,local.y,NaN,NaN,NaN,touchPoint.target));  
  29.         touchPoint.target.dispatchEvent(new TouchEvent(TouchEvent.TOUCH_MOVE,  
  30.             true,false,touchPoint.id,false,local.x,local.y));  
  31.     }  
  32. }  
  33.   
  34. //触摸点消失  
  35. private function removeTouch(touchPoint:TuioObject):void{  
  36.     var oldTarget:InteractiveObject = touchPoint.target;  
  37.     touchPoint.target = findDisplayObject(touchPoint.x,touchPoint.y);  
  38.     var local:Point = touchPoint.target.globalToLocal(new Point(touchPoint.x,touchPoint.y));  
  39.     if(touchPoint.target == oldTarget){  
  40.         oldTarget.dispatchEvent(new TouchEvent(TouchEvent.TOUCH_END,  
  41.             true,false,touchPoint.id,false,local.x,local.y));  
  42.     }else{  
  43.         var old:Point = oldTarget.globalToLocal(new Point(touchPoint.x,touchPoint.y));  
  44.         oldTarget.dispatchEvent(new TouchEvent(TouchEvent.TOUCH_OUT,  
  45.             true,false,touchPoint.id,false,old.x,old.y,NaN,NaN,NaN,touchPoint.target));  
  46.           
  47.         touchPoint.target.dispatchEvent(new TouchEvent(TouchEvent.TOUCH_OVER,  
  48.             true,false,touchPoint.id,false,local.x,local.y,NaN,NaN,NaN,touchPoint.target));  
  49.         touchPoint.target.dispatchEvent(new TouchEvent(TouchEvent.TOUCH_END,  
  50.             true,false,touchPoint.id,false,local.x,local.y));  
  51.     }  
  52. bsp;               }  
                //应用新的触摸点
		private function addTouch(touchPoint:TuioObject):void{
			touchPoint.target = findDisplayObject(touchPoint.x,touchPoint.y);
			if(touchPoint.target == _stage){
				_stage.dispatchEvent(new TouchEvent(TouchEvent.TOUCH_BEGIN,
					true,false,touchPoint.id,false,touchPoint.x,touchPoint.y));
			}else{
				var local:Point = touchPoint.target.globalToLocal(new Point(touchPoint.x,touchPoint.y));
				touchPoint.target.dispatchEvent(new TouchEvent(TouchEvent.TOUCH_BEGIN,
					true,false,touchPoint.id,false,local.x,local.y));
			}
		}
		
		//触摸点移动
		private function moveTouch(touchPoint:TuioObject):void{
			var oldTarget:InteractiveObject = touchPoint.target;
			touchPoint.target = findDisplayObject(touchPoint.x,touchPoint.y);
			var local:Point = touchPoint.target.globalToLocal(new Point(touchPoint.x,touchPoint.y));
			if(touchPoint.target == oldTarget){
				oldTarget.dispatchEvent(new TouchEvent(TouchEvent.TOUCH_MOVE,
					true,false,touchPoint.id,false,local.x,local.y));
			}else{
				var old:Point = oldTarget.globalToLocal(new Point(touchPoint.x,touchPoint.y));
				oldTarget.dispatchEvent(new TouchEvent(TouchEvent.TOUCH_OUT,
					true,false,touchPoint.id,false,old.x,old.y,NaN,NaN,NaN,touchPoint.target));
				
				touchPoint.target.dispatchEvent(new TouchEvent(TouchEvent.TOUCH_OVER,
					true,false,touchPoint.id,false,local.x,local.y,NaN,NaN,NaN,touchPoint.target));
				touchPoint.target.dispatchEvent(new TouchEvent(TouchEvent.TOUCH_MOVE,
					true,false,touchPoint.id,false,local.x,local.y));
			}
		}
		
		//触摸点消失
		private function removeTouch(touchPoint:TuioObject):void{
			var oldTarget:InteractiveObject = touchPoint.target;
			touchPoint.target = findDisplayObject(touchPoint.x,touchPoint.y);
			var local:Point = touchPoint.target.globalToLocal(new Point(touchPoint.x,touchPoint.y));
			if(touchPoint.target == oldTarget){
				oldTarget.dispatchEvent(new TouchEvent(TouchEvent.TOUCH_END,
					true,false,touchPoint.id,false,local.x,local.y));
			}else{
				var old:Point = oldTarget.globalToLocal(new Point(touchPoint.x,touchPoint.y));
				oldTarget.dispatchEvent(new TouchEvent(TouchEvent.TOUCH_OUT,
					true,false,touchPoint.id,false,old.x,old.y,NaN,NaN,NaN,touchPoint.target));
				
				touchPoint.target.dispatchEvent(new TouchEvent(TouchEvent.TOUCH_OVER,
					true,false,touchPoint.id,false,local.x,local.y,NaN,NaN,NaN,touchPoint.target));
				touchPoint.target.dispatchEvent(new TouchEvent(TouchEvent.TOUCH_END,
					true,false,touchPoint.id,false,local.x,local.y));
			}
                }

    最后  关键的处理TUIO的xml消息的函数

[javascript] view plain copy
print ?
  1.                 //解析消息  
  2.         private function processMessage(msg:XML):void{  
  3.             //点是否存在  不存在则从列表中移除  
  4.             var node:XML;  
  5.             var touch:TuioObject;  
  6.             for each(node in msg.MESSAGE)  
  7.             {  
  8.                 if(node.ARGUMENT[0].@VALUE == "alive")  
  9.                 {  
  10.                     for each (touch in _touchList)touch.isExist=false;  
  11.                       
  12.                     for each(var aliveItem:XML in node.ARGUMENT.(@VALUE != "alive"))  
  13.                     {  
  14.                         touch = searchByRemoteName(int(aliveItem.@VALUE));  
  15.                         if(touch){  
  16.                             touch.isExist=true;  
  17.                         }  
  18.                     }  
  19.                 }  
  20.             }  
  21.             //处理事件  
  22.             var remoteID:int;  
  23.             var x:Number;  
  24.             var y:Number;  
  25.             var touchObj:TuioObject;  
  26.             for each(node in msg.MESSAGE)  
  27.             {  
  28.                 if(node.ARGUMENT[0] && node.@NAME == "/tuio/2Dcur")  
  29.                 {  
  30.                     if(node.ARGUMENT[0].@VALUE == "set")   
  31.                     {  
  32.                         remoteID = int(node.ARGUMENT[1].@VALUE);  
  33.                         x = Number(node.ARGUMENT[2].@VALUE) * _stageWidth;  
  34.                         y = Number(node.ARGUMENT[3].@VALUE) * _stageHeight;  
  35.                           
  36.                         touchObj=searchByRemoteName(remoteID);  
  37.                         if(!touchObj){  
  38.                             var id:int = getFreeID();  
  39.                             if(id == -1)return;  
  40.                             touchObj = new TuioObject(id,x,y);  
  41.                             touchObj.remoteID = remoteID;  
  42.                             _touchList.push(touchObj);  
  43.                             addTouch(touchObj);  
  44.                         }else{  
  45.                             touchObj.x = x ;touchObj.y = y;  
  46.                             moveTouch(touchObj);  
  47.                         }  
  48.                     }  
  49.                 }  
  50.             }  
  51.               
  52.             //处理不存在的点  
  53.             for(var i:int=_touchList.length-1;i>=0;i--){  
  54.                 if(!_touchList[i].isExist){  
  55.                     removeTouch(_touchList[i]);  
  56.                     _touchList.splice(i,1);  
  57.                 }  
  58.             }  
  59.         }  
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值