横竖屏切换代码

屏幕方向

laya.display.Stage 类的 screenMode 属性用于定义屏幕模式，即设置屏幕横屏或者竖屏，或者不改变屏幕。

Property（属性）

screenMode : String

场景布局类型。取值范围： "none" ：不更改屏幕 "horizontal" ：自动横屏 "vertical" ：自动竖屏

针对上面3个值，为了方便引用，Stage 为它们提供了对应的常量：

SCREEN_HORIZONTAL : String = horizontal ，[static] 自动横屏。

SCREEN_NONE : String = none ，[static] 不更改屏幕。

SCREEN_VERTICAL : String = vertical ，[static] 自动竖屏。

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

LayaAir 屏幕适配-横屏与竖屏

屏幕方向

screenMode=none

screenMode=horizontal

screenMode=vertical

横竖屏切换代码

猜你喜欢