cocosCreator JS 开发 之 大地图的使用与摄像机

项目需求，要做一张很大的地图，大过显示器。。。

在这张地图上面，滑动屏幕查看整张地图上所有的元素。

我的地图是放在画布下面

：主要的内容，主相机的大小就是我们屏幕的大小，所以我们做的只是移动相机的相对位置，让他在整张地图上面俯瞰。

编写场景脚本 map.js

/*
    游戏主界面
*/
var HttpHelp = require("http");
var globaluserinfo = require("GlobaluserInfo")

    // use this for initialization
    onLoad: function () {
        var self = this;
        this.scale = 0.5;
        this.isDistance = true;
        var listener = {
                            event: cc.EventListener.TOUCH_ALL_AT_ONCE,

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

    },


    // called every frame
    update: function (dt) {
        //this.label.string = "this.text";
    },


    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]); //得到缩放比例
            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;

            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 (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));

    },

});

该脚本挂载在canvas节点下。

附加：1、屏幕滑动的时候，会将地图划出显示界面，出现黑块，虽然这里做了一点处理，但是还是不是很好用，

            2、屏幕放大的时候，放大倍数会破坏原有的滑动边界。需要拓展

cc.find("Canvas/Main Camera").getComponent(cc.Camera).zoomRatio = this.scale;

设置摄像机的zoomRatio时，会将整个屏幕的元素放大。

这里拓展一个功能，就是，我们在移动摄像机的时候，像有一些元素是不需要移动的，也不需要放大的。但是在这个层次关系中，他会出现一起放大的情况，所以添加了一个静态层，让他跟这个摄像机一起移动位置。

可能是我的设计模式不对。希望大佬看见能留言指点一二