Gesture多终端统一手势库模块
Gesture手势库是AXUI专用的多终端手势库模块,规范了click单击、dblclick双击、hold长按、cancel取消、scale缩放、rotate旋转事件和translate移动事件,另外还特别处理了桌面端的wheel滚轮事件和右键事件。
简单使用
本手势模块同其他模块一样,在元素上使用ax-gesture
属性或者new
实例的方式来应用。考虑到手势模块重点在于事件的定义和执行,写在属性上并不方便和美观,所以建议使用new实例的方式应用手势模块。
模块默认开启了click
(单击)、dblclilck
(双击)和hold
(长按)事件。
事件参数为一个对象,包含了事件处理必要的数据,主要有:drift
、scale
、rotate
、translate
等。
- 输出
- HTML
- JS
-
-
-
let gesture = new ax.Gesture('#demo01',{ onClick:(data)=>{ console.log('单击了',data) }, onDblclick:(data)=>{ console.log('双击了',data) }, onHold:(data)=>{ console.log('长按了',data) }, });
右键事件
移动端没有右键事件,但是可以使用hold
长按事件;而桌面端既可以使用hold
长按事件,也可以使用右键事件(contextmenu
)。
虽然桌面端可以使用左键长按某个元素,但是通常是使用右键代替长按的。为了规范统一,默认桌面端的hold事件等于contextmenu,也就是说对元素使用右键等于执行hold事件。
如果用户需要做自定义桌面端右键事件,则应该设置click.hold2Menu:false
。
- 输出
- HTML
- JS
-
-
-
let gesture = new ax.Gesture('#demo02',{ click:{ hold2Menu:false, }, onHold:(data)=>{ console.log('长按了',data) }, }); demo02.oncontextmenu = (e)=>{ //右键会弹出默认菜单,所以应该先禁止,然后再自定义自己的菜单 e.preventDefault(); console.log('使用了鼠标右键') }
位移事件
位移事件也叫做拖拽事件,通过控制style.transform.translate属性或position.left/top属性来实现元素位移。
位移事件组由translate
(开始)、translating
(进行中)和translated
(完成)构成。
因为桌面端和移动端的位移事件都是靠拖拽距离而实现,操作方法相似而且比较常见,所以该事件默认是开启的。
拖拽过程中将自动向目标节点追加dragging
属性。
注意,本例在控制台中有输出内容,在拖拽过程中有些卡顿,取消控制台输出可恢复流畅。
- 输出
- HTML
- JS
-
-
-
new ax.Gesture('#demo06',{ onTranslate:(data)=>{ console.log('开始位移',data) }, onTranslating:(data)=>{ //使用transformTools.set方法设置translate值 ax.transformTools.set({ el:'#demo06', data:{translate:data.translate.value} });console.log(data.orgEvt.target) console.log('正在位移',data); }, onTranslated:(data)=>{console.log(data.orgEvt.target) console.log('完位移',data) } });
基础配置
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
parent | string | '' | 父容器选择器 |
unbound | string | '[unbound]' | 不绑定事件的元素选择器 |
origin | object/null | null | 元素变换原点 |
jitterClick | number | 10 | 点击抖动阈值 |
jitterTrans | number | 1 | 移动防抖值 |
视窗配置
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
viewport.enable | boolean | false | 是否启用反弹视窗 |
viewport.selector | string | '' | 视窗节点选择器 |
viewport.dmpRatio | number | 0.8 | 拖拽阻尼系数 |
viewport.bouncy | boolean | true | 是否允许边缘反弹 |
viewport.duration | number | 0 | 反弹动画时长(ms) |
点击配置
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
click.timeThr | number | 200 | 点击事件时间阈值(ms) |
click.delay | number | 200 | 双击等待时间(ms) |
click.dblclickable | boolean | true | 是否允许双击 |
click.holdDelay | number | 1000 | 长按延时(ms) |
click.hold2Menu | boolean | false | 长按是否等效右键 |
步进配置
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
step.mode | 'translate'/'scale'/'rotate' | 'translate' | 步进模式 |
step.axis | 'x'/'y' | 'y' | 移动方向 |
step.value | number | 0 | 步进值 |
step.duration | number | 500 | 动画时长(ms) |
step.intvl | number | 200 | 节流间隔(ms) |
step.linkage | boolean | true | 是否触发相应事件 |
step.reverse | boolean | false | 是否逆向操作 |
step.curve | 'linear'/'ease'/'easeIn'/'easeOut'/'easeInOut'/'easeOutIn' | 'easeOut' | 动画曲线 |
键盘配置
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
keyboard.enable | boolean | false | 是否启用键盘 |
keyboard.prev | string | 'ArrowUp' | 前进按键 |
keyboard.next | string | 'ArrowDown' | 后退按键 |
keyboard.intvl | number | 200 | 节流间隔(ms) |
keyboard.target | string/null | null | 触发键盘事件的节点 |
位移配置
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
translate.enable | boolean | true | 是否启用位移 |
translate.max | number | 10000000 | 最大位移值(px) |
translate.min | number | -10000000 | 最小位移值(px) |
translate.instead | boolean | false | 是否使用position |
translate.target | string | '' | 位移手柄选择器 |
漂移配置
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
drift.enable | boolean | false | 是否启用漂移 |
drift.timeThr | number | 300 | 时间阈值(ms) |
drift.distThr | number | 20 | 距离阈值(px) |
drift.coef | number | 0.5 | 漂移系数 |
drift.duration | number | 500 | 动画时长(ms) |
drift.curve | 'linear'/'ease'/'easeIn'/'easeOut'/'easeInOut'/'easeOutIn' | 'easeOut' | 运动曲线 |
drift.auto | boolean | true | 是否自动完成 |
滑动配置
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
swipe.enable | boolean | false | 是否启用滑动 |
swipe.timeThr | number | 100 | 时间阈值(ms) |
swipe.distThr | number | 20 | 距离阈值(px) |
swipe.coef | number | 0.5 | 滑动系数 |
swipe.duration | number | 500 | 动画时长(ms) |
swipe.curve | 'linear'/'ease'/'easeIn'/'easeOut'/'easeInOut'/'easeOutIn' | 'easeOut' | 运动曲线 |
swipe.auto | boolean | true | 是否自动完成 |
缩放配置
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
scale.enable | boolean | false | 是否启用缩放 |
scale.centered | boolean | true | 是否居中缩放 |
scale.max | number | 100 | 最大缩放倍数 |
scale.min | number | 0 | 最小缩放倍数 |
旋转配置
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
rotate.enable | boolean | false | 是否启用旋转 |
rotate.max | number | 3600 | 最大旋转角度 |
rotate.min | number | -3600 | 最小旋转角度 |
回调函数
属性 | 类型 | 默认值 | 说明 |
---|---|---|---|
onStart | function | null | 开始触摸回调 |
onMove | function | null | 移动过程回调 |
onEnd | function | null | 结束触摸回调 |
onClick | function | null | 点击回调 |
onDblclick | function | null | 双击回调 |
onHold | function | null | 长按回调 |
onScale | function | null | 开始缩放回调 |
onScaling | function | null | 缩放过程回调 |
onScaled | function | null | 缩放结束回调 |
onRotate | function | null | 开始旋转回调 |
onRotating | function | null | 旋转过程回调 |
onRotated | function | null | 旋转结束回调 |
onTranslate | function | null | 开始位移回调 |
onTranslating | function | null | 位移过程回调 |
onTranslated | function | null | 位移结束回调 |
onDrift | function | null | 开始漂移回调 |
onDrifting | function | null | 漂移过程回调 |
onDrifted | function | null | 漂移结束回调 |
onCanceled | function | null | 失去目标回调 |