目錄

LayaAir 寬高定義

螢幕縮放模式

LayaAir 寬高定義

1、設計寬高：專案程式碼中初始化舞臺 Laya.init() 中定義的寬高即為設計寬高

2、Stage 寬高：stage 寬高為遊戲舞臺實際大小的寬高

3、適配寬高：通過引擎的適配模式對設計寬高進行縮放改變後的寬高，為了便於區分理解，稱為適配寬高

4、畫布寬高：畫布寬高是指 HTML5 中 canvas 節點的寬高，遊戲中所有可見的內容都在畫布區域內

5、螢幕寬高：螢幕寬高是指手機瀏覽器螢幕的寬高，例如iphone6豎屏時的螢幕寬高為375*667。LayaAir引擎可以通過laya.utils.Browser.clientWidth 和 laya.utils.Browser.clientHeight 來獲取螢幕的寬與高。

6、物理寬高：手機螢幕視窗的實際寬高，LayaAir引擎可以通過laya.utils.Browser.width和laya.utils.Browser.height來獲取裝置螢幕螢幕的物理寬高。詳情可參考《LayaAir 螢幕適配-解析度、對齊模式》

螢幕縮放模式

1、螢幕縮放指視窗大小變化時，內容應該如何變化，這是螢幕適配經常遇到的問題，視窗大小變化也就意味著解析度變化。

2、laya.display.Stage，提供了 scaleMode (縮放模式)函式，共有引數值：

/**縮放模式。預設值為 "noscale"。</p>
* <p><ul>取值範圍：
* <li>"noscale" ：不縮放；</li>
* <li>"exactfit" ：全屏不等比縮放；</li>
* <li>"showall" ：最小比例縮放；</li>
* <li>"noborder" ：最大比例縮放；</li>
* <li>"full" ：不縮放，stage的寬高等於螢幕寬高；</li>
* <li>"fixedwidth" ：寬度不變，高度根據螢幕比縮放；</li>
* <li>"fixedheight" ：高度不變，寬度根據螢幕比縮放；</li>
* <li>"fixedauto" ：根據寬高比，自動選擇使用fixedwidth或fixedheight；</li>
* </ul></p>
*/
scaleMode

: string;

3、同樣為了方便呼叫，Laya.Stage 提供了它們對應的常量：

//初始化引擎,不支援WebGL時會自動切換至Canvas
Laya.init(500, 350,Laya.WebGL);

//在舞臺上繪製一張底圖作為背景，圖片解析度：686 * 325
var bgImageSprite = new Laya.Sprite();
bgImageSprite.loadImage("https://www.jetbrains.com/idea/img/screenshots/idea_overview_3.png");
Laya.stage.addChild(bgImageSprite);

//在舞臺繪製一個矩形
var showInfoSprite = new Laya.Sprite();
showInfoSprite.pos(10,10);//精靈在舞臺位置為 x=10,y=10
//矩形起點(0,0)，矩形長100，寬50
showInfoSprite.graphics.drawRect(0,0,100,50,"#CC6633");
//在矩形的中間繪製一行文字
showInfoSprite.graphics.fillText("縮放模式",50,10,"20px Arial","#fff","center");
Laya.stage.addChild(showInfoSprite);

//陣列儲存縮放模式
var scaleModes = [];
scaleModes.push(Laya.Stage.SCALE_NOSCALE);
scaleModes.push(Laya.Stage.SCALE_EXACTFIT);
scaleModes.push(Laya.Stage.SCALE_SHOWALL);
scaleModes.push(Laya.Stage.SCALE_NOBORDER);
scaleModes.push(Laya.Stage.SCALE_FULL);
scaleModes.push("fixedwidth");
scaleModes.push("fixedheight");
scaleModes.push("fixedauto");

//為整個舞臺繫結單擊事件；count 用於計數
var count = 0;
Laya.stage.on(Laya.Event.CLICK,this,stageClick);
function stageClick (){
    console.log("切換縮放模式為："+scaleModes[count]);
    //改變矩形顯示的文字內容
    showInfoSprite.graphics.clear();
    showInfoSprite.graphics.drawRect(0,0,100,50,"#CC6633");
    showInfoSprite.graphics.fillText(scaleModes[count],50,10,"20px Arial","#fff","center");
    //改變縮放模式
    Laya.stage.scaleMode = scaleModes[count++];
    count = count>7?0:count;
}

事例中：設計寬高：500, 350，圖片寬高：686 * 325

​ 1、full 模式完全按物理畫素渲染，螢幕有多大，適配的畫面就有多大，是高畫質常用的適配模式，但是在不同尺寸的螢幕裡，顯示內容的大小會有所不同，同時對於HTML5遊戲的效能壓力要高於其它適配模式。

​ 2、showall 和 noborder 是等比縮放模式，會保持畫面不變形。showall按照螢幕與設計寬高最小比率縮放，保證畫面能完全顯示出來，但會導致有空屏黑邊。noborder剛好相反，按照螢幕與設計寬高最大比率縮放，不會出現空屏黑邊，但會導致寬或高的部分內容無法顯示出來。

3、 fixedwidth 與 fixedheight 更像 showall和noborder 的變種，同樣也是等比縮放模式，但是指定了一邊不動，另外一邊進行縮放，是當前HTML5遊戲中比較常用的主流適配模式

更多資訊可以參考官網：https://ldc.layabox.com/doc/?nav=zh-js-1-8-3