目錄

螢幕方向

screenMode=none

screenMode=horizontal

screenMode=vertical

橫豎屏切換程式碼

螢幕方向

laya.display.Stage 類的 screenMode 屬性用於定義螢幕模式，即設定螢幕橫屏或者豎屏，或者不改變螢幕。

針對上面3個值，為了方便引用，Stage 為它們提供了對應的常量：

screenMode=none

預設值 none 或者不設定 screenMode 屬性時，無論螢幕方向如何旋轉，遊戲的水平方向都不會產生跟隨螢幕旋轉的變化。

Laya.stage.screenMode = "none";

如上圖1-1所示為不設定 screenMode 屬性時，與screenMode=none 時的效果。

screenMode=horizontal

screenMode 屬性為 horizontal 時，自動橫屏，無論螢幕方向如何旋轉，遊戲的水平方向都會與螢幕最短的邊始終保持垂直。

//自動橫屏，遊戲的水平方向始終與瀏覽器螢幕較短邊保持垂直
Laya.stage.screenMode = "horizontal";

screenMode=vertical

screenMode 屬性為 vertical 時，自動豎屏

//自動豎屏，遊戲的水平方向始終與瀏覽器螢幕較長邊保持垂直
Laya.stage.screenMode = "vertical";

橫豎屏切換程式碼

//初始化引擎,不支援WebGL時會自動切換至Canvas
Laya.init(0, 0, Laya.WebGL);
Laya.stage.scaleMode = "full";//設定螢幕縮放模式
Laya.stage.bgColor = "#232628";//設定舞臺背景色

//在舞臺左上角顯示一個文字，便於效果更加直觀，和以前使用的方式是否一致
var hitText = new Laya.Text();
hitText.text = "I'm fine";
hitText.pos(50,20);
hitText.fontSize = 40;
hitText.color = "#fff";
Laya.stage.addChild(hitText);

showpicture();
showText();

//顯示一張圖片
function showpicture(){
    var img = new Laya.Image();//Image 類是用於表示點陣圖影象或繪製圖形的顯示物件。繼承了 Component 的影象元件
    //centerX：在父容器中，此物件的水平方向中軸線與父容器的水平方向中心線的距離（以畫素為單位）
    img.centerX = 0;//表示水平居中
    
    //centerY：在父容器中，此物件的垂直方向中軸線與父容器的垂直方向中心線的距離（以畫素為單位）
    img.centerY = -70;//表示垂直方向在父容器中點向上偏移70畫素
    img.skin = "http://react-china.org/uploads/default/38/c4b96a594bd352e0.png";//圖片畫素為 620x160
    // img.skin = "res/react.png";//圖片畫素為 620x160   //對於手機訪問時，因為同源策略的限制，圖片必須放在本地,即 bin 目錄下
    Laya.stage.addChild(img);//將元件新增到舞臺
}

//顯示一段文字
var textLabel ;
function showText(){
    //Label 類用於建立顯示物件以顯示文字，繼承了 Component 的標籤元件
    textLabel = new Laya.Label();
    textLabel.text = "螢幕方向";//設定標籤顯示的內容
    textLabel.color = "gray";//標籤文字顏色
    textLabel.fontSize = 60;//標籤文字大小
    textLabel.centerX = 0;//水平居中
    textLabel.centerY = 50;//垂直方向上，在父容器中點的位置上向下偏移 50px
    Laya.stage.addChild(textLabel);
}

//horizontal：自動橫屏，遊戲的水平方向始終與瀏覽器螢幕較短邊保持垂直
//vertical：自動豎屏，遊戲的水平方向始終與瀏覽器螢幕較長邊保持垂直
//none：不更改螢幕
var screenModes = ["none","horizontal","vertical"];
var count = 0;
//為舞臺繫結一個單擊事件，便於切換螢幕方向
Laya.stage.on(Laya.Event.CLICK,this,stageCLick);
function stageCLick(){
    Laya.stage.screenMode = screenModes[count];
    textLabel.text = screenModes[count++];
    count = count >2 ? 0 : count;
}

效果如下：

手機上效果如下：

LayaAir 官網地址：https://ldc.layabox.com/doc/?nav=zh-js-1-8-2