• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# RotationGesture
2<!--Kit: ArkUI-->
3<!--Subsystem: ArkUI-->
4<!--Owner: @jiangtao92-->
5<!--Designer: @piggyguy-->
6<!--Tester: @songyanhong-->
7<!--Adviser: @HelloCrease-->
8
9用于触发旋转手势事件,触发旋转手势的最少手指为2指,最大为5指,最小改变度数为1度。该手势不支持通过触控板双指旋转操作触发。
10
11>  **说明:**
12>
13>  从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
14
15
16## 接口
17
18### RotationGesture
19
20RotationGesture(value?: { fingers?: number; angle?: number })
21
22继承自[GestureInterface\<T>](ts-gesture-common.md#gestureinterfacet11),设置旋转手势事件。
23
24**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
25
26**系统能力:** SystemCapability.ArkUI.ArkUI.Full
27
28**参数:**
29
30| 参数名 | 类型 | 必填 | 说明 |
31| -------- | -------- | -------- | -------- |
32| value | { fingers?: number; angle?: number } | 否 | 设置旋转手势事件参数。<br> - fingers:触发旋转的最少手指数,&nbsp;最小为2指,最大为5指。<br/>默认值:2 <br/>触发手势时手指数量可以多于fingers参数值,但仅最先落下的两指参与手势计算。<br> - angle:触发旋转手势的最小改变度数,单位为deg。<br/>默认值:1 <br/>**说明:** <br/>当改变度数的值小于等于0或大于360时,会被转化为默认值。 |
33
34### RotationGesture<sup>15+</sup>
35
36RotationGesture(options?: RotationGestureHandlerOptions)
37
38设置旋转手势事件。与[RotationGesture](#rotationgesture-1)相比,options参数新增了对isFingerCountLimited参数,表示是否检查触摸屏幕的手指数量。
39
40**原子化服务API:** 从API version 15开始,该接口支持在原子化服务中使用。
41
42**系统能力:** SystemCapability.ArkUI.ArkUI.Full
43
44**参数:**
45
46| 参数名 | 类型 | 必填 | 说明 |
47| -------- | -------- | -------- | -------- |
48| options | [RotationGestureHandlerOptions](./ts-gesturehandler.md#rotationgesturehandleroptions) | 否 |旋转手势处理器配置参数。 |
49
50
51## 事件
52
53>  **说明:**
54>
55>  在[GestureEvent](ts-gesture-common.md#gestureevent对象说明)的fingerList元素中,手指索引编号与位置相对应,即fingerList[index]的id为index。对于先按下但未参与当前手势触发的手指,fingerList中对应的位置为空。建议优先使用fingerInfos。
56
57### onActionStart
58
59onActionStart(event: (event: GestureEvent) => void)
60
61Rotation手势识别成功回调。
62
63**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
64
65**系统能力:** SystemCapability.ArkUI.ArkUI.Full
66
67**参数:**
68
69| 参数名 | 类型                                       | 必填 | 说明                         |
70| ------ | ------------------------------------------ | ---- | ---------------------------- |
71| event  |  (event: [GestureEvent](ts-gesture-common.md#gestureevent对象说明)) => void | 是   | 手势事件回调函数。 |
72
73### onActionUpdate
74
75onActionUpdate(event: (event: GestureEvent) => void)
76
77Rotation手势移动过程中回调。
78
79**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
80
81**系统能力:** SystemCapability.ArkUI.ArkUI.Full
82
83**参数:**
84
85| 参数名 | 类型                                       | 必填 | 说明                        |
86| ------ | ------------------------------------------ | ---- | ---------------------------- |
87| event  |  (event: [GestureEvent](ts-gesture-common.md#gestureevent对象说明)) => void | 是   | 手势事件回调函数。 |
88
89### onActionEnd
90
91onActionEnd(event: (event: GestureEvent) => void)
92
93Rotation手势识别成功,手指抬起后触发回调。
94
95**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
96
97**系统能力:** SystemCapability.ArkUI.ArkUI.Full
98
99**参数:**
100
101| 参数名 | 类型                                       | 必填 | 说明                         |
102| ------ | ------------------------------------------ | ---- | ---------------------------- |
103| event  |  (event: [GestureEvent](ts-gesture-common.md#gestureevent对象说明)) => void | 是   | 手势事件回调函数。 |
104
105### onActionCancel
106
107onActionCancel(event: () => void)
108
109Rotation手势识别成功,接收到触摸取消事件触发回调。不返回手势事件信息。
110
111**原子化服务API:** 从API version 11开始,该接口支持在原子化服务中使用。
112
113**系统能力:** SystemCapability.ArkUI.ArkUI.Full
114
115**参数:**
116
117| 参数名 | 类型                                       | 必填 | 说明                         |
118| ------ | ------------------------------------------ | ---- | ---------------------------- |
119| event  |  () => void | 是   | 手势事件回调函数。 |
120
121### onActionCancel<sup>18+</sup>
122
123onActionCancel(event: Callback\<GestureEvent\>)
124
125Rotation手势识别成功,接收到触摸取消事件触发回调。返回手势事件信息。
126
127**原子化服务API:** 从API version 18开始,该接口支持在原子化服务中使用。
128
129**系统能力:** SystemCapability.ArkUI.ArkUI.Full
130
131**参数:**
132
133| 参数名 | 类型                                       | 必填 | 说明                         |
134| ------ | ------------------------------------------ | ---- | ---------------------------- |
135| event  |  Callback\<[GestureEvent](ts-gesture-common.md#gestureevent对象说明)> | 是   | 手势事件回调函数。 |
136
137## 示例
138
139该示例通过配置RotationGesture实现了双指旋转手势的识别。
140
141```ts
142// xxx.ets
143@Entry
144@Component
145struct RotationGestureExample {
146  @State angle: number = 0;
147  @State rotateValue: number = 0;
148
149  build() {
150    Column() {
151      Column() {
152        Text('RotationGesture angle:' + this.angle)
153      }
154      .height(200)
155      .width(300)
156      .padding(20)
157      .border({ width: 3 })
158      .margin(80)
159      .rotate({ angle: this.angle })
160      // 双指旋转触发该手势事件
161      .gesture(
162      RotationGesture()
163        .onActionStart((event: GestureEvent) => {
164          console.info('Rotation start')
165        })
166        .onActionUpdate((event: GestureEvent) => {
167          if (event) {
168            this.angle = this.rotateValue + event.angle
169          }
170        })
171        .onActionEnd((event: GestureEvent) => {
172          this.rotateValue = this.angle
173          console.info('Rotation end')
174        })
175      )
176    }.width('100%')
177  }
178}
179```
180
181 ![zh-cn_image_0000001174264372](figures/zh-cn_image_0000001174264372.png)