小程序Canvas绘制两种不同尺寸设备UI兼容解决方案

最近遇到一个问题。目前小程序的绘图只支持px单元，设计图纸一般基于iphone6设计。如果严格按照iphone6的尺寸写代码，放在其他设备上，肯定不行。因此，有必要根据设备以相等的比例兼容。这里有两个解决方案。

先假设一个需求，下面是最终效果(基于iphone6)，下面是扩展的目标。

整个页面被画布组件覆盖(iphone6下宽度和高度均为375x603)，中间的蓝色是一张带有一行柔性画布的图片。

类rem

是等比例缩放单位的解决方案，即以一个尺寸为基准，比如iphone 6，然后其他设备在保证所有设备宽度的前提下，按照这个标准等比例缩放。

绘图代码很简单：

const CTX=wx . createcanvascontext(' share card ')CTX . draw image('./58a.png '，this.remSize(85)，this.remSize(100)，this.remSize(205)，this。CTX。Setfontsize(这个。莱姆斯(16)CTX。Setfillstyle('黄绿色')CTX。Filltext('柔性画布'，这个。Remsize (100)，这个。Remsize (130))

RemSize (num) {return num * scale}复制代码，其中scale是当前设备与设计基准设备iphone6之间的宽度比。

Scale=wx。getsysteminfosync()。windowwidth/375复制码目前旨在扩展设备的宽度，所以不关心高度，即指宽度，高度为auto。

以上，基本满足要求很简单。这是通常和一致的解决方案。因为例子的要求比较简单，看起来问题不多，很完美。但是如果实际要求比较复杂的话，就会有点不太美观。有什么不太美的？也就是说，在转换尺寸时，应该为每个尺寸调用一次remSize方法。如果需求稍微复杂一点，可能要转换几十个维度。然后，需要写几十遍remSize。写作当然可以写，但我总觉得有点不对劲。

图片代替

这个方法不需要频繁的大小转换，最后统一整体转换就够了，原理也很简单。

根据iphone6的大小进行绘制。首先，不管当前设备的大小，首先认为当前设备是iphone6，然后创建一个画布并在上面绘制。但是，你不能让用户看到这个画布，因为当前设备不一定是iphone6，而是你直接把它识别为iphone6，画成iphone6的大小。画出来的效果肯定和设计出来的效果不一样，所以用户看不到。您可以使用cover-view组件覆盖画布组件。

注：如果想通过设置opacity3360、visibility :隐藏等样式的画布来隐藏，根据实际测量，在大部分手机上是无法生效的，也就是还能看到，display: none就是把画布从文档流中完全删除(如果也是文档流的话)，无法绘制，不如用cover-view覆盖。

将绘制的画布输出为图片。画好画布后，画成图片保存在本地暂存，就可以得到这张图片的本地暂存路径，然后把这张图片放到页面上，为这张图片设置大小样式。图片的宽度等于设备的宽度，高度与宽度成比例。最后，用户会看到这张图片。因为缩放，视觉效果和设计图上一样。

这里还有几点需要注意。

Ctx.draw是一个异步操作。我一直以为这个方法是同步的方法，所以调用这个方法后，马上输出图片，有时候图片是错误的。后来发现这是一个异步操作，是不小心看了文档的结果。

ctx.draw(false，()={ 0

// 保存为本地临时文件 this.saveImageToLocal()})复制代码

• 绘制canvas阶段，要允许页面横向溢出

由于一开始绘制canvas是按照iphone6的标准进行的，所以在有些宽度小于iphone6的设备上，canvas的宽度是可能会比设备的宽度要大的(如果你绘制的是整屏canvas)，但是小程序页面的根元素page，默认设置了overflow-x: hiddne;，导致绘制不完整，所以需要覆盖这个样式：

page {  overflow-x: scroll;}复制代码

• 绘制完毕后，避免页面横向溢出

当上一步绘制完成canvas后，并成功将图片绘制到页面上时，如果当前设备的宽度小于iphone 6，又由于前面给page元素设置了overflow-x: scroll，所以此时canvas元素肯定会撑大页面，让页面上出现一个横向的滚动条，而用户看到的图片宽度是和设备宽度相同，不应该出现这种情况

解决方法，一种是直接使用wx-if这种条件语句删掉canvas元素，但是在低版本的基础库上，可能会报e.canvasId is undefined的错误(虽然根据实测来看，似乎并不影响正常功能) 第二种就是减少canvas的尺寸，反正已经绘制好图片了，后面也用不到它了，而且用户也看不到，那就可以随意减小尺寸，我的做法是干脆无论宽高通通设为0，免得又出现什么bug

// 避免在尺寸小的设备上溢出this.setData({  canvasWidth: 0,  canvasHeight: 0})复制代码

以上，两种方法都可以选择，各有利弊，第一种要写很多rem转换，第二种需要做的操作又比较多，各有利弊，根据真实需求进行抉择即可。