hanyeah-pixijs入门-移动端click

16

2016
08

pixijs入门-移动端click

pixi.js在移动端用touch事件，pc端用mouse事件，引擎内没有做转换。开发和测试会有很多不方便。

移动端，只实现了touchstart、touchmove、touchend，大多数情况下是不够用的，还需要自己来扩展。

比如，即使是移动端，点击一个按钮的逻辑，也应该是在按钮上按下手指，然后在按钮上抬起手指，如果直接用touchstart事件是不合适的，因为用户可以在按钮上按下，然后返回了，把手指移出按钮在弹起，这时不应该响应点击事件，同样用touchend也是不合适的。

按钮点击还是要用click，pixi.js没有提供click，就需要我们自己实现了。

demo:

浏览器切换到手机测试模式，然后点击小兔子，控制台会有输出。

html代码如下：

<html>
	<head>
		<title>pixijs入门-click</title>
		<script type="text/javascript" src="http://hanyeah.com/js/pixi.min.js"></script>
		<script type="text/javascript" src="js/MouseEventManager.js"></script>
		<script type="text/javascript">

		var frameRate=100;
		var renderer;
		var stage;
		var tf;
		var fps=0;
		var ticker;
		window.onload = function() {
			renderer = new PIXI.WebGLRenderer(600, 400);
			document.body.appendChild(renderer.view);
			stage = new PIXI.Container();

			var sprite = new PIXI.Sprite.fromImage('bunny.png');
			stage.addChild(sprite);
			sprite.y=200;
			sprite.scale.x=4;
			sprite.scale.y=4;

			sprite.interactive = true;
			MouseEventManager.add(sprite);
			sprite.addListener("click",function(e){ 
				console.log(e);
			});
			
			tf = new PIXI.Text("fps:0", {
				font: '24px Arial',
				fill: 0xff1010,
				align: 'left'
			});
			stage.addChild(tf);

			
			ticker=PIXI.ticker.shared;
			ticker.autoStart=false;
			ticker.start();
			ticker.add(function(time){ 
				renderer.render(stage);
			});

			setInterval(showFps, 1000);
		}
		function showFps(){
			tf.text="fps:"+Math.round(ticker.FPS);
			
		}
		
		</script>
	</head>
	<body>
	</body>
</html>

关键在于这句：

MouseEventManager.add(sprite);

MouseEventManager在MouseEventManager.js中定义，通过touch事件实现click事件。

MouseEventManager.js代码如下：

//------------------------MouseEventManager.js--------------------------
//参考：https://developer.mozilla.org/zh-CN/docs/Web/API/TouchEvent


var MouseEventManager=new (function(){ 
	var s=this;
	var list=[];
	s.add=function(dis){
		s.remove(dis);
		var item=new MouseEventItem(dis);
		list.push(item);
	}
	s.remove=function(dis){ 
		for(var i=0,len=list.length;i<len;i++){ 
			var item=list[i];
			if(item.dis==dis){ 
				item.distroy();
				list.splice(i,1);
				break;
			}
		}
	}
});

var MouseEventItem=function(dis){ 
	var clicked=false;
	dis.addListener("touchstart",touchStartHandler);
	var interval=0;
	var lastE=null;
	function touchStartHandler(e){
		lastE=e;
		clicked=false;
		dis.addListener("touchend",touchEndHandler);
		document.addEventListener("touchend",touchCancel);
		document.addEventListener("touchcancel",touchCancel);
		document.addEventListener("touchmove",touchMove);
		interval=setTimeout(longTouch,2000);
	}
	function touchMove(){ 
		document.removeEventListener("touchmove",touchMove);
		if(interval)clearTimeout(interval);
		lastE=null;
	}
	function longTouch(){ 
		dis.emit("longtouch",lastE,dis);
		removelistener01();
	}
	function touchEndHandler(e){
		clicked=true;
		dis.emit("click",e,dis);
		removelistener01();
	}
	function touchCancel(e){
		if(!clicked){ 
			dis.emit("cancel",e,dis);
			removelistener01();
		}
	}

	function removelistener01(){ 
		dis.removeListener("touchend",touchEndHandler);
		document.removeEventListener("touchend",touchCancel);
		document.removeEventListener("touchcancel",touchCancel);
		document.removeEventListener("touchmove",touchMove);
		if(interval)clearTimeout(interval);
		lastE=null;
	}
	this.distroy=function(){ 
		dis.removeListener("touchstart",touchStartHandler);
		removelistener01();
		dis=null;
	}
}

pixi.js中事件只有一个target属性，相当于as中的currenttarget，没有as中的target属性。直接给事件添加属性，然后通过emit发送是不行的。后来我发现，emit方法可以指定多个参数，我们可以通过发送多个参数来实现target的传递。

源码打包下载