cocos2d-js关于对话框Layer的屏幕适配

当我们要制作一个类似于手机中的对话框的时候我们会用Layer代替、并且会对Layer限制大小，以达到我们要制作一个对话框的目的。

但是当我们改变屏幕的适配模式的时候如果用的是类似于this.setPosition(cc.p(50,30));这种绝对的坐标的时候会发生偏移。

代码如下：

/**
 * 游戏结束的对话框
 */
var DialogLayer = cc.LayerColor.extend({
    _listener:null,
    bottom_bg:null,
    onEnter: function () {
        this._super();
        this.setOpacity(100);
        this.initDialog();
        this.setColor(cc.color(0,0,0));
        var listener = cc.EventListener.create({
            event: cc.EventListener.TOUCH_ONE_BY_ONE,
            swallowTouches: true,
            onTouchBegan: function () {
                return true;
            }
        });
        cc.eventManager.addListener(listener,this);
        this._listener = listener;
        this.chooseGameModel();
    },
    initDialog: function () {
        this.bottom_bg = new cc.LayerColor(cc.color(255, 255, 255),400,400);
        this.bottom_bg.setPosition(cc.p((winSize.width / 2) - (this.bottom_bg.width / 2), (winSize.height / 2) - (this.bottom_bg.height / 2)));
        this.addChild(this.bottom_bg);
    },
    //选择游戏模式
    chooseGameModel: function () {
        var restartLabel = new cc.LabelTTF("重新开始", "Arial", 36);
        var restart = new cc.MenuItemLabel(restartLabel,this.restartGame,this);
        restart.setColor(cc.color(255, 0, 0));
        restart.setPosition(cc.p(-110 , -this.bottom_bg.height + 180));

        var model_1 = new cc.LabelTTF("模式一", "Arial", 36);
        var modelOne = new cc.MenuItemLabel(model_1,this.modelOneGame,this);
        modelOne.setColor(cc.color(255, 0, 0));
        modelOne.setPosition(cc.p(-110 , -this.bottom_bg.height + 30 ));

        var model_3 = new cc.LabelTTF("模式3", "Arial", 36);
        var modelThree = new cc.MenuItemLabel(model_3,this.modelThreeGame,this);
        modelThree.setColor(cc.color(255, 0, 0));
        modelThree.setPosition(cc.p(-110 , -this.bottom_bg.height -120));
        var menu = new cc.Menu(restart,modelOne,modelThree);

        this.bottom_bg.addChild(menu);
    },
    //点击游戏重新开始
    restartGame: function () {
        this.initData();
    },
    //模式一
    modelOneGame: function () {
        this.initData();
    },
    //模式三
    modelThreeGame: function () {
        this.initData();
    },
    initData: function () {
    }
});

 比如在shwo_all模式下你已经把位置设定好了、但是如果你改成fixed_width模式的时候会发生变型、并且Item的位置发生改变

这是是因为MenuItem添加到DIalogLayer的时候的原点坐标是屏幕的中点。而Layer的原点坐标是屏幕的左下点。所以当要确定MenuItem的位置的时候要计算好当Layer坐标发生改变、并且在Layer发生变型的情况下的坐标也要相应的改变。则修改后的代码如下：

/**
 * 游戏结束的对话框
 */
var DialogLayer = cc.LayerColor.extend({
    _listener:null,
    bottom_bg:null,
    dialogWidth:null,
    dialogHeight:null,
    ctor: function () {
        this._super();
        this.initDialog();
    },
    onEnter: function () {
        this._super();
        var listener = cc.EventListener.create({
            event: cc.EventListener.TOUCH_ONE_BY_ONE,
            swallowTouches: true,
            onTouchBegan: function () {
                return true;
            }
        });
        cc.eventManager.addListener(listener,this);
        this.chooseGameModel();
    },
    initDialog: function () {
        this.setColor(cc.color(255,255,255));
        this.setContentSize(400,400);
        var winSize = cc.winSize;
        this.dialogWidth = this.getContentSize().width;
        this.dialogHeight = this.getContentSize().height;
        this.x = winSize.width/2 - this.dialogWidth/2;  //移动到屏幕的中间
        this.y = winSize.height/2 - this.dialogHeight/2;//移动到屏幕中间
    },
    //选择游戏模式
    chooseGameModel: function () {
        //要确定的位置就是 屏幕中点的位置减去你要移动到的位置
        //比如要放在跟DialogLayer的中点则必须 cc.p(-(winSize.width/2 - this.dialogWidth/2),-(winSize.height/2 - this.dialogHeight/2))；
        var centerVertical = -(winSize.width/2 - this.dialogWidth/2);
        var top = -(winSize.height/2 - this.dialogHeight);
        var buttom = -(winSize.height/2);
        var centerHori = -(winSize.height/2 - this.dialogHeight/2);
        var restartLabel = new cc.LabelTTF("重新开始", "Arial", 36);
        var restart = new cc.MenuItemLabel(restartLabel,this.restartGame,this);
        restart.setColor(cc.color(255, 0, 0));
        restart.setPosition(cc.p(centerVertical , top - 30));

        var model_1 = new cc.LabelTTF("模式一", "Arial", 36);
        var modelOne = new cc.MenuItemLabel(model_1,this.modelOneGame,this);
        modelOne.setColor(cc.color(255, 0, 0));
        modelOne.setPosition(cc.p(centerVertical , centerHori ));

        var model_3 = new cc.LabelTTF("模式3", "Arial", 36);
        var modelThree = new cc.MenuItemLabel(model_3,this.modelThreeGame,this);
        modelThree.setColor(cc.color(255, 0, 0));
        modelThree.setPosition(cc.p(centerVertical , buttom + 30));
        var menu = new cc.Menu(restart,modelOne,modelThree);

        this.addChild(menu);
    },
    //点击游戏重新开始
    restartGame: function () {
        this.initData();
    },
    //模式一
    modelOneGame: function () {
        this.initData();
    },
    //模式三
    modelThreeGame: function () {
        _cardsRandom.length = 0;
        gameModel = _GAME_MODEL_THREE;
        this.initData();
    },
    initData: function () {
    }
});

这样修改后、无论Layer的坐标怎么改变、Layer如何变型都不会影响MenuItem在Layer的相对位置

如图：