js实现Mac触摸板双指事件(上/下/左/右/放大/缩小)

前言

这几天在修复一个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值跟操作效果有挺大不同,快速滑动效果特别不准确。

手势问题:由于双指特性的第三点,手势实现无法精确,即便是把时间段变得很短,但因为数据量问题(无法用微积分的思路),会变得更不精确;把时间段变长,反应时长又会变长;

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

时间: 2024-08-02 23:12:20

js实现Mac触摸板双指事件(上/下/左/右/放大/缩小)的相关文章

Mac触摸板的那些奇淫巧术

关于Mac触摸板的用法我刚开始觉得是有些不太上手,比如上滑.右击.复制.缩放.旋转. 在这里呢,刚开始用Mac的我总结了一下几个Mac触摸板的用法,希望对大家有帮助. 上滑.下滑浏览页面:两根手指轻触Mac触摸板,上滑:两手指向上轻轻滑动(这个方法跟一般的电脑触摸板方法是一样的).同理大家可以知道,下滑当然就是两根手机轻轻向下滑动了.(这里我给大家附图) 右击:在Mac中,右击就有好几种方法了.(1)用两手指轻轻触碰触摸板(2)control+轻触触摸板. 复制:用三个手指一起向左向右轻轻滑动,

Mac 触摸板增强神器BetterTouchTool 上手指南

BTT 功能解剖 1:应用选择区点击左下角的「加减号键」可以添加或删除列表中的应用,但它不适用于 Global 选项,前文中已提到,因为它代表的是整个操作系统的大环境,所以任何对它的设置就相当于增加一个新的系统「指定」操作方式. 出于这个原因,这部分的设置项也都是针对 Global 的,分别是: 拷贝 Global 相关的手势操作设置粘贴上述设置禁止将单指滚动操作应用于 Global禁止针对 Global 的窗口捕捉,该功能用于自动调整窗口位置,类似 Moom(下图蓝色虚线框效果)禁止任何针对

修复Win10下Synaptics触摸板双指触击无法打开右键菜单的问题

从Win8.1开始,Synaptics触摸板驱动的键值就不能正确设置,使得双指触击失效,无法打开右键菜单. 解决方法1.打开注册表:2.搜索"2FingerTapAction",或直接定位到以下两个路径:HKEY_LOCAL_MACHINE\SOFTWARE\Synaptics\SynTP\Win8HKEY_CURRENT_USER\Software\Synaptics\SynTP\TouchPadSMB2c 3.把两个路径中"2FingerTapAction"的键

纯js实现用键盘控制DIV上下左右+放大缩小与变色

//用键盘控制DIV,红色方块为键盘操作区域,您可以进行如下操作:左右控制;背景变为绿色;背景变为黄色;背景变为蓝色放大或缩小用键盘控制DIV,红色方块为键盘操作区域,您可以进行如下操作:  上:↑ 下:↓ 左:← 右:→  Ctrl + 1 : 背景变为绿色  Ctrl + 2 : 背景变为黄色  Ctrl + 3 : 背景变为蓝色  Ctrl + ↑ : 放大  Ctrl + ↓ : 缩小 <!-- Author: XiaoWen Create a file: 2017-01-10 19:0

给X240换上了三键触摸板

X240自带的触摸板非常不好用, 对于我这样的指点杆重度用户, 每次要按下整块板真的是太费力了, 而且在夜里声音很吵. 在淘宝上买了三键的X250的触摸板换上了. 这是购买的触摸板的型号 换的时候, 只需要把X240后盖打开, 卸下内置的电芯就可以了. 保险起见, 在开盖前要到bios里面关闭内置电源. 电芯下面能看到一块黑色的胶带遮住了连往触摸板的导电带, 把这个黑胶带揭开后, 就可以将导电带从触摸板的卡子上取下来了. 然后从C壳的正面, 从触摸板的下方, 将整个触摸板上层撬开. 因为已经将导

Macbook上Windows的触摸板设置工具

Macbook上用Boot Camp装了双系统后,没了触摸板的三指拖拽功能,滚动(scroll)也太过灵敏,装Boot Camp官方驱动也没用. 装了Trackpad++这个第三方驱动,就能完美实现Mac OS中的所有触摸板特性了. http://trackpad.powerplan7.com/

在 WPF 中如何在控件上屏蔽系统默认的触摸长按事件

来源:https://stackoverflow.com/questions/5962108/disable-a-right-click-press-and-hold-in-wpf-application 在控件上可以设置一个属性: Stylus.IsPressAndHoldEnabled 设置为 False 即可屏蔽触摸长按事件的触发. 参考文档:http://msdn.microsoft.com/en-us/library/system.windows.input.stylus.ispres

为什么(win10系统)电脑上面的鼠标(触摸板)突然用不了?怎么开启和关闭、

1.进入设置,可以看到如下界面 2.点击'设备有 3.再按'鼠标和触摸板' 4.点击最下面的'其他鼠标选择'有如下界面 5.点击'ELAN'选项有 6.点击'启用设备'或者'停止设备'.再点击确定就OK了. '

在thinkpad e450c, ubuntu 16.04上怎么关闭触摸板,不关闭左右键

1.在计算机中搜索"鼠标",打开鼠标和触摸板 2.关闭触摸板即可