1# 绑定手势方法 2 3> **说明：** 4> 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 5 6 7## 权限列表 8 9无 10 11 12## 绑定手势识别 13 14 15通过如下属性给组件绑定手势识别，手势识别成功后可以通过事件回调通知组件。 16 17 18| 名称 | 参数类型 | 默认值 | 描述 | 19| -------- | -------- | -------- | -------- | 20| gesture | gesture: GestureType,<br/>mask?: GestureMask | gesture: -，<br/>mask: GestureMask.Normal | 绑定手势识别。<br/>- gesture: 绑定的手势类型， <br>- mask: 事件响应设置。 | 21| priorityGesture | gesture: GestureType,<br/>mask?: GestureMask | gesture: -，<br/>mask: GestureMask.Normal | 绑定优先识别手势。<br/>- gesture: 绑定的手势类型， <br>- mask: 事件响应设置。<br/>默认情况下，子组件优先于父组件识别手势，当父组件配置priorityGesture时，父组件优先于子组件进行识别。 | 22| parallelGesture | gesture: GestureType,<br/>mask?: GestureMask | gesture: -，<br/>mask: GestureMask.Normal | 绑定可与子组件手势同时触发的手势。<br/>- gesture: 绑定的手势类型。 <br>- mask: 事件响应设置。<br/>手势事件为非冒泡事件。父组件设置parallelGesture时，父子组件相同的手势事件都可以触发，实现类似冒泡效果。 | 23 24 25- GestureMask枚举说明 26 | 名称 | 描述 | 27 | -------- | -------- | 28 | Normal | 不屏蔽子组件的手势，按照默认手势识别顺序进行识别。 | 29 | IgnoreInternal | 屏蔽子组件的手势，仅当前容器的手势进行识别。<br/>子组件上系统内置的手势不会被屏蔽，如子组件为List组件时，内置的滑动手势仍然会触发。 | 30 31 32- GestureType 33 | 名称 | 描述 | 34 | -------- | -------- | 35 | TapGesture | 点击手势，支持单次点击、多次点击识别。 | 36 | LongPressGesture | 长按手势。 | 37 | PanGesture | 平移手势，滑动最小距离为5vp时识别成功。 | 38 | PinchGesture | 捏合手势。 | 39 | RotationGesture | 旋转手势。 | 40 | SwipeGesture | 滑动手势，滑动最小速度为100vp/s时识别成功。 | 41 | GestureGroup | 手势识别组，多种手势组合为复合手势，支持连续识别、并行识别和互斥识别。 | 42 43 44## 响应手势事件 45 46组件通过gesture方法绑定手势对象，可以通过手势对象提供的事件相应响应手势操作。例如通过TapGesture对象的onAction事件响应点击事件。其余手势的事件定义见各个手势对象章节。若需绑定多种手势请使用 [组合手势](ts-combined-gestures.md)。 47 48- TapGesture事件说明 49 | 名称 | 功能描述 | 50 | -------- | -------- | 51 | onAction((event?:GestureEvent) => void) | Tap手势识别成功回调。 | 52 53- GestureEvent对象说明 54 | 名称 | 类型 | 描述 | 55 | -------- | -------- | -------- | 56 | timestamp<sup>8+</sup> | number | 事件时间戳。 | 57 | target<sup>8+</sup> | [EventTarget](ts-universal-events-click.md) | 触发手势事件的元素对象显示区域。 | 58 | source<sup>8+</sup> | SourceType | 事件输入设备。 | 59 | repeat | boolean | 是否为重复触发事件，用于LongPressGesture手势触发场景。 | 60 | fingerList<sup>8+</sup> | FingerInfo[] | 触发事件的所有手指信息，用于LongPressGesture与TapGesture手势触发场景。 | 61 | offsetX | number | 手势事件x轴偏移量，单位为vp，用于PanGesture手势触发场景。 | 62 | offsetY | number | 手势事件y轴偏移量，单位为vp，用于PanGesture手势触发场景。 | 63 | angle | number | 用于RotationGesture手势触发场景时，表示旋转角度；用于SwipeGesture手势触发场景时，表示滑动手势的角度，即两根手指间的线段与水平方向的夹角变化的度数。<br/>> **说明：**<br/>> 角度计算方式：滑动手势被识别到后，连接两根手指之间的线被识别为起始线条，随着手指的滑动，手指之间的线条会发生旋转，根据起始线条两端点和当前线条两端点的坐标，使用反正切函数分别计算其相对于水平方向的夹角，最后arctan2(cy2-cy1,cx2-cx1)-arctan2(y2-y1,x2-x1)为旋转的角度。以起始线条为坐标系，顺时针旋转为0到180度，逆时针旋转为-180到0度。 | 64 | speed<sup>8+</sup> | number | 滑动手势速度，即所有手指滑动的平均速度，单位为vp/秒，用于SwipeGesture手势触发场景。 | 65 | scale | number | 缩放比例，用于PinchGesture手势触发场景。 | 66 | pinchCenterX | number | 捏合手势中心点x轴坐标，单位为vp，用于PinchGesture手势触发场景。 | 67 | pinchCenterY | number | 捏合手势中心点y轴坐标，单位为vp，用于PinchGesture手势触发场景。 | 68 69- SourceType 70 | 名称 | 描述 | 71 | -------- | -------- | 72 | Unknown | 未知设备。 | 73 | Mouse | 鼠标。 | 74 | TouchScreen | 触摸屏。 | 75 76- FingerInfo对象说明 77 | 名称 | 类型 | 描述 | 78 | -------- | -------- | -------- | 79 | id | number | 手指的索引编号。 | 80 | globalX | number | 相对于应用窗口左上角的x轴坐标。 | 81 | globalY | number | 相对于应用窗口左上角的y轴坐标。 | 82 | localX | number | 相对于当前组件元素左上角的x轴坐标。 | 83 | localY | number | 相对于当前组件元素左上角的y轴坐标。 | 84 85 86## 示例 87 88```ts 89// xxx.ets 90@Entry 91@Component 92struct GestureSettingsExample { 93 @State priorityTestValue: string = ''; 94 @State parallelTestValue: string = ''; 95 96 build() { 97 Column() { 98 Column() { 99 Text('TapGesture:' + this.priorityTestValue).fontSize(28) 100 .gesture( 101 TapGesture() 102 .onAction(() => { 103 this.priorityTestValue += '\nText'; 104 })) 105 } 106 .height(200) 107 .width(250) 108 .padding(20) 109 .margin(20) 110 .border({ width: 3 }) 111 // 设置为priorityGesture时，点击文本会忽略Text组件的TapGesture手势事件，优先识别父组件Column的TapGesture手势事件 112 .priorityGesture( 113 TapGesture() 114 .onAction((event: GestureEvent) => { 115 this.priorityTestValue += '\nColumn'; 116 }), GestureMask.IgnoreInternal) 117 118 Column() { 119 Text('TapGesture:' + this.parallelTestValue).fontSize(28) 120 .gesture( 121 TapGesture() 122 .onAction(() => { 123 this.parallelTestValue += '\nText'; 124 })) 125 } 126 .height(200) 127 .width(250) 128 .padding(20) 129 .margin(20) 130 .border({ width: 3 }) 131 // 设置为parallelGesture时，点击文本会同时触发子组件Text与父组件Column的TapGesture手势事件 132 .parallelGesture( 133 TapGesture() 134 .onAction((event: GestureEvent) => { 135 this.parallelTestValue += '\nColumn'; 136 }), GestureMask.Normal) 137 } 138 } 139} 140``` 141 142 143
