欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

cocosCreator 滑动屏幕事件(tilemap)

程序员文章站 2022-06-11 10:16:35
...

1、初始化(添加监听)

        this.scale = 1;
        this.isDistance = true;
        var listener = {
                            event: cc.EventListener.TOUCH_ALL_AT_ONCE,

                                onTouchesBegan:function(touch,event)     
                                {
                                    if (self.stopTouch) { return true; }
                                    self.TouchJudge = false;
                                    self.onTouchStart(touch,event);
                                    return true;
                                },
                                onTouchesMoved:function(touch,event)
                                {
                                    if (self.stopTouch) { return true; }
                                    self.onTouchMove(touch,event);
                                    return true;
                                },
                                onTouchesEnded:function(touch, event){
                                    self.onTouchEnd(touch,event);
                                    return true;
                                }
                        }
       cc.eventManager.addListener(listener, cc.find("Canvas/baseMap")); 

2、触摸事件

    onTouchStart(touch,event)
    {
        this.isTouch = false;   
        this.isDoubleTouch = false;   //是否为多触摸点
        this.start = [];              //存放触摸坐标
        this.now;                     //当前时间
        this.delta;                   //两次触发事件时间差


        this.start = event.getTouches(); //得到第一组两个点
        if (event.getTouches().length == 1)
        {
             //滑动事件
            this.isTouch = true;
            this.temporaryX = touch[0].getLocationX(); 
            this.temporaryY = touch[0].getLocationY();
            this.CameraX = cc.find("Canvas/Main Camera").x;
            this.CameraY = cc.find("Canvas/Main Camera").y; 
            
        }else if(event.getTouches().length >= 2)
        {
            this.isDoubleTouch = true;
        }

    },

    onTouchMove(touch,event)
    {

        if (event.getTouches().length >= 2) { //手势事件
            this.isDoubleTouch = true;
            if (this.isDistance == true)
            {
                
                var tmp =  event.getTouches();
                this.start = [[tmp[0].getLocationX(), tmp[0].getLocationY()], [tmp[1].getLocationX(), tmp[1].getLocationY()]];
                this.isDistance = false;
            } 
            var now = event.getTouches(); //得到第二组两个点

            var scale = this.getDistance([now[0].getLocationX(), now[0].getLocationY()],[now[1].getLocationX(), now[1].getLocationY()]) / this.getDistance(this.start[0],this.start[1]); //得到缩放比例
            scale = (scale - 1) * 0.01 + 1;
            this.scale = scale * this.scale;

            if (this.scale < 0.5)
            {
                this.scale = 0.5;
            }else if(this.scale > 2.5)
            {
                this.scale = 2.5;
            }
            cc.find("Canvas/Main Camera").getComponent(cc.Camera).zoomRatio = this.scale;
            cc.find("Canvas/StaticViewLayer").scale = 1/this.scale;
            this.getTouchPosition(touch,event,true);
        } else if (event.getTouches().length == 1 && this.isTouch && this.isDoubleTouch == false) {
            this.getTouchPosition(touch,event,false);
        }
    },

    onTouchEnd(touch,event)
    {
        if (event.getTouches().length == 1 && this.isDoubleTouch == false) {
            this.delta = Date.now() - this.now; //计算两次点击时间差
            this.now = Date.now();

            if (this.delta > 0 && this.delta <= 250) { //双击事件
                //cc.find("Canvas/Main Camera").getComponent(cc.Camera).zoomRatio = 2.5;
                //this.scale = 2.5;
                this.getTouchPosition(touch,event,true);
            }
        }
        this.isDistance = true;

    },
    /*

     * 封装触摸事件

     */
    getTouchPosition(touch,event,judge)
    {

        var CanvasX = (cc.find("Canvas").getContentSize().width/2) / this.scale;
        var CanvasY = (cc.find("Canvas").getContentSize().height/2) / this.scale;
        var baseMapX = cc.find("Canvas/baseMap").getContentSize().width/2;
        var baseMapY = cc.find("Canvas/baseMap").getContentSize().height/2;
        var Camera = cc.find("Canvas/Main Camera");

        var DifferX = this.temporaryX - touch[0].getLocationX();
        var DifferY = this.temporaryY - touch[0].getLocationY();

        if (judge)
        {
            DifferX = 0;
            DifferY = 0;
        }

        ////判断是点击建筑还是移动地图
        if ((DifferX != 0 && DifferY != 0) || judge) {
            this.TouchJudge = true;
        }

        if (this.CameraX + DifferX <= baseMapX - CanvasX  && (this.CameraX + DifferX >= -(baseMapX) + CanvasX ))
        {
            Camera.x = this.CameraX + DifferX;
        }else
        {
            if (this.CameraX + DifferX > baseMapX - CanvasX)
            {
                Camera.x = baseMapX - CanvasX;
            }else
            {
                Camera.x = -(baseMapX) + CanvasX;
            } 
        }

        if (this.CameraY + DifferY <= baseMapY - CanvasY && (this.CameraY + DifferY >= -(baseMapY) + CanvasY ))
        {
            Camera.y = this.CameraY + DifferY;
        }else
        {
            if (this.CameraY + DifferY > baseMapY - CanvasY)
            {
                Camera.y = baseMapY - CanvasY;
            }else
            {
                Camera.y = -(baseMapY) + CanvasY;
            } 
        }
        cc.find("Canvas/StaticViewLayer").x = Camera.x;
        cc.find("Canvas/StaticViewLayer").y = Camera.y;       
    },

    /*

     * 两点的距离

     */
    getDistance(p1, p2) {

        var x = (p2[0] - p1[0]);

        var y = (p2[1] - p1[1]);

        return Math.sqrt((x * x) + (y * y));

    },

 

相关标签: cocosCreator