跳转到主内容
新派编程网 - 新潮编程理念，全新技术课堂！
📁 网站地图

LayaAir 屏幕适配-缩放模式

林译川
林译川
• 👁 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 屏幕适配-分辨率、对齐模式 》 屏幕缩放模式 1、屏幕缩放指窗口大小变化时，内容应该如何变化，这是屏幕适配经常遇到的问题，窗口大小变化也就意味着分辨率变化。

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

默认值为 "noscale"。

*

    取值范围： *
  • "noscale" ：不缩放；
    • *
  • "exactfit" ：全屏不等比缩放；
    • *
  • "showall" ：最小比例缩放；
    • *
  • "noborder" ：最大比例缩放；
    • *
  • "full" ：不缩放，stage的宽高等于屏幕宽高；
    • *
  • "fixedwidth" ：宽度不变，高度根据屏幕比缩放；
    • *
  • "fixedheight" ：高度不变，宽度根据屏幕比缩放；
    • *
  • "fixedauto" ：根据宽高比，自动选择使用fixedwidth或fixedheight；
    • *

*/ scaleMode : string; 3、同样为了方便调用，Laya.Stage 提供了它们对应的常量： SCALE_NOSCALE: String = noscale   ，[static] 应用保持设计宽高不变，不缩放不变型，stage的宽高等于设计宽高。

SCALE_EXACTFIT: String = exactfit   ，[static] 应用根据屏幕大小铺满全屏，非等比缩放会变型，stage的宽高等于设计宽高。

SCALE_SHOWALL: String = showall[static] 应用显示全部内容，按照最小比率缩放，等比缩放不变型，一边可能会留空白，stage的宽高等于设计宽高。

SCALE_NOBORDER: String = noborder[static] 应用按照最大比率缩放显示，宽或高方向会显示一部分，等比缩放不变型，stage的宽高等于设计宽高。

SCALE_FULL: String = full   ，[static] 应用保持设计宽高不变，不缩放不变型，stage的宽高等于屏幕宽高。

SCALE_FIXED_HEIGHT: String = fixedheight[static] 应用保持设计高度不变，宽度根据屏幕比缩放，stage的高度等于设计宽度，宽度根据屏幕比率大小而变化SCALE_FIXED_WIDTH: String = fixedwidth[static] 应用保持设计宽度不变，高度根据屏幕比缩放，stage的宽度等于设计高度，高度根据屏幕比率大小而变化SCALE_FIXED_AUTO: String = fixedauto[static] 应用保持设计比例不变，全屏显示全部内容(类似showall，但showall非全屏，会有黑边)，根据屏幕长宽比，自动选择使用SCALE_FIXED_WIDTH或SCALE_FIXED_HEIGHT

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

​ 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

相关文章