最近做的一个需求，，，，，，遇到一个问题，，，，，，小程序绘图现在只支持 px单位，，，，，，设计图一般是以 iphone6为基准设计，，，，，，若是严酷 iphone6的尺寸举行代码编写，，，，，，放在其他尺寸的装备上，，，，，，肯定是不可的，，，，，，以是需要凭证装备举行等比例兼容，，，，，，这里给出两个解决方案

类 rem

等比例缩放单位的解决方案，，，，，，也就是以一个尺寸为基准，，，，，，例如 iphone 6，，，，，，然后其他装备凭证这个标准，，，，，，在包管宽度铺满装备的条件下，，，，，，举行等比例缩放

绘制的代码很简朴：

const ctx = wx.createCanvasContext('shareCard')
ctx.drawImage('../58a.png', this.remSize(85), this.remSize(100), this.remSize(205), this.remSize(250))
ctx.setFontSize(this.remSize(16))
ctx.setFillStyle('yellowgreen')
ctx.fillText('flexible canvas', this.remSize(100), this.remSize(130))
ctx.draw()
复制代码

其中，，，，，，remSize 这个要领就是用于等比例缩放尺寸

remSize (num) {
  return num * scale
}
复制代码

其中，，，，，，scale就是目今装备与设计基准装备 iphone6的宽度比例

scale = wx.getSystemInfoSync().windowWidth / 375
复制代码

目今是以铺满装备宽度为目的，，，，，，以是高度不体贴，，，，，，即 以宽度为参考，，，，，，高度 auto

以上，，，，，，就基本实现需求，，，，，，做法很简朴，，，，，，这是通常一直的解决方案 由于示例的需求较量简朴，，，，，，以是看着没多大问题，，，，，，很完善，，，，，，可是若是现实需求，，，，，，较量重大的那种，，，，，，就有点不太优美了 那里不优美呢？？
？？就是换算尺寸的时间，，，，，，每个尺寸都要挪用一遍 remSize要领，，，，，，稍微重大点需求可能就有几十个需要换算的尺寸了，，，，，，那就要写几十遍的 remSize，，，，，，虽然，，，，，，写是可以写的，，，，，，只是总感受那里不太对劲

图片取代

这个要领不需要频仍的尺寸换算，，，，，，最后统一整体换算即可，，，，，，原理也很简朴

• 凭证 iphone6尺寸举行绘制

首先，，，，，，无论目今装备的尺寸是什么，，，，，，都不必管，，，，，，先以为目今装备就是 iphone6，，，，，，然后建设 canvas，，，，，，在上面举行绘图，，，，，，只不过，，，，，，不可让用户看到这个 canvas，，，，，，由于目今装备并纷歧定是 iphone6，，，，，，而你直接就认定是 iphone6，，，，，，并以 iphone6的尺寸举行绘制，，，，，，绘制出来的效果肯定跟设计的效果纷歧样，，，，，，以是不可让用户看到，，，，，，可以使用 ccover-view组件笼罩掉 canvas组件

Note: 若是想要通过给 canvas设置例如 opacity: 0, visibility: hidden等样式举行隐藏，，，，，，凭证实测，，，，，，在大部分的手机上着实无法生效，，，，，，也就是依旧能看到，，，，，，display: none;则是彻底将 canvas从文档流中(若是也算是文档流的话)删掉，，，，，，无法举行绘制，，，，，，以是较量好的做法就是用一个 cover-view举行笼罩

• 将绘制好的 canvas输出为 图片

canvas绘制好后，，，，，，将其绘制成图片生涯在外地暂时存储中，，，，，，可以拿到这个图片在外地的暂时路径，，，，，，然后将这张图片放到页面上，，，，，，并给这张图片设置尺寸样式，，，，，，图片的宽度即是装备的宽度，，，，，，高度追随宽度举行等比例缩放，，，，，，最终让用户看到的就是这张图片，，，，，，由于举行了等比例缩放，，，，，，以是视觉效果就是和设计图上是一样的

这里也有几个点需要注重下

• ctx.draw是异步操作

一直以为这个要领是同步要领，，，，，，以是挪用完此要领后连忙输出图片，，，，，，就泛起了有时间图片过失的情形，，，，，，厥后才发明这个是异步操作，，，，，，这就是看文档不仔细的效果

ctx.draw(false, () => {
  // 生涯为外地暂时文件
  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转换，，，，，，第二种需要做的操作又较量多，，，，，，各有利弊，，，，，，凭证真实需求举行决议即可。。。

【本站声明】
  1、本站文章中所选用的图片及文字泉源于网络以及用户投稿，，，，，，由于未联系到知识产权人或未发明有关知识产权的挂号，，，，，，若有知识产权人并不肯意我们使用，，，，，，若是有侵权请连忙联系。。。
  2、本网站差池文章中所涉及的内容真实性、准确性、可靠性认真，，，，，，仅系客观性形貌，，，，，，如您需要相识该类商品/服务详细的资讯，，，，，，请您直接与该类商品/服务的提供者联系。。。