H5游戏屏幕适配的缩放模式之:拉伸填满屏幕(LayaAir引擎)
发表于2017-02-27
缩放模式是屏幕适配的重点内容,需要开发者通过实例体验,去深入理解。laya.display.Stage API关于缩放模式的方法scleMode共有七种参数,本篇将介绍缩放模式的拉伸填充“exactfit”。
exactfit模式是一种不考虑内容的原始比例,直接将舞台尺寸暴力拉伸,填满整个浏览器屏幕的缩放模式,下面直接上代码。
exactfit模式代码示例如下:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 | ( function () { var Stage = Laya.Stage; var Text = Laya.Text; var Image = Laya.Image; //适配模式 var modes = "exactfit" ; //全局文本信息 var txt; ( function () { //初始化舞台大小 Laya.init(1334, 750); //设置适配模式 Laya.stage.scaleMode = modes; //设置舞台背景色 Laya.stage.bgColor = "#ffff99" ; //实例一个背景 var bg = new Image(); bg.skin = "res/img/loadingBg.jpg" ; Laya.stage.addChild(bg); //实例一个文本 txt = new Text(); txt.text = "适配模式(" +modes+ ") " ; txt.bold = true ; txt.pos(10, 350); txt.fontSize = 60; txt.color = "#fff000" ; Laya.stage.addChild(txt); })(); })(); |
示例代码中所用的背景图片如下:
loadingBg.jpg(点击打开或另存1136, 640像素背景原图)
iPhone6横屏时运行效果如下:
或许有一些开发者会觉得奇怪,为什么全屏拉伸没有把背景图铺满整个浏览器呢?这里一定要注意,全屏拉伸的是舞台尺寸,而不是背景图片的尺寸。上面的示例里,我们的图片采用的是1136*640。而舞台尺寸是(1334*750),因此无法看到背景图全屏拉伸的效果。如果想实现背景图全屏拉伸效果,我们仅需更改初始化舞台方法Laya.init中的尺寸为图片尺寸即可。
修改代码如下:
1 2 | //初始化舞台大小 Laya.init( 1136 , 640 ); |
我们再次运行完整示例,查看效果。
iPhone6横屏时运行效果如下:
iPad横屏时运行效果如下: