ts-basic-gestures-rotationgesture.md 2.6 KB
Newer Older
Z
zengyawen 已提交
1
# RotationGesture
Z
zengyawen 已提交
2 3


Z
zengyawen 已提交
4 5 6 7 8
> ![icon-note.gif](public_sys-resources/icon-note.gif) **NOTE:**
> This gesture is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.


## Required Permissions
Z
zengyawen 已提交
9 10

None
Z
zengyawen 已提交
11

Z
zengyawen 已提交
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

## APIs

RotationGesture(options?: { fingers?: number, angle?: number })

- Parameters
    | Name | Type | Mandatory | Default Value | Description | 
  | -------- | -------- | -------- | -------- | -------- |
  | fingers | number | No | 2 | Minimum number of fingers to trigger a rotation. The value ranges from 2 to 5. | 
  | angle | number | No | 1.0 | Minimum degree that can trigger the rotation gesture. | 


## Events

  | Name | Description | 
| -------- | -------- |
| onActionStart((event?: RotationGestureEvent) => void) | Callback invoked when a rotation gesture is recognized. | 
| onActionUpdate((event?: RotationGestureEvent) => void) | Callback invoked during the movement of the rotation gesture. | 
| onActionEnd((event?: RotationGestureEvent) => void) | Callback invoked when the finger used for the rotation gesture is lift. | 
| onActionCancel(event: () => void) | Callback invoked when a tap cancellation event is received after the rotation gesture is recognized. | 

- RotationGestureEvent<sup>8+</sup> attributes
    | Name | Type | Description | 
  | -------- | -------- | -------- |
  | angle | number | Rotation&nbsp;angle. | 


## Example

Z
zengyawen 已提交
41 42 43 44 45 46 47 48 49 50 51 52 53 54 55

```
@Entry
@Component
struct RotationGestureExample {
  @State angle: number = 0

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.SpaceBetween }) {
      Text('RotationGesture angle:' + this.angle)
    }
    .height(100).width(200).padding(20).border({ width:1 })
    .margin(80).rotate({ x:1, y:2, z:3, angle: this.angle })
    .gesture(
      RotationGesture()
Z
zengyawen 已提交
56
        .onActionStart((event: RotationGestureEvent) => {
Z
zengyawen 已提交
57 58
          console.log('Rotation start')
        })
Z
zengyawen 已提交
59
        .onActionUpdate((event: RotationGestureEvent) => {
Z
zengyawen 已提交
60 61 62 63 64 65 66 67 68 69
          this.angle = event.angle
        })
        .onActionEnd(() => {
          console.log('Rotation end')
        })
    )
  }
}
```

Z
zengyawen 已提交
70
![en-us_image_0000001256858403](figures/en-us_image_0000001256858403.gif)