LayaAir 屏幕适配-横屏与竖屏

我会带着你远行 2022-04-10 04:41 609阅读 0赞

**目录**

屏幕方向

screenMode=none

screenMode=horizontal

screenMode=vertical

横竖屏切换代码

--------------------

# 屏幕方向 #

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

<table> 
 <tbody> 
  <tr> 
   <td><strong>Property（属性）</strong></td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=Core&amp;class=laya.display.Stage#screenMode" rel="nofollow">screenMode</a> : String <p>场景布局类型。 取值范围： "none" ：不更改屏幕 "horizontal" ：自动横屏 "vertical" ：自动竖屏</p> </td> 
  </tr> 
 </tbody> 
</table>

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

<table> 
 <tbody> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=Core&amp;class=laya.display.Stage#SCREEN_HORIZONTAL" rel="nofollow">SCREEN_HORIZONTAL</a> : String = horizontal&nbsp; &nbsp;，[static] 自动横屏。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=Core&amp;class=laya.display.Stage#SCREEN_NONE" rel="nofollow">SCREEN_NONE</a> : String = none&nbsp; &nbsp;，[static] 不更改屏幕。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=Core&amp;class=laya.display.Stage#SCREEN_VERTICAL" rel="nofollow">SCREEN_VERTICAL</a> : String = vertical&nbsp; &nbsp;，[static] 自动竖屏。</td> 
  </tr> 
 </tbody> 
</table>

## [screenMode][]=none ##

默认值 none 或者不设置 screenMode 属性时，无论屏幕方向如何旋转，游戏的水平方向都不会产生跟随屏幕旋转的变化。

Laya.stage.screenMode = "none";

![20181225091906373.gif][] 图1-1

如上图1-1所示为不设置 screenMode 属性时，与screenMode=none 时的效果。

## screenMode=horizontal ##

screenMode 属性为 horizontal 时，自动横屏，无论屏幕方向如何旋转，游戏的水平方向都会与屏幕最短的边始终保持垂直。

//自动横屏，游戏的水平方向始终与浏览器屏幕较短边保持垂直
    Laya.stage.screenMode = "horizontal";

![20181225092504516.gif][]

## screenMode=vertical ##

screenMode 属性为 vertical 时，自动竖屏，无论屏幕方向如何旋转，游戏的水平方向都会与屏幕较长的边始终保持垂直。

//自动竖屏，游戏的水平方向始终与浏览器屏幕较长边保持垂直
    Laya.stage.screenMode = "vertical";

![20181225092754784.gif][]

# 横竖屏切换代码 #

//初始化引擎,不支持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;
    }

效果如下：

![20181225093306910.gif][]

手机上效果如下：

![20181225093826607.gif][]

LayaAir 官网地址：[https://ldc.layabox.com/doc/?nav=zh-js-1-8-2][https_ldc.layabox.com_doc_nav_zh-js-1-8-2]

[laya.display.Stage]: https://layaair.ldc.layabox.com/api/?category=Core&class=laya.display.Stage
[screenMode]: https://layaair.ldc.layabox.com/api/?category=Core&class=laya.display.Stage#screenMode
[20181225091906373.gif]: /images/20220403/b10e7667ad384fa0aefcd3a0532a87e8.png
[20181225092504516.gif]: /images/20220403/d85f7e54c84d48df8321283b7f84d83f.png
[20181225092754784.gif]: /images/20220403/9aac7833bc4d4fdab887c7d97e353d04.png
[20181225093306910.gif]: /images/20220403/5be6d8720c8f4ad0a44031ac039d83bd.png
[20181225093826607.gif]: /images/20220403/e55ff0881eb64801b9091533b3d8d5a7.png
[https_ldc.layabox.com_doc_nav_zh-js-1-8-2]: https://ldc.layabox.com/doc/?nav=zh-js-1-8-2