H5游戏屏幕适配的缩放模式之:拉伸填满屏幕(LayaAir引擎)

发表于2017-02-27
评论0 4.8k浏览

        缩放模式是屏幕适配的重点内容,需要开发者通过实例体验,去深入理解。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横屏时运行效果如下:

blob.png

或许有一些开发者会觉得奇怪,为什么全屏拉伸没有把背景图铺满整个浏览器呢?这里一定要注意,全屏拉伸的是舞台尺寸,而不是背景图片的尺寸。上面的示例里,我们的图片采用的是1136*640。而舞台尺寸是(1334*750),因此无法看到背景图全屏拉伸的效果。如果想实现背景图全屏拉伸效果,我们仅需更改初始化舞台方法Laya.init中的尺寸为图片尺寸即可。


修改代码如下:

1
2
//初始化舞台大小
Laya.init(1136640);

我们再次运行完整示例,查看效果。


iPhone6横屏时运行效果如下:

blob.png

iPad横屏时运行效果如下:

blob.png

如社区发表内容存在侵权行为,您可以点击这里查看侵权投诉指引