Laya屏幕适配及尺寸属性

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Laya屏幕适配及尺寸属性相关的知识,希望对你有一定的参考价值。

参考技术A

2.Laya.Stage

3.html canvas

下面来做个测试

说明:因为Laya.init(1136, 640, Laya.WebGL);所以stage.width,height就是这个宽高。然后当前是在IPAD屏幕下,因为用了SCALE_SHOWALL模式,画面上下端出现了白条。所以能看到Browser.height 是比html canvas height 要高一些。然后切换到IPHONE5屏幕时,发现这三者是一致的。

先看一下官方例子中的舞台尺寸和矩形位置大小

在一个sprite中,以0,0为中心,绘制了200,200大小的矩形,然后添加到舞台中心。舞台初始化大小是550,400。
那么在chrome中运行例子,按F12后,切换手机尺寸,通过观察layaCanvas的width和height,就能看到不同模式下的区别(下面以竖屏为例,横屏同样规则)

Laya.stage.scaleMode = Stage.SCALE_NOSCALE;
应用保持设计宽高不变,不缩放不变型,stage的宽高等于设计宽高。
整个应用程序的大小固定,因此,即使播放器窗口的大小更改,它也会保持不变。如果播放器窗口比内容小,则可能进行一些裁切。
测试结果:
layaCanvas的width和height就没变过,一直是550,400。屏幕小时会出现裁切,至于矩形,则一直保持在中央。

Laya.stage.scaleMode = Stage.SCALE_SHOWALL;
应用显示全部内容,按照最小比率缩放,等比缩放不变型,一边可能会留空白,stage的宽高等于设计宽高
整个应用程序在指定区域中可见,且不发生扭曲,同时保持应用程序的原始高宽比。应用程序的两侧可能会显示边框。
测试结果:
layaCanvas的width和height一直根据屏幕变化。比如IPHONE6的375,667尺寸下,宽度就变成最大值375,而高度因为要保持550,440的比例,也等比例变成273了。
这就导致竖屏模式下,canvas下面会出现很多空白边框

应用根据屏幕大小铺满全屏,非等比缩放会变型,stage的宽高等于设计宽高。
整个应用程序在指定区域中可见,但不尝试保持原始高宽比。可能会发生扭曲,应用程序可能会拉伸或压缩显示。

测试结果:
layaCanvas的width和height没变过,一直是550,400。但是矩形已经变形了,切换尺寸时,transform:matrix一直在变化,应该是直接拉伸了

应用按照最大比率缩放显示,宽或高方向会显示一部分,等比缩放不变型,stage的宽高等于设计宽高。
整个应用程序填满指定区域,不发生扭曲,但有可能进行一些裁切,同时保持应用程序的原始高宽比。

测试结果:
layaCanvas的width和height没变过,一直是550,400。边缘被填满了,不过矩形被裁切。

综上,一般为了显示全部内容,我们还是常用SCALE_SHOWALL这种模式。

screenMode可以改变横屏竖屏

横向对齐分为左中右,纵向对齐分为上中下。

这个经过测试,layaCanvas的width和height也没变过,matrix一直在变。

END

以上是关于Laya屏幕适配及尺寸属性的主要内容,如果未能解决你的问题,请参考以下文章

iosiPhone屏幕尺寸分辨率及适配

iPhone屏幕尺寸分辨率及适配

iPhone屏幕尺寸分辨率及适配

iPhone屏幕尺寸分辨率及适配

Android 屏幕适配屏幕适配通用解决方案 ⑥ ( 约束布局 ConstraintLayout 百分比布局方案 | 将设计稿尺寸自动转为约束布局百分比标签属性 | 将输出结果设置到组件标签中 )

Android 屏幕适配屏幕适配通用解决方案 ⑥ ( 约束布局 ConstraintLayout 百分比布局方案 | 将设计稿尺寸自动转为约束布局百分比标签属性 | 将输出结果设置到组件标签中 )