LayaAir 屏幕适配-分辨率、对齐模式

柔光的暖阳◎ 2022-04-10 02:43 713阅读 0赞

**目录**

Brower 屏幕分辨率

屏幕对齐模式

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

# Brower 屏幕分辨率 #

1、早先的移动设备中，屏幕像素都比较低，如 Iphone3 分辨率为320×480，一个像素等于一个屏幕物理像素。后来随着设备屏幕像素密度越来越高，从iphone4开始，苹果推出Retina屏，分辨率变成了640×960，提高一倍，但屏幕尺寸却没变化，这就意味着同样大小的屏幕上，像素却多了一倍，这提高的就是 devicePixelRatio，其它安卓移动设备也类似与此。

2、LayaAir 得出换算公式： 物理分辨率 = 像素分辨率 \* devicePixelRatio;LayaAir 引擎对它们做了封装：

> 设备像素分辨率：Laya.Browser.[clientWidth][]，Laya.Browser.[clientHeight][];  
> 设备物理分辨率：Laya.Browser.[width][]，Laya.Browser.[height][];  
> 像素比：Laya.Browser.[pixelRatio][];
> 
> （显然平时常用的是：设备物理分辨率 width 与 height ，它们代表着浏览器窗口的实际分辨率）

3、默认从 Brower 获得的 clientWidth、clientHeight 不是像素分辨率，而是经过缩放过的分辨率，想要获得正确分辨率，需要在html 页面内设置 viewport meta 标签，content 属性的值为 ”width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no“（LayaAir引擎内，如果页面未设置viewport标签，则引擎会自动生成一个，以确保获取的正确宽高）

//初始化引擎-让舞台大小与屏幕大小一致
    Laya.init(Laya.Browser.width, Laya.Browser.height,Laya.WebGL);
    
    //创建一个文本对象，用于显示手机旋转时的陀螺仪数据
    let infoText = new Laya.Text();
    infoText.fontSize = 70;//字体大小70px
    infoText.color = "#FFFFFF";//字体颜色白色
    infoText.borderColor = "#f00";//文本组件边框颜色为红色
    infoText.wordWrap = true;//文本自动换行
    //设置文本组件的大小等于整个舞台大小
    infoText.size(Laya.stage.width, Laya.stage.height);
    Laya.stage.addChild(infoText);//将文本添加到舞台
    
    let showInfo = "width:"+Laya.Browser.width+"、height:"+Laya.Browser.height+"\r\n";
    showInfo += "clientWidth:"+ Laya.Browser.clientWidth+"、clientHeight:"+Laya.Browser.clientHeight+"\r\n";
    showInfo += "pixelRatio:"+Laya.Browser.pixelRatio;
    
    infoText.text = showInfo;//显示分辨率信息

![20181224114008798.gif][]

上图是台式机上使用 Chrome 调试运行的结果：

> 1）可以看出分辨比 pixelRatio 为 1，即 widht 与 clientWidth 相等，height 同理
> 
> 2）本人电脑显示器实际分别率为 1920 \* 1080，Laya.Browser.xxx 获取的是浏览器窗口占用的部分硬件分辨率，所以当 Chrome 浏览器按 F11 进入全屏模式，然后刷新页面，则 Laya.Browser.widht 就会等于 1024，height 就会等于 1920.

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70][]

上图是手机上调试运行的结果：

> 1）可以看出分辨比 pixelRatio 为 3，即 widht 与 clientWidth 相等，height 同理
> 
> 2）本人手机实际分别率为 1080 \* 1920，Laya.Browser.xxx 获取的是浏览器窗口占用的局部分辨率，也就是图中黑色的部分，其余部分并不包含。

