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的相对位置

如图：