一、各種尺寸屬性
2.Laya.Stage
/**設(shè)計(jì)寬度（初始化時(shí)設(shè)置的寬度Laya.init(width,height)）*/
public var designWidth:Number = 0;
/**設(shè)計(jì)高度（初始化時(shí)設(shè)置的高度Laya.init(width,height)）*/
public var designHeight:Number = 0;
override public function set width(value:Number):void {
this.designWidth = value;
super.width = value;
Laya.timer.callLater(this, _changeCanvasSize);
}
override public function set height(value:Number):void {
this.designHeight = value;
super.height = value;
Laya.timer.callLater(this, _changeCanvasSize);
}
/**當(dāng)前視窗由縮放模式導(dǎo)致的 X 軸縮放系數(shù)瞬浓。*/
public function get clientScaleX():Number {
return _transform ? _transform.getScaleX() : 1;
}
/**當(dāng)前視窗由縮放模式導(dǎo)致的 Y 軸縮放系數(shù)寞埠。*/
public function get clientScaleY():Number {
return _transform ? _transform.getScaleY() : 1;
}
3.html canvas
<div id="layaContainer">
<canvas id="layaCanvas" width="2048" height="1154"
style="position: absolute; left: 0px; top: 0px; background: none;
transform-origin: 0px 0px 0px;
transform: matrix(0.5, 0, 0, 0.5, 0, 96);">
</canvas>
</div>
下面來做個(gè)測(cè)試
Laya.init(1136, 640, Laya.WebGL);
Laya.stage.screenMode = Stage.SCREEN_HORIZONTAL;
Laya.stage.alignH = Stage.ALIGN_CENTER;
Laya.stage.alignV = Stage.ALIGN_MIDDLE;
Laya.stage.scaleMode = Stage.SCALE_SHOWALL;
...
Laya.stage.on(Laya.Event.RESIZE, this, this.resize);
private resize() {
console.log("Browser.width",Laya.Browser.width);
console.log("Browser.height",Laya.Browser.height);
console.log("stage.width",Laya.stage.width);
console.log("stage.height",Laya.stage.height);
console.log("html canvas width",Laya.Render.canvas.getAttribute("width"));
console.log("html canvas height",Laya.Render.canvas.getAttribute("height"));
}
Browser.width 2048
Browser.height 1536
stage.width 1136
stage.height 640
html canvas width 2048
html canvas height 1154
說明：因?yàn)長(zhǎng)aya.init(1136, 640, Laya.WebGL);所以stage.width,height就是這個(gè)寬高戚丸。然后當(dāng)前是在IPAD屏幕下疗疟，因?yàn)橛昧薙CALE_SHOWALL模式梦抢，畫面上下端出現(xiàn)了白條额嘿。所以能看到Browser.height 是比html canvas height 要高一些官撼。然后切換到IPHONE5屏幕時(shí)梧躺，發(fā)現(xiàn)這三者是一致的。
二傲绣、屏幕適配
先看一下官方例子中的舞臺(tái)尺寸和矩形位置大小
(function()
{
Laya.init(550, 400);
Laya.stage.scaleMode = Stage.SCALE_NOSCALE;
Laya.stage.bgColor = "#232628";
createCantralRect();
})();
function createCantralRect()
{
rect = new Sprite();
rect.graphics.drawRect(-100, -100, 200, 200, "gray");
Laya.stage.addChild(rect);
updateRectPos();
}
function updateRectPos()
{
rect.x = Laya.stage.width / 2;
rect.y = Laya.stage.height / 2;
}
在一個(gè)sprite中掠哥，以0,0為中心，繪制了200,200大小的矩形秃诵，然后添加到舞臺(tái)中心续搀。舞臺(tái)初始化大小是550,400。
那么在chrome中運(yùn)行例子顷链，按F12后目代，切換手機(jī)尺寸屈梁，通過觀察layaCanvas的width和height，就能看到不同模式下的區(qū)別(下面以豎屏為例榛了，橫屏同樣規(guī)則)
<canvas id="layaCanvas" width="550" height="400"
style="position: absolute; left: 0px; top: 0px;
background: rgb(35, 38, 40);
transform-origin: 0px 0px 0px;
transform: matrix(1, 0, 0, 1, 0, 0);"
>
</canvas>
一在讶、SCALE_NOSCALE
Laya.stage.scaleMode = Stage.SCALE_NOSCALE;
應(yīng)用保持設(shè)計(jì)寬高不變，不縮放不變型霜大，stage的寬高等于設(shè)計(jì)寬高构哺。
整個(gè)應(yīng)用程序的大小固定，因此战坤，即使播放器窗口的大小更改曙强，它也會(huì)保持不變。如果播放器窗口比內(nèi)容小途茫，則可能進(jìn)行一些裁切碟嘴。
測(cè)試結(jié)果：
layaCanvas的width和height就沒變過，一直是550,400囊卜。屏幕小時(shí)會(huì)出現(xiàn)裁切娜扇，至于矩形，則一直保持在中央栅组。
二雀瓢、SCALE_SHOWALL
Laya.stage.scaleMode = Stage.SCALE_SHOWALL;
應(yīng)用顯示全部?jī)?nèi)容，按照最小比率縮放玉掸，等比縮放不變型刃麸，一邊可能會(huì)留空白，stage的寬高等于設(shè)計(jì)寬高
整個(gè)應(yīng)用程序在指定區(qū)域中可見司浪，且不發(fā)生扭曲泊业，同時(shí)保持應(yīng)用程序的原始高寬比。應(yīng)用程序的兩側(cè)可能會(huì)顯示邊框断傲。
測(cè)試結(jié)果：
layaCanvas的width和height一直根據(jù)屏幕變化脱吱。比如IPHONE6的375,667尺寸下智政，寬度就變成最大值375认罩，而高度因?yàn)橐３?50，440的比例续捂，也等比例變成273了垦垂。
這就導(dǎo)致豎屏模式下，canvas下面會(huì)出現(xiàn)很多空白邊框
三牙瓢、SCALE_EXACTFIT
應(yīng)用根據(jù)屏幕大小鋪滿全屏劫拗，非等比縮放會(huì)變型，stage的寬高等于設(shè)計(jì)寬高矾克。
整個(gè)應(yīng)用程序在指定區(qū)域中可見页慷，但不嘗試保持原始高寬比。可能會(huì)發(fā)生扭曲酒繁，應(yīng)用程序可能會(huì)拉伸或壓縮顯示滓彰。
測(cè)試結(jié)果：
layaCanvas的width和height沒變過，一直是550,400州袒。但是矩形已經(jīng)變形了揭绑，切換尺寸時(shí)，transform:matrix一直在變化郎哭，應(yīng)該是直接拉伸了
四他匪、SCALE_NOBORDER
應(yīng)用按照最大比率縮放顯示，寬或高方向會(huì)顯示一部分夸研，等比縮放不變型邦蜜，stage的寬高等于設(shè)計(jì)寬高。
整個(gè)應(yīng)用程序填滿指定區(qū)域亥至，不發(fā)生扭曲畦徘，但有可能進(jìn)行一些裁切，同時(shí)保持應(yīng)用程序的原始高寬比抬闯。
測(cè)試結(jié)果：
layaCanvas的width和height沒變過井辆，一直是550,400。邊緣被填滿了溶握，不過矩形被裁切杯缺。
五、還有三種模式
/**應(yīng)用保持設(shè)計(jì)寬高不變睡榆，不縮放不變型萍肆，stage的寬高等于屏幕寬高。*/
public static const SCALE_FULL:String = "full";
/**應(yīng)用保持設(shè)計(jì)寬度不變胀屿，高度根據(jù)屏幕比縮放塘揣，stage的寬度等于設(shè)計(jì)高度，高度根據(jù)屏幕比率大小而變化*/
public static const SCALE_FIXED_WIDTH:String = "fixedwidth";
/**應(yīng)用保持設(shè)計(jì)高度不變宿崭，寬度根據(jù)屏幕比縮放亲铡，stage的高度等于設(shè)計(jì)寬度，寬度根據(jù)屏幕比率大小而變化*/
public static const SCALE_FIXED_HEIGHT:String = "fixedheight";
綜上葡兑，一般為了顯示全部?jī)?nèi)容奖蔓，我們還是常用SCALE_SHOWALL這種模式。
六讹堤、橫屏豎屏
screenMode可以改變橫屏豎屏
七吆鹤、alignH,alignV
橫向?qū)R分為左中右，縱向?qū)R分為上中下洲守。
Laya.stage.alignH = Stage.ALIGN_CENTER;
//Laya.stage.alignV = Stage.ALIGN_MIDDLE;
Laya.stage.alignV = Stage.ALIGN_BOTTOM;
這個(gè)經(jīng)過測(cè)試疑务，layaCanvas的width和height也沒變過沾凄，matrix一直在變。
END
