LayaAir 屏幕适配-缩放模式

客官°小女子只卖身不卖艺 2022-04-10 03:14 1086阅读 0赞

**目录**

LayaAir 宽高定义

屏幕缩放模式

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

# LayaAir 宽高定义 #

**1、设计宽高**：项目代码中初始化舞台 Laya.init() 中定义的宽高即为设计宽高

**2、Stage 宽高：**stage 宽高为游戏舞台实际大小的宽高

**3、适配宽高：**通过引擎的适配模式对设计宽高进行缩放改变后的宽高，为了便于区分理解，称为适配宽高

**4、画布宽高：**画布宽高是指 HTML5 中 canvas 节点的宽高，游戏中所有可见的内容都在画布区域内

**5、屏幕宽高：**屏幕宽高是指手机浏览器屏幕的宽高，例如iphone6竖屏时的屏幕宽高为`375*667`。LayaAir引擎可以通过laya.utils.Browser.clientWidth 和 laya.utils.Browser.clientHeight 来获取屏幕的宽与高。

**6、物理宽高：**手机屏幕窗口的实际宽高，LayaAir引擎可以通过laya.utils.Browser.width和laya.utils.Browser.height来获取设备屏幕屏幕的物理宽高。详情可参考《[LayaAir 屏幕适配-分辨率、对齐模式][LayaAir _-]》

# 屏幕缩放模式 #

1、屏幕缩放指窗口大小变化时，内容应该如何变化，这是屏幕适配经常遇到的问题，窗口大小变化也就意味着分辨率变化。

2、[laya.display.Stage][]，提供了 scaleMode (缩放模式)函数，共有参数值：

> /\*\*缩放模式。默认值为 "noscale"。</p>  
> \* <p><ul>取值范围：  
> \* <li>"noscale" ：不缩放；</li>  
> \* <li>"exactfit" ：全屏不等比缩放；</li>  
> \* <li>"showall" ：最小比例缩放；</li>  
> \* <li>"noborder" ：最大比例缩放；</li>  
> \* <li>"full" ：不缩放，stage的宽高等于屏幕宽高；</li>  
> \* <li>"fixedwidth" ：宽度不变，高度根据屏幕比缩放；</li>  
> \* <li>"fixedheight" ：高度不变，宽度根据屏幕比缩放；</li>  
> \* <li>"fixedauto" ：根据宽高比，自动选择使用fixedwidth或fixedheight；</li>  
> \* </ul></p>  
> \*/  
> ***scaleMode***: string;

3、同样为了方便调用，Laya.Stage 提供了它们对应的常量：

<table> 
 <tbody> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=Core&amp;class=laya.display.Stage#SCALE_NOSCALE" rel="nofollow">SCALE_NOSCALE</a> : String = noscale&nbsp; &nbsp;，[static] 应用保持设计宽高不变，不缩放不变型，stage的宽高等于设计宽高。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=Core&amp;class=laya.display.Stage#SCALE_EXACTFIT" rel="nofollow">SCALE_EXACTFIT</a> : String = exactfit&nbsp; &nbsp;，[static] 应用根据屏幕大小铺满全屏，非等比缩放会变型，stage的宽高等于设计宽高。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=Core&amp;class=laya.display.Stage#SCALE_SHOWALL" rel="nofollow">SCALE_SHOWALL</a> : String = showall <p>[static] 应用显示全部内容，按照最小比率缩放，等比缩放不变型，一边可能会留空白，stage的宽高等于设计宽高。</p> </td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=Core&amp;class=laya.display.Stage#SCALE_NOBORDER" rel="nofollow">SCALE_NOBORDER</a> : String = noborder <p>[static] 应用按照最大比率缩放显示，宽或高方向会显示一部分，等比缩放不变型，stage的宽高等于设计宽高。</p> </td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=Core&amp;class=laya.display.Stage#SCALE_FULL" rel="nofollow">SCALE_FULL</a> : String = full&nbsp; &nbsp;，[static] 应用保持设计宽高不变，不缩放不变型，stage的宽高等于屏幕宽高。</td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=Core&amp;class=laya.display.Stage#SCALE_FIXED_HEIGHT" rel="nofollow">SCALE_FIXED_HEIGHT</a> : String = fixedheight <p>[static] 应用保持设计高度不变，宽度根据屏幕比缩放，stage的高度等于设计宽度，宽度根据屏幕比率大小而变化</p> </td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=Core&amp;class=laya.display.Stage#SCALE_FIXED_WIDTH" rel="nofollow">SCALE_FIXED_WIDTH</a> : String = fixedwidth <p>[static] 应用保持设计宽度不变，高度根据屏幕比缩放，stage的宽度等于设计高度，高度根据屏幕比率大小而变化</p> </td> 
  </tr> 
  <tr> 
   <td><a href="https://layaair.ldc.layabox.com/api/?category=Core&amp;class=laya.display.Stage#SCALE_FIXED_AUTO" rel="nofollow">SCALE_FIXED_AUTO</a> : String = fixedauto <p>[static] 应用保持设计比例不变，全屏显示全部内容(类似showall，但showall非全屏，会有黑边)，根据屏幕长宽比，自动选择使用SCALE_FIXED_WIDTH或SCALE_FIXED_HEIGHT</p> </td> 
  </tr> 
 </tbody> 
