剩人
剩人
  • 发布:2019-06-10 10:15
  • 更新:2019-10-14 15:21
  • 阅读:1451

uniapp的canvas是用浏览器的还是像微信一样自己实现的?

分类:uni-app

自己写了个曲线图,用随机生成2条线分别为1000个点做测试,在华为p10+和ios模拟器以及微信小程序上,touchmove显示tooltip时会比较卡。而用浏览器本身做测试2条线每条先数据可以到3000点还很顺畅。

下面这两张图是2条线,每条线分别为3000点的数据测试。

这张是浏览器模拟器:

这张是ios模拟器:

2019-06-10 10:15 负责人:无 分享
已邀请:
DCloud_UNI_GSQ

DCloud_UNI_GSQ

  1. 移动端的性能比pc弱
  2. app和小程序的架构是视图层和逻辑层分离的,触摸事件需要异步通信:触摸->视图层->通知->逻辑层->计算->通知->视图层->渲染。逻辑层和视图层通信损耗比较大,需要注意减少交互频次。
  3. 使用web-view组件,里面的js和渲染层是不分离的,交互效率更高
剩人

剩人 (作者)

通过不断测试,在当前情况下找到的最优解决方案:
1、取得用户的touch或者click等坐标传给绘图组件;
2、在绘图组件里获取图表对应的数据(包括图表的边界,x、y轴数据点等)然后传回给前端;
3、在页面通过css绘制提示

效果可以看下面两张图,演示图中分别为每条线5000个数据点:
web模拟器的:

ios模拟器的:

jones2000

jones2000 - https://github.com/jones2000/HQChart

只重绘变动的部分, 不动的线段数据不要重绘。用css 截图分享就麻烦了, 不在一个画布上

该问题目前已经被锁定, 无法添加新回复