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

最新推荐文章于 2024-05-21 07:57:55 发布

snxxxx

最新推荐文章于 2024-05-21 07:57:55 发布

阅读量2.4k

点赞数

本文链接：https://blog.csdn.net/snxxxx/article/details/82217823

版权

首先层级包含关系手机设备屏（画布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需添加到容器，不能是舞台）；