E企盈营销工具技术服务商 热线:4006-838-530

微信小程序画布Canvas组件touchend事件不触发处理

E企盈直播平台营销卖货系统

一、摘要在微信小程序手势图案锁屏、解锁实现并提供onSuccess等回调一文中,用Canvas画布组件实现了类似Android和Iphone的图案锁屏、解锁功能,除去偶尔卡顿、滑动不连续外,其它都还不错。但是最近发现一个很严重的问题,当触摸很快划离画布的时候,Canvas组件没有触发touchend事件,本文针对这个问题作简单讨论,可以在一定程度上解决Canvas组件不触发touchend事件问题。二、问题具体描述屏幕截图画布介绍:width: 300px, height: 300px,为了本文后续部分便于计算,取width: 301px, height: 301px。9个点,每个点的直径 = 点之间的距离 = 点与画布边距 = 301/7 = 43划过的点,实心圆圈直径 = 每个点的直径/2 = 21.5画布绑定了3个事件:touchstart: 手指触摸动作开始(做个标记 touchFlag = true,触摸开始)touchmove:手指触摸后移动(绘制触摸点和线条)touchend:手指触摸动作结束(触摸结束,重置触摸标记 touchFlag = false,判断锁屏密码是否正确?重置画布)操作描述:左侧从上往下滑动,触摸到第三个点后,延着手机屏幕快速向下滑动,直至手指离开画布,这时悲剧的事情发生了,画布没有触发touchend事件,才会看到截图所示。理想状况应该会触发touchend事件,然后程序会判断锁屏密码是否正确?三、解决方案利用touchmove事件,捕捉画布边界,一旦捕捉到就人为触发touchend事件。1、坐标认识画布touchmove事件,获取到的坐标点(x,y)是相对于左上角(图中所示的小红点),从左往右,x变大,从上往下,y变大。捕捉画布边界,我们重点关注4个角的坐标点,即:左上角,右上角,右下角,左下角,连接这4个点,可以得到图中所示的红色小框区域,一旦在touchmove事件中捕捉到当前坐标点在红色小框区域外,即可人为触发touchend事件。2、边界判定四个角的坐标为:1-(43,43), 2-(258,43), 3-(258,258), 4-(43,258)假设,touchmove事件中获取的坐标为(x,y),则只要满足:x43 || y43 || x258 || y258即可认定超过边界,人为触发touchend事件。3、开篇问题解答触摸到第三个点后,快速向下滑动直至手指离开画布,从图中我们可以看出第三个点到画布最下边之间有42的距离,手指划过这个距离,小程序画布组件基本上都可以触发touchmove事件,一旦触发了touchmove事件,那么:touchmove坐标点(x,y),其y肯定大于258,程序会自动人为触发touchend事件进行图案密码验证,也就不会出现图中所示的3点连线,屏幕没其它任何反应的怪事啦。四、小结虽然通过本文方法,可以一定程度上解决Canvas组件某些情况下不会触发touchend事件问题,但是不能杜绝。原因是touchmove事件也不一定会触发出来,还是以前面提到的图片为例,真机实验,第三个点后快速往下滑动直至离开画布,有几次touchmove事件没触发,导致是否越界无法判定,从而依然会出现文中提到的截图现象。

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序画布Canvas组件touchend事件不触发处理
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