小程序Canvas性能优化实战
发布时间:2020-12-14 19:03:28 所属栏目:资源 来源:网络整理
导读:案例背景 需求: 在小程序中使用canvas组件绘制地铁图,地铁图包括地铁线路、站点图标、线及站点名称文字,绘制元素为线、圆、图片、文字。 支持拖动平移和双指缩放。 问题: 小程序中的canvas性能有限,特别在交互的过程中不断触发重绘会引发严重卡顿。 基
案例背景需求:
问题:小程序中的canvas性能有限,特别在交互的过程中不断触发重绘会引发严重卡顿。 基本实现在不考虑优化的情况下,先说说如何实现绘制和交互。 数据格式首先看看数据,服务返回的数据中每个元素都是独立的,包括该元素的样式及坐标
绘图API绘制的时候遍历绘制元素数组,根据元素类型设置上下文样式,绘制及填充。接口参考:https://developers.weixin.qq.com/miniprogram/dev/api/CanvasContext.html。
实现交互主要步骤如下:
bindtouchmove 、bindtouchend 实现对用户拖动和双指缩放的监听,得到拖动位移向量、缩放比例,触发重绘
最终得到的结果如下,平均渲染时长为 优化方法完全不了解canvas优化方案的同学可以先看看:?canvas的优化。 避免不必要的画布状态改变参考Canvas 最佳实践(性能篇)?,绘图上下文是一个状态机,状态的改变是有一定开销的。画布状态改变这里主要指 如何减少这部分的开销呢?我们可以尽量让样式相同的元素放在一起进行一次性的绘制。观察一下数据可以发现,很多站点元素样式都是相同的,那么在绘制之前可以先做一次数据的聚合,将样式相同的数据组合成一条数据: |