对于小程序canvas在某些情况下touchmove 不能连续触发导致的签名不连续替代方案(企微)

1.问题

微信开放社区链接

尝试过新版canvas,在企业微信中签名依然是依然断触,有问题的手机是iphoe15,系统版本以及企微版本微信版本均与签名正常的手机一致,但是那个手机就是无法正常签字,在微信中无论新旧canvas均能正常签字

2.解决方案

既然canvas的touchmove触发有问题,那么就可以通过替代canvas的touchmove来实现,通过在canvas上覆盖一层dom,通过这层dom的touchmove来获取手指划过的轨迹即可,此文章中并没有小程序实际代码只是使用了h5验证可行性的代码

2.1 注意点

• 要区别手指是否连续滑动,由于点击事件触发存在如下情况

区别手指是否连续滑动采用时间间隔判断
触发事件间隔小于80ms 主要用于判断是否松开手指再次滑动,正常手速来说80ms,人很难在画完一个线段后,松手再次画一个线段,如果无这个处理会出现滑动一个线段之后,再次点击另一个点会把线段和新点位连接起来

没有采取通过touchstart与touchend做一个判断是因为touchmove并不是固定一直在start与end事件中间触发

2.2 移动端浏览器体验地址

2.2 vue2代码