1 2 3# PanGesture 4 5**PanGesture** is used to trigger a pan gesture, which requires a minimum 5 vp movement distance of a finger on the screen. 6 7> **NOTE** 8> 9> This gesture is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 10 11 12## APIs 13 14PanGesture(value?: { fingers?: number; direction?: PanDirection; distance?: number } | [PanGestureOptions](#pangestureoptions)) 15 16**Parameters** 17 18| Name| Type| Mandatory| Description| 19| -------- | -------- | -------- | -------- | 20| fingers | number | No| Minimum number of fingers to trigger a pan gesture. The value ranges from 1 to 10.<br>Default value: **1**<br>Value range: 1 to 10<br>**NOTE**<br>If the value is less than 1 or is not set, the default value is used.| 21| direction | PanDirection | No| Pan direction. The enumerated value supports the AND (&) and OR (\|) operations.<br>Default value: **PanDirection.All**| 22| distance | number | No| Minimum pan distance to trigger the gesture, in vp.<br>Default value: **5**<br>**NOTE**<br>If a pan gesture and [tab](ts-container-tabs.md) swipe occur at the same time, set **distance** to **1** so that the gesture can be more easily recognized.| 23 24## PanDirection 25 26| Name| Description| 27| -------- | -------- | 28| All | All directions.| 29| Horizontal | Horizontal panning.| 30| Vertical | Vertical panning.| 31| Left | Panning to the left.| 32| Right | Panning to the right.| 33| Up | Panning up.| 34| Down | Panning down.| 35| None | Panning disabled.| 36 37 38## PanGestureOptions 39 40The attributes of the pan gesture recognizer can be dynamically modified using the **PanGestureOptions** API. This avoids modifying attributes through state variables, which will cause the UI to be refreshed. 41 42PanGestureOptions(value?: { fingers?: number; direction?: PanDirection; distance?: number }) 43 44**Parameters** 45 46| Name | Type | Mandatory| Description | 47| --------- | ------------ | ---- | ------------------------------------------------------------ | 48| fingers | number | No | Minimum number of fingers to trigger a pan gesture. The value ranges from 1 to 10.<br>Default value: **1**| 49| direction | PanDirection | No | Pan direction. The enumerated value supports the AND (&) and OR (\|) operations.<br>Default value: **All**| 50| distance | number | No | Minimum pan distance to trigger the gesture, in vp.<br>Default value: **5.0**<br>**NOTE**<br>If a pan gesture and [tab](ts-container-tabs.md) swipe occur at the same time, set **distance** to **1** so that the gesture can be more easily recognized.| 51 52**APIs** 53 54| Name| Description| 55| -------- | -------- | 56| setDirection(value: PanDirection) | Sets the direction.| 57| setDistance(value: number) | Sets the distance.| 58| setFingers(value: number) | Sets the number of fingers.| 59 60 61## Events 62 63| Name| Description| 64| -------- | -------- | 65| onActionStart(event: (event?: [GestureEvent](ts-gesture-settings.md#gestureevent)) => void) | Invoked when a pan gesture is recognized.| 66| onActionUpdate(event: (event?: [GestureEvent](ts-gesture-settings.md#gestureevent)) => void) | Invoked when the pan gesture status is updated.| 67| onActionEnd(event: (event?: [GestureEvent](ts-gesture-settings.md#gestureevent)) => void) | Invoked when the finger used for a pan gesture is lift.| 68| onActionCancel(event: () => void) | Invoked when a tap cancellation event is received after a pan gesture is recognized.| 69 70 71## Example 72 73```ts 74// xxx.ets 75@Entry 76@Component 77struct PanGestureExample { 78 @State offsetX: number = 0 79 @State offsetY: number = 0 80 @State positionX: number = 0 81 @State positionY: number = 0 82 private panOption: PanGestureOptions = new PanGestureOptions({ direction: PanDirection.Left | PanDirection.Right }) 83 84 build() { 85 Column() { 86 Column() { 87 Text('PanGesture offset:\nX: ' + this.offsetX + '\n' + 'Y: ' + this.offsetY) 88 } 89 .height(200) 90 .width(300) 91 .padding(20) 92 .border({ width: 3 }) 93 .margin(50) 94 .translate({ x: this.offsetX, y: this.offsetY, z: 0 }) 95 // Pan left or right to trigger the gesture event. 96 .gesture( 97 PanGesture(this.panOption) 98 .onActionStart((event: GestureEvent) => { 99 console.info('Pan start') 100 }) 101 .onActionUpdate((event: GestureEvent) => { 102 this.offsetX = this.positionX + event.offsetX 103 this.offsetY = this.positionY + event.offsetY 104 }) 105 .onActionEnd(() => { 106 this.positionX = this.offsetX 107 this.positionY = this.offsetY 108 console.info('Pan end') 109 }) 110 ) 111 112 Button ('Set PanGesture Trigger Condition') 113 .onClick(() => { 114 // Set the pan gesture to be triggered by two fingers moving in any direction. 115 this.panOption.setDirection(PanDirection.All) 116 this.panOption.setFingers(2) 117 }) 118 } 119 } 120} 121``` 122 123**Diagrams** 124 125Pannig to the left: 126 127 128 129Click **Set PanGesture Trigger Condition** to two fingers moving toward the lower left corner. 130 131  132
