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

目录

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;//显示分辨率信息

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

1）可以看出分辨比 pixelRatio 为 1，即 widht 与 clientWidth 相等，height 同理

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

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

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

屏幕对齐模式

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

/**

水平对齐方式。默认值为"left"。

 *

取值范围：
 *
• "left" ：居左对齐；

 *
• "center" ：居中对齐；

 *
• "right" ：居右对齐；

 *

 */
alignH: string;

/**

垂直对齐方式。默认值为"top"。

 *

取值范围：
 *
• "top" ：居顶部对齐；

 *
• "middle" ：居中对齐；

 *
• "bottom" ：居底部对齐；

 *

 */
alignV: string;

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

ALIGN_BOTTOM : String = bottom   ，[static] 画布垂直居下对齐。

ALIGN_CENTER : String = center  ， [static] 画布水平居中对齐。

ALIGN_LEFT : String = left   ，[static] 画布水平居左对齐。

ALIGN_MIDDLE : String = middle   ，[static] 画布垂直居中对齐。

ALIGN_RIGHT : String = right  ， [static] 画布水平居右对齐。

ALIGN_TOP : String = top   ，[static] 画布垂直居上对齐。

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

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