APIbeta

手势

Introduce

bp-lib 重新封装了hammerjs以提供手势处理;

example

See the Pen bpui-libs-gesture by brainpoint (@brainpoint) on CodePen.

手势类定义

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121

/**
* @desc: 手势对象.
*/
interface GestureRecognizer {
  /**
   * 与指定手势同时发生. 在需要同时识别多个手势时使用.
   */
  recognizeWith(otherGes:GestureRecognizer):GestureRecognizer;
  /**
   * @desc: 在指定手势识别失败后才识别到.
   */
  requireFailure(ges:GestureRecognizer):void;
}

/**
* @desc: 手势对象.
*       只提供默认的手势, 不提供自定义手势的添加方法.
*/
class Gesture {
  constructor(dom:HTMLElement|SVGElement);

    /**
     * 清理所有设置.
     */
    dispose(): void;

    /**
    * @desc: 添加tap手势识别.
    *         只能识别 tapCount=1,2,3 的情景.
    * @description 默认手势enable操作会重置默认手势的requireFailure关系.
    * @return: 对同一个tapCount值, 只能添加一个手势识别对象; 重复添加, 将返回上一次添加的识别对象.
    */
    enableTapRecognizer(cfg?:{
      tapCount:1|2|3
    }):GestureRecognizer;
    /**
    * @desc: 取消tap手势识别.
    */
    disableTapRecognizer(cfg:{
      tapCount:1|2|3
    }): void;

    /**
    * @desc: 添加pan手势识别.
    * @description 默认手势enable操作会重置默认手势的requireFailure关系.
    * @return: 对同一个direction值, 只能添加一个手势识别对象; 重复添加, 将返回上一次添加的识别对象.
    */
    enablePanRecognizer(cfg:{
      pointers: 1|2|3,
    }):GestureRecognizer;
    /**
    * @desc: 取消pan手势识别.
    */
    disablePanRecognizer(cfg:{
      pointers: 1|2|3,
    }): void;

    /**
    * @desc: 添加pinch手势识别.
    * @description 默认手势enable操作会重置默认手势的requireFailure关系.
    */
    enablePinchRecognizer(): GestureRecognizer;
    /**
    * @desc: 取消pinch手势识别.
    */
    disablePinchRecognizer(): void;

    /**
    * @desc: 添加rotate手势识别.
    * @description 默认手势enable操作会重置默认手势的requireFailure关系.
    */
    enableRotateRecognizer(): GestureRecognizer;
    /**
    * @desc: 取消rotate手势识别.
    */
    disableRotateRecognizer(): void;

    /**
    * @desc: 添加press手势识别. 允许设置按压时间等.
    *         只能有一个press手势识别.
    * @description 默认手势enable操作会重置默认手势的requireFailure关系.
    * @param duration: 按压时间. ms
    */
    enablePressRecognizer(cfg:{
      duration:number
    }): GestureRecognizer;
    /**
    * @desc: 取消rotate手势识别.
    */
    disablePressRecognizer(): void;

    /**
    * @desc: 添加swipe手势识别.
    *         - 相同的pointers值, 只能有一个swipe手势识别.
    *         - 桌面端pointers无效.
    * @description 默认手势enable操作会重置默认手势的requireFailure关系.
    */
    enableSwipeRecognizer(cfg?:{
      velocity?:number,  // (default: 0.3) Minimal velocity required before recognizing, unit is in px per ms.
      distance?:number,  // (default: 10) Minimal distance required before recognizing
      pointers?:1|2|3,  // (default: 1)
    }): GestureRecognizer;
    /**
    * @desc: 取消swipe手势识别.
    */
    disableSwipeRecognizer(cfg?:{
      pointers: 1|2|3,
    }): void;

    /**
    * @desc: 事件监听.
    */
    on(event:'tap'|'pan'|'pinch'|'rotate'|'press'|'swipe', handler:GestureListener):Gesture;
    /**
    * @desc: 移除事件监听.
    * @param handler: 不传递时, 移除指定类型的所有监听.
    */
    off(event:'tap'|'pan'|'pinch'|'rotate'|'press'|'swipe', handler?:GestureListener):Gesture;
}

手势类型

类型 说明
tap 点击, 允许单击/双击/三击
pan 平移, 允许单指/双指/三指/四值平移(桌面端只能为1指)
pinch 缩放
rotate 旋转
press 延时按压
swipe 滑动, 允许单指/双指/三指滑动 (桌面端只能为1指)

Demo

tap

1
2
3
4
5
6
7
8
import bpui from 'bpui.js';

let ges = new bpui.libs.Gesture(window.document.body);

ges.enableTapRecognizer({tapCount:2});
ges.on('tap', (e)=>{
  // double tap.
});

swipe

1
2
3
4
5
6
7
8
import bpui from 'bpui.js';

let ges = new bpui.libs.Gesture(window.document.body);

ges.enableSwipeRecognizer();
ges.on('swipe', (e)=>{
  // swipe event.
});

requireFailure

可以使用此方法对手势识别的优先级进行设置.

1
2
3
4
5
6
7
8
9
import bpui from 'bpui.js';

let ges = new bpui.libs.Gesture(window.document.body);

let recognizerSwipe = ges.enableSwipeRecognizer();
let recognizerTap = ges.enableTapRecognizer();

// swipe手势将在tap手势识别失败后才开始识别.
recognizerSwipe.requireFailure(recognizerTap);
← 0基础库