Gesture多终端统一手势库模块

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

简单使用

本手势模块同其他模块一样,在元素上使用ax-gesture属性或者new实例的方式来应用。考虑到手势模块重点在于事件的定义和执行,写在属性上并不方便和美观,所以建议使用new实例的方式应用手势模块。

模块默认开启了click(单击)、dblclilck(双击)和hold(长按)事件。

事件参数为一个对象,包含了事件处理必要的数据,主要有:driftscalerotatetranslate等。

  • 输出
  • 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 失去目标回调