小程序 Canvas绘图不同尺寸设备UI兼容的两个解决方案

最近做的一个需求,遇到一个问题,小程序绘图目前只支持 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
}
复制代码

小程序 Canvas绘图不同尺寸设备UI兼容的两个解决方案

其中,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、本网站不对文章中所涉及的内容真实性、准确性、可靠性负责,仅系客观性描述,如您需要了解该类商品/服务详细的资讯,请您直接与该类商品/服务的提供者联系。


KESION 科汛软件

KESION 科汛软件是国内领先的在线教育软件及私域社交电商软件服务提供商,长期专注于为企业提供在线教育软件及社交电商SaaS平台解决方案。
公司核心产品云开店SaaS社交电商服务平台、在线教育SaaS服务平台、教育企业数字化SaaS云平台、企微营销助手、私有化独立部署品牌网校和在线教育咨询等。

KESION 不断通过技术创新,提供产品和服务,助力企业向数字化转型,通过科技驱动商业革新,让商业变得更智慧!



▼点击进入科汛官网了解更多



热门标签
SaaS
上/下篇
  • 微信小程序图片懒加载的实现方案

  • 微信小程序之动态获取元素宽度高度

换一换相关推荐
精选内容
热点精选