LayaAir 游戏引擎 多点触控演示

多点触控演示"/>

LayaAir 游戏引擎 多点触控演示

最近发现LayaAir 引擎示例 对触控介绍的很少

所以写了一个多点触控的小例子 

这里例子需要在手机浏览器下才能看到效果

希望可以和大家分享一下

先准备一个圆形 模拟触控效果

class Round extends Laya.Sprite{private timeLine:Laya.TimeLine = new Laya.TimeLine();private count:number;constructor(){super();}show(){this.graphics.drawCircle(0, 0, 45, "#ff0000");console.log("init");}hide(){console.log("start");this.timeLine.addLabel("zoom",0).to(this,{scaleX:3, scaleY:3, alpha:0},500,null,0);this.timeLine.play(0,true);this.timeLine.on(Laya.Event.COMPLETE,this,this.onComplete);}private onComplete():void{this.timeLine.offAll();this.removeSelf();}
}

1. 首先定义 五个手指的数组 当然 如果你想两只手都上 或者加上脚趾 20个也是可以的!

private rounds:Array<Round> = [null,null,null,null,null];

2. 添加对鼠标的按下和抬起的监听

Laya.stage.on(Laya.Event.MOUSE_DOWN,this,this.mouseDown);
Laya.stage.on(Laya.Event.MOUSE_UP,this,this.mouseUp);

3.在触控点显示一个圆形进行控制 释放时放大并圆形消失

    mouseDown(e:Laya.Event){var touches: Array<any> = e.touches;let round:Round = new Round();round.pos(Laya.stage.mouseX,Laya.stage.mouseY);Laya.stage.addChild(round);this.rounds[e.touchId] = round;round.show(); }mouseUp(e:Laya.Event){console.info(e);this.rounds[e.touchId].hide();}

实现的思路就是使用e.touchId来决定触控点的index 

另外 e.touches 中的数据 只有在触控的时候才有数据,  如果需要做更多操作 还需要获取其中的属性 进行操作 

测试的时候可以使用浏览器中的模拟触控

最后为e.touches 列表中 touche 包含的属性

1. 1. clientX:174
   2. clientY:299
   3. force:1
   4. identifier:0
   5. pageX:174
   6. pageY:299
   7. radiusX:11.5
   8. radiusY:11.5
   9. rotationAngle:0
   10. screenX:657
   11. screenY:471
   12. stageX:174
   13. stageY:299
   14. target:canvas#layaCanvas