在微信小程序中使用 canvas 绘制了一个弧形进度条。
问题现象
- 首次绘制时,一切正常
- 再次进入页面,onshow 时再次绘制,会出现右下角出现一段奇怪的曲线
但是,这个问题只在真机上能够出现,在本地开发工具上一切正常。
问题定位
这个问题困扰了我几天,一直没有找到问题出在哪里。我一度怀疑是微信小程序的 canvas 2d 有 bug 导致。但是即便使用原始的非 2d 版本实现,问题依旧。
同时,在网上查到的代码 demo,都没有提交类似的 bug。所以,问题很大概率还是出在我自己的代码这里。
我仔细观察了一下,这个诡异的右下角图形,非常像是放大版的弧形曲线的一部分。于是,我怀疑二次绘制的时候,时间上另起了一个圆心,重绘了另一条曲线。
于是,在日志中打印了圆心的坐标,但是,重复调用时显示,这个坐标并没有任何变化。
既然,圆心没有变化,那还能是哪里发生了变化。。。
此刻,我看到了一行诡异的代码:
ctx.scale
从名字上看是进行了拉伸。莫非反复调用时,这个 scale 被进行了成倍扩大,而并没有被重置?
经测试,果真如此。。。这绝对是微信小程序的一个 bug。
不得已,采用了一个全局变量来标识 ctx.scale 是否调用过,如果调用过,就不再执行此行。
至此问题解决。
这真是一个毫无意义的 bug 解决过程。
之后,我在微信小程序官方论坛里找到了几个完全一样的问题,估计官方选择了忽视。
https://developers.weixin.qq.com/community/develop/doc/000a2c5def48a8da817abf2ea51000?_at=tdjfeehau
小程序中调用 canvas scale 的目的是什么?
我实在是没有兴趣去理解这个问题了,我觉得这就是微信开发团队自己偷懒的结果。封装的非常弱智。
经验教训
凡是会被重复调用的代码,尽量把初始化部分独立出来,避免反复调用。这样的好处是:
- 减少了重复初始化带来的性能损耗,给用户省点电吧
- 避免踩 canvas scale 类似这种浪费生命的坑
微信关注我哦 👍
我是来自山东烟台的一名开发者,有感兴趣的话题,或者软件开发需求,欢迎加微信 zhongwei 聊聊, 查看更多联系方式