• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# RotationGesture
2
3**RotationGesture** is used to trigger a rotation gesture, which requires two to five fingers with a minimum 1-degree rotation angle. This gesture cannot be triggered using a two-finger rotation operation on a trackpad.
4
5>  **NOTE**
6>
7>  This gesture is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
8
9
10## APIs
11
12RotationGesture(value?: { fingers?: number, angle?: number })
13
14**Atomic service API**: This API can be used in atomic services since API version 11.
15
16**Parameters**
17
18| Name| Type| Mandatory| Description|
19| -------- | -------- | -------- | -------- |
20| fingers | number | No| Minimum number of fingers to trigger a rotation. The value ranges from 2 to 5.<br>Default value: **2**<br>While more fingers than the minimum number can be pressed to trigger the gesture, only the first two fingers participate in gesture calculation.|
21| angle | number | No| Minimum degree that can trigger the rotation gesture.<br>Default value: **1**<br>**NOTE**<br>If the value is less than or equal to 0 or greater than 360, it will be converted to the default value.|
22| isFingerCountLimited<sup>15+</sup> | boolean | No| Whether to enforce the exact number of fingers touching the screen. With the value **true**, the gesture recognition fails if the number of fingers touching the screen does not match the configured value of **fingers**. The gesture can only be successfully recognized if the number of fingers equals the configured minimum and the swipe distance meets the threshold. Note that only the first two fingers that touch the screen are considered for the gesture. If one of these fingers is lifted, the gesture recognition fails.<br>For gestures that have already been successfully recognized, changing the number of fingers touching the screen will not trigger the[onActionUpdate](ts-basic-gestures-rotationgesture.md#events) event, but the [onActionEnd](ts-basic-gestures-rotationgesture.md#events) event can still be triggered.<br>Default value: **false**|
23
24
25## Events
26
27| Name | Description|
28| -------- | -------- |
29| onActionStart(event:(event: [GestureEvent](ts-gesture-settings.md#gestureevent)) =&gt; void) | Triggered when a rotation gesture is recognized.<br>**Atomic service API**: This API can be used in atomic services since API version 11.|
30| onActionUpdate(event:(event: [GestureEvent](ts-gesture-settings.md#gestureevent)) =&gt; void) | Triggered when the user moves the finger in a rotation gesture on the screen.<br>**Atomic service API**: This API can be used in atomic services since API version 11.|
31| onActionEnd(event:(event: [GestureEvent](ts-gesture-settings.md#gestureevent)) =&gt; void) | Triggered when the finger used for the rotation gesture is lifted.<br>**Atomic service API**: This API can be used in atomic services since API version 11.|
32| onActionCancel(event: () =&gt; void) | Triggered when a tap cancellation event is received after the rotation gesture is recognized. No gesture event information is returned.<br>**Atomic service API**: This API can be used in atomic services since API version 11.|
33| onActionCancel(event:(event: [GestureEvent](ts-gesture-settings.md#gestureevent)) =&gt; void)<sup>18+</sup> | Triggered when a tap cancellation event is received after the rotation gesture is recognized. Gesture event information is returned.<br>**Atomic service API**: This API can be used in atomic services since API version 18.|
34
35## Attributes
36
37| Name| Type   |Description                                       |
38| ----  | ------  | ---------------------------------------- |
39| tag<sup>11+</sup>   | string  | Tag for the rotation gesture. It is used to distinguish the gesture during custom gesture judgment.<br>**Atomic service API**: This API can be used in atomic services since API version 11.|
40| allowedTypes<sup>14+</sup> | Array\<[SourceTool](ts-gesture-settings.md#sourcetool9)> | Allowed event input types for the rotation gesture.<br>**Atomic service API**: This API can be used in atomic services since API version 14.|
41
42## Example
43
44This example demonstrates the recognition of a two-finger rotation gesture using **RotationGesture**.
45
46```ts
47// xxx.ets
48@Entry
49@Component
50struct RotationGestureExample {
51  @State angle: number = 0
52  @State rotateValue: number = 0
53
54  build() {
55    Column() {
56      Column() {
57        Text('RotationGesture angle:' + this.angle)
58      }
59      .height(200)
60      .width(300)
61      .padding(20)
62      .border({ width: 3 })
63      .margin(80)
64      .rotate({ angle: this.angle })
65      // The gesture event is triggered by rotating with two fingers.
66      .gesture(
67      RotationGesture()
68        .onActionStart((event: GestureEvent) => {
69          console.info('Rotation start')
70        })
71        .onActionUpdate((event: GestureEvent) => {
72          if (event) {
73            this.angle = this.rotateValue + event.angle
74          }
75        })
76        .onActionEnd((event: GestureEvent) => {
77          this.rotateValue = this.angle
78          console.info('Rotation end')
79        })
80      )
81    }.width('100%')
82  }
83}
84```
85
86 ![en-us_image_0000001174264372](figures/en-us_image_0000001174264372.png)
87