</table>

//初始化引擎,不支持WebGL时会自动切换至Canvas
    Laya.init(500, 350,Laya.WebGL);
    
    //在舞台上绘制一张底图作为背景，图片分辨率：686 * 325
    var bgImageSprite = new Laya.Sprite();
    bgImageSprite.loadImage("https://www.jetbrains.com/idea/img/screenshots/idea_overview_3.png");
    Laya.stage.addChild(bgImageSprite);
    
    //在舞台绘制一个矩形
    var showInfoSprite = new Laya.Sprite();
    showInfoSprite.pos(10,10);//精灵在舞台位置为 x=10,y=10
    //矩形起点(0,0)，矩形长100，宽50
    showInfoSprite.graphics.drawRect(0,0,100,50,"#CC6633");
    //在矩形的中间绘制一行文本
    showInfoSprite.graphics.fillText("缩放模式",50,10,"20px Arial","#fff","center");
    Laya.stage.addChild(showInfoSprite);
    
    //数组保存缩放模式
    var scaleModes = [];
    scaleModes.push(Laya.Stage.SCALE_NOSCALE);
    scaleModes.push(Laya.Stage.SCALE_EXACTFIT);
    scaleModes.push(Laya.Stage.SCALE_SHOWALL);
    scaleModes.push(Laya.Stage.SCALE_NOBORDER);
    scaleModes.push(Laya.Stage.SCALE_FULL);
    scaleModes.push("fixedwidth");
    scaleModes.push("fixedheight");
    scaleModes.push("fixedauto");
    
    //为整个舞台绑定单击事件；count 用于计数
    var count = 0;
    Laya.stage.on(Laya.Event.CLICK,this,stageClick);
    function stageClick (){
        console.log("切换缩放模式为："+scaleModes[count]);
        //改变矩形显示的文本内容
        showInfoSprite.graphics.clear();
        showInfoSprite.graphics.drawRect(0,0,100,50,"#CC6633");
        showInfoSprite.graphics.fillText(scaleModes[count],50,10,"20px Arial","#fff","center");
        //改变缩放模式
        Laya.stage.scaleMode = scaleModes[count++];
        count = count>7?0:count;
    }

事例中：设计宽高：500, 350，图片宽高：686 \* 325

![20181224152315283.gif][]

1、full 模式完全按物理像素渲染，屏幕有多大，适配的画面就有多大，是高画质常用的适配模式，但是在不同尺寸的屏幕里，显示内容的大小会有所不同，同时对于HTML5游戏的性能压力要高于其它适配模式。

2、showall 和 noborder 是等比缩放模式，会保持画面不变形。showall按照屏幕与设计宽高最小比率缩放，保证画面能完全显示出来，但会导致有空屏黑边。noborder刚好相反，按照屏幕与设计宽高最大比率缩放，不会出现空屏黑边，但会导致宽或高的部分内容无法显示出来。

3、 fixedwidth 与 fixedheight 更像 showall和noborder 的变种，同样也是等比缩放模式，但是指定了一边不动，另外一边进行缩放，是当前HTML5游戏中比较常用的主流适配模式

更多信息可以参考官网：[https://ldc.layabox.com/doc/?nav=zh-js-1-8-3][https_ldc.layabox.com_doc_nav_zh-js-1-8-3]

[LayaAir _-]: https://blog.csdn.net/wangmx1993328/article/details/85230521
[laya.display.Stage]: https://layaair.ldc.layabox.com/api/?category=Core&class=laya.display.Stage
[20181224152315283.gif]: /images/20220403/cf9672787e444238928834919d160032.png
[https_ldc.layabox.com_doc_nav_zh-js-1-8-3]: https://ldc.layabox.com/doc/?nav=zh-js-1-8-3