laya之微信 屏幕适配---理解canvas，手机设备，设计ui之间的关系

本文主要是介绍laya之微信 屏幕适配---理解canvas，手机设备，设计ui之间的关系，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

首先   层级 包含关系   手机设备屏（画布canvas   （设计ui））

举例说明

比如ui设计720*1080.  那么在laya中我们初始化引擎会设置画布canvas为720*1080；但是由于机型各种各样，当设配宽高大于canvas时，微信会自动将canvas拉伸与设配相等。那么ui也会随之被拉伸不符合原设计效果。

此时我们需要将canvas的宽设与设备屏宽近似相等，一般取ui的宽720.（机型宽375物理像素，所以*2）我们通过调用微信接口获取设配宽高并求出设备的宽高比。如下图。

wx.getSystemInfo({success:function(res){//引擎初始化var b = res.screenHeight * 720 / res.screenWidth;Laya.MiniAdpter.init();Laya.init(720, b, WebGL);Laya.stage.alignV = Laya.stage.ALIGN_MIDDLE;Laya.stage.alignH = Laya.stage.ALIGN_CENTER;//Laya.Stat.show();//Laya.stage.scaleMode = Laya.Stage.SCALE_NOBORDER;Laya.loader.load(Config.res,Handler.create(this,showApe));}})

 

但是当设备为720*1500。那么因为ui的宽高与canvas不等就会出现黑边。

 

此时的适配策略？

在Laya.stage上面加一张720*2100的背景图（高大一点）。算出设配与ui高的差值，将ui居中显示。（注意ui需添加到容器，不能是舞台）；

 

 

这篇关于laya之微信 屏幕适配---理解canvas，手机设备，设计ui之间的关系的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---