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="/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的传递。
发表评论:
◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。