设为首页 收藏本站
查看: 1157|回复: 0

[经验分享] js实现Mac触摸板双指事件(上/下/左/右/放大/缩小)

[复制链接]

尚未签到

发表于 2017-7-7 18:37:03 | 显示全部楼层 |阅读模式
  前言
  这几天在修复一个web问题时,需要捕获Mac触摸板双指事件(上、下、左、右、放大、缩小),但发现并没有现成的轮子,还是要自己造。
  例如:jquery.mousewheel.js(添加跨浏览器的鼠标滚轮支持), 给得太简单,没有处理Mac双指行为,所以不能用。
  目标
  获取Mac触摸板双指行为,具体有两个,一个是实时拖动路线,二是手势(上、下、左、右、放大、缩小)。
  难点
  双指行为只会触发mousewheel事件,其他什么的touch,mouse都不会触发,只能从这个下手。
  双指特性
  1.在快速滑动过程中,deltaX、deltaY值的最初值的正负是与滑动方向不同的。
  2.在缓慢滑动过程中,deltaX、deltaY值的值域是非常小的,一般在于[-3, 3]。
  3.在1s内,mousewheel事件大概触发100次左右。
  4.滑动过程中,数值会有抖动问题。
  实现拖动路线思路(Path)
  针对快速滑动
  1.deltaX、deltaY值的最初值的正负是与滑动方向不同的这部分数据要舍弃。(因为不是真正方向)

2.每次触发的deltaX、deltaY值两两相减,结果值如果与方向不同,则舍弃。
3.剩下的差值就是方向挪动距离。  4.两个方向的所有差值相加,共两组,哪组值大取哪组,正负决定方向。
  针对缓慢滑动
  1.由于deltaX、deltaY值的值域是非常小,所以都保留,但值与方向不同的,也舍弃。
  2.两个方向的所有差值相加,共两组,哪组值大取哪组,正负决定方向。
  实现手势思路(Gesture)
  在上面的基础上,记录一段时间内deltaX、deltaY和两两差值:
  deltaX、deltaY用来统计放大、缩小手势。
  两两差值用来统计上、下、左、右手势。
  所以,手势是一段时间的手势,而不是某个时刻的。
  实现代码
  具体代码就不贴出来,可直接在我Github下载:https://github.com/codingforme/jquery-mac-mousewheel
  总结
  路线问题:mousewheel给予的deltaX、deltaY值跟操作效果有挺大不同,快速滑动效果特别不准确。
  手势问题:由于双指特性的第三点,手势实现无法精确,即便是把时间段变得很短,但因为数据量问题(无法用微积分的思路),会变得更不精确;把时间段变长,反应时长又会变长;

  具体效果可以下代码来看看,效果不大满意,但可以下载看看,有更好的方案,请告诉我,跪谢。

运维网声明 1、欢迎大家加入本站运维交流群:群②:261659950 群⑤:202807635 群⑦870801961 群⑧679858003
2、本站所有主题由该帖子作者发表,该帖子作者与运维网享有帖子相关版权
3、所有作品的著作权均归原作者享有,请您和我们一样尊重他人的著作权等合法权益。如果您对作品感到满意,请购买正版
4、禁止制作、复制、发布和传播具有反动、淫秽、色情、暴力、凶杀等内容的信息,一经发现立即删除。若您因此触犯法律,一切后果自负,我们对此不承担任何责任
5、所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其内容的准确性、可靠性、正当性、安全性、合法性等负责,亦不承担任何法律责任
6、所有作品仅供您个人学习、研究或欣赏,不得用于商业或者其他用途,否则,一切后果均由您自己承担,我们对此不承担任何法律责任
7、如涉及侵犯版权等问题,请您及时通知我们,我们将立即采取措施予以解决
8、联系人Email:admin@iyunv.com 网址:www.yunweiku.com

所有资源均系网友上传或者通过网络收集,我们仅提供一个展示、介绍、观摩学习的平台,我们不对其承担任何法律责任,如涉及侵犯版权等问题,请您及时通知我们,我们将立即处理,联系人Email:kefu@iyunv.com,QQ:1061981298 本贴地址:https://www.yunweiku.com/thread-391355-1-1.html 上篇帖子: mac 查看C++及各种环境的命令 下篇帖子: mac os eclipse 更换jdk版本 以及 maven安装
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

扫码加入运维网微信交流群X

扫码加入运维网微信交流群

扫描二维码加入运维网微信交流群,最新一手资源尽在官方微信交流群!快快加入我们吧...

扫描微信二维码查看详情

客服E-mail:kefu@iyunv.com 客服QQ:1061981298


QQ群⑦:运维网交流群⑦ QQ群⑧:运维网交流群⑧ k8s群:运维网kubernetes交流群


提醒:禁止发布任何违反国家法律、法规的言论与图片等内容;本站内容均来自个人观点与网络等信息,非本站认同之观点.


本站大部分资源是网友从网上搜集分享而来,其版权均归原作者及其网站所有,我们尊重他人的合法权益,如有内容侵犯您的合法权益,请及时与我们联系进行核实删除!



合作伙伴: 青云cloud

快速回复 返回顶部 返回列表