Laya.Brower 的更多 API 可以参考：[https://layaair.ldc.layabox.com/api/?category=Core&class=laya.utils.Browser\#pixelRatio][pixelRatio]

# 屏幕对齐模式 #

1、对齐模式：水平对齐（alignX）与垂直对齐(alginY)针对的舞台 [Stage][]，所以在 [laya.display.Stage][Stage] 中有如下 API：

> /\*\*<p>水平对齐方式。默认值为"left"。</p>  
>  \* <p><ul>取值范围：  
>  \* <li>"left" ：居左对齐；</li>  
>  \* <li>"center" ：居中对齐；</li>  
>  \* <li>"right" ：居右对齐；</li>  
>  \* </ul></p>  
>  \*/  
> ***alignH***: string;
> 
> /\*\*<p>垂直对齐方式。默认值为"top"。</p>  
>  \* <p><ul>取值范围：  
>  \* <li>"top" ：居顶部对齐；</li>  
>  \* <li>"middle" ：居中对齐；</li>  
>  \* <li>"bottom" ：居底部对齐；</li>  
>  \* </ul></p>  
>  \*/  
> ***alignV***: string;

2、综上可知水平对齐模式加上垂直对齐模式的值一共6个，[Stage ][Stage 1]同时为它们提供了常量：

<table> 
 <tbody> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=Core&amp;class=laya.display.Stage#ALIGN_BOTTOM" rel="nofollow">ALIGN_BOTTOM</a> : String = bottom&nbsp; &nbsp;，[static] 画布垂直居下对齐。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=Core&amp;class=laya.display.Stage#ALIGN_CENTER" rel="nofollow">ALIGN_CENTER</a> : String = center&nbsp; ， [static] 画布水平居中对齐。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=Core&amp;class=laya.display.Stage#ALIGN_LEFT" rel="nofollow">ALIGN_LEFT</a> : String = left&nbsp; &nbsp;，[static] 画布水平居左对齐。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=Core&amp;class=laya.display.Stage#ALIGN_MIDDLE" rel="nofollow">ALIGN_MIDDLE</a> : String = middle&nbsp; &nbsp;，[static] 画布垂直居中对齐。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=Core&amp;class=laya.display.Stage#ALIGN_RIGHT" rel="nofollow">ALIGN_RIGHT</a> : String = right&nbsp; ， [static] 画布水平居右对齐。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=Core&amp;class=laya.display.Stage#ALIGN_TOP" rel="nofollow">ALIGN_TOP</a> : String = top&nbsp; &nbsp;，[static] 画布垂直居上对齐。</td> 
  </tr> 
 </tbody> 
</table>

//初始化引擎,不支持WebGL时会自动切换至Canvas
    Laya.init(300, 200,Laya.WebGL);
    
    Laya.stage.alignH = "center";//设置水平居中对齐
    //设置垂直居中对齐，Stage.ALIGN_MIDDLE 常量等价于 middle 字符串
    Laya.stage.alignV = Laya.Stage.ALIGN_MIDDLE;
    
    //在舞台绘制一个矩形
    var sp = new Laya.Sprite();
    sp.pos(30,20);//精灵在舞台位置为 x=30,y=20
    //矩形起点(0,0)，矩形长150，宽100
    sp.graphics.drawRect(0,0,150,100,"#CC6633");
    //在矩形的中间绘制一行文本
    sp.graphics.fillText("对齐模式",75,30,"25px Arial","#fff","center");
    Laya.stage.addChild(sp);

![20181224140247289.gif][]

由此可见：水平对齐（alignX）与垂直对齐(alginY)针对的是 Stage(舞台)。

[clientWidth]: https://layaair.ldc.layabox.com/api/?category=Core&class=laya.utils.Browser#clientWidth
[clientHeight]: https://layaair.ldc.layabox.com/api/?category=Core&class=laya.utils.Browser#clientHeight
[width]: https://layaair.ldc.layabox.com/api/?category=Core&class=laya.utils.Browser#width
[height]: https://layaair.ldc.layabox.com/api/?category=Core&class=laya.utils.Browser#height
[pixelRatio]: https://layaair.ldc.layabox.com/api/?category=Core&class=laya.utils.Browser#pixelRatio
[20181224114008798.gif]: /images/20220403/585fccdc59c84a9cab0d68e341f03116.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dhbmdteDE5OTMzMjg_size_16_color_FFFFFF_t_70]: /images/20220403/a54b7b2eff7945c5b2d47d3fc5f1881c.png
[Stage]: https://layaair.ldc.layabox.com/api/?category=Core&class=laya.display.Stage
[Stage 1]: https://layaair.ldc.layabox.com/api/?category=Core&class=laya.display.Stage#ALIGN_BOTTOM
[20181224140247289.gif]: /images/20220403/7f07ebdea93342d8a2e8545bc18dd858.png