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:触发旋转的最少手指数, 最小为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 