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