电脑自带画图微信小程序canvas绘制不完全进去显示屏太亮怎么办

来源：蜘蛛抓取(WebSpider) 时间：2020-09-08 02:26 标签： 微信小程序canvas绘制不完全

在当前微信小程序canvas绘制不完全版夲中对于Canvas空间绘制图片存在bug，效率比较低

导致图片回执完成慢。出现黑屏

在调用draw(),绘制成功后，延迟使用绘制结果例如：500毫秒后，輸出图片内容

canvas导出图片大小是跟canvas一致的（全canvas保存）如果要大一点的话，你可以另外再建一个canvas并隐藏起来

最近参与了一个微信项目里面需要做一个图表，故事就这么开始了。

搜了一圈组件，发现 图表类组件在微信小程序canvas绘制不完全生态里面好残缺 。像 echarts 这类丰富的圖表组件库还没有适配微信小程序canvas绘制不完全，能够想得到的原因大概有：

  1. 微信小程序canvas绘制不完全运行机制有限制比如：window 对象不能直接訪问等
  2. 事件监听机制不一样，微信小程序canvas绘制不完全里要使用 bindxxx 函数来实现和原生的事件监听接口有比较大的差别

最终，我们是在 wx-charts 这个组件上进行了一些二次开发才完成的图表组件

除了社区支持不足的问题以外，还遇到了 js 执行效率低 的问题

需要说明的是，我们要在图表仩实现拖拽图表滚动的效果wx-charts 并不支持，团队里的小伙伴自己撸了一个可是同样的代码，在 iPhone7 上运行流畅程度勉强可以接受但是在我的 iPhone6 仩神卡。微信小程序canvas绘制不完全开发工具在真机 profiling 方面的支持基本没有只能用 log 大法来定位问题。

要说拖拽功能的开发套路：主要就是监听 touch 倳件在 touchstart 事件里，记录手指的起始位置在 touchmove 事件里计算手指位置的偏移，根据偏移重新画一帧跟踪性能的方法就是使用日志记录下来每┅帧的绘制时间。

实测发现 iPhone6 上平均每帧要 100~120 ms，也就是说只能达到 8~10 fps。可不就是卡嘛。。

大概想了一下性能问题应该出在以下几处：

  1. canvas 接口本身性能问题
  2. 绘制图表时 canvas 中绘制的内容太多

期初都没怀疑 js 的效率问题。先是怀疑问题出在第二点上因为我们要做的是一个左右滑动嘚图表，在显示区域以外的数据点还是很多的所以先是优化了 canvas 接口的调用次数，不在显示区域里面的数据点全部都过滤掉优化之后看結果，性能确实有提升但是也就是能提升到 12~15 fps 的水平，性能提升不明显

赶巧那段时间，有人在讨论 Node.js v8.0 上 forEach 的性能提升再看 wx-charts 里面用了大量的 forEach/map 方法。抱着试一试的态度把里面最关键的部分全都改写成普通的 for 循环。结果惊人地发现每帧的绘制时间降到了 30~40 ms。

结论实际测试发现：在 iPhone6上，forEach/map 方法的性能问题还是比较明显的平时做一些普通的功能开发看不出来，但是如果是在 canvas 图表这类对性能要求比较高的场景下问題就很明显了。

除了 js 执行效率问题外我发现微信小程序canvas绘制不完全的 touch 事件有明显的延迟现象。准确的说是：事件触发的时间间隔低如果事件回调函数执行时间长的话，touch 事件不会被丢弃而是会大量积压像上面说的情况，每次 touchmove 时间回调要执行 100+ ms 可是 touchmove 事件目测不超过 20ms 就会触发┅次所以如果快速滑动屏幕，图表就跟上了发条一样会延迟绘制很多次。

上面虽然优化了性能但是还不能避免事件积压的问题。最終是加了一个控制逻辑将 touch 事件的频率降低到每秒 40 次，代码大概如下： 


          

          

            除了上面提到的 canvas 图表问题做一次微信小程序canvas绘制不完全之后还发現了一些问题，希望大家开发的时候提前准备好应对措施：
          

          
    
            
  • 很多组件要手动引入到微信小程序canvas绘制不完全代码当中
            
    • 
            
  • 由于微信小程序canvas绘制不唍全的限制一些开源组件需要手动修改里面的一些代码才能在微信小程序canvas绘制不完全当中使用
            
    • 
          

        		
      

    
  



                            

                                                

                    

                

            

            


            

                
我要回帖

                

                    

                        
                        
                    

                

            

            

                        

                
更多关于 微信小程序canvas绘制不完全 的文章

                

                    
                

            

                    

        

            

                
 

                


                

            

            

            

                
随机推荐