Gesture多终端统一手势库模块

2024-08-01 12:06:43首发，1个月前更新

Gesture手势库是AXUI专用的多终端手势库模块，规范了click单击、dblclick双击、hold长按、cancel取消、scale缩放、rotate旋转事件和translate移动事件，另外还特别处理了桌面端的wheel滚轮事件和右键事件。

Gesture多终端统一手势库模块 1个月前更新 ax.Gesture多终端统一手势库(class类)详细使用方法和诸多示例 需11金币 2个月前更新

简单使用

本手势模块同其他模块一样，在元素上使用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	失去目标回调