SwipeGesture和RotationGesture手势-swim歌曲原唱

2023-04-12 17:29:09

# SwipeGesture

用于触发滑动事件，滑动速度大于100vp/s时可识别成功。

参数名称 参数类型 必填 参数描述 fingers number 否 触发滑动的最少手指数，默认为1，最小为1指，最大为10指。默认值：1 direction SwipeDirection 否 触发滑动手势的滑动方向。默认值：SwipeDirection.All speed number 否 识别滑动的最小速度（默认为100VP/秒）。默认值：100

SwipeDirection的三个枚举值

复制declare enum SwipeDirection { /** * Default. * @since 8 */ None, /** * Sliding horizontally. * @since 8 */ Horizontal, /** * Sliding Vertical * @since 8 */ Vertical, /** * Sliding in all directions. * @since 8 */ All } All：所有方向。 Horizontal：水平方向，手指滑动方向与x轴夹角小于45度时触发。 Vertical：竖直方向，手指滑动方向与y轴夹角小于45度时触发。 None：任何方向均不可触发。

事件

复制* Slide gesture recognition success callback. * @since 8 */ onAction(event: (event?: GestureEvent) => void): SwipeGestureInterface;

完整代码

复制@Entry @Component struct SwipeGestureExample { @State rotateAngle: number = 0 @State speed: number = 1 build() { Column() { Column() { Text(“滑动速度” + this.speed) Text(“滑动角度” + this.rotateAngle) } .border({ width: 3 }) .width(300) .height(200) .margin(100) .rotate({ angle: this.rotateAngle,}) // 单指竖直方向滑动时触发该事件 .gesture( SwipeGesture({ fingers:2, direction: SwipeDirection.All }) .onAction((event: GestureEvent) => { this.speed = event.speed this.rotateAngle = event.angle }) ) }.width(100%) } } RotationGesture

用于触发旋转手势事件，触发旋转手势的最少手指为2指，最大为5指，最小改变度数为1度。

数名称 参数类型 必填 参数描述 fingers number 否 触发旋转的最少手指数, 最小为2指，最大为5指。默认值：2 angle number 否 触发旋转手势的最小改变度数，单位为deg。默认值：1

提供了四种事件

事件

** onActionStart(event: (event?: GestureEvent) => void)：Rotation手势识别成功回调。** onActionUpdate(event: (event?: GestureEvent) => void)：Rotation手势移动过程中回调。 ** onActionEnd(event: (event?: GestureEvent) => void)：Rotation手势识别成功，手指抬起后触发回调。** ** onActionCancel(event: () => void)：Rotation手势识别成功，接收到触摸取消事件触发回调。** 复制* Pan gesture recognition success callback. * @since 7 */ onActionStart(event: (event?: GestureEvent) => void): RotationGestureInterface; /** * Callback when the Pan gesture is moving. * @since 7 */ onActionUpdate(event: (event?: GestureEvent) => void): RotationGestureInterface; /** * The Pan gesture is successfully recognized. When the finger is lifted, the callback is triggered. * @since 7 */ onActionEnd(event: (event?: GestureEvent) => void): RotationGestureInterface; /** * The Pan gesture is successfully recognized and a callback is triggered when the touch cancel event is received. * @since 7 */ onActionCancel(event: () => void): RotationGestureInterface; }

完整代码：

复制// xxx.ets @Entry @Component struct RotationGestureExample { @State angle: number = 0 @State rotateValue: number = 0 build() { Column() { Column() { Text(旋转角度: + this.angle) } .height(200) .width(300) .padding(20) .border({ width: 3 }) .margin(80) .rotate({ angle: this.angle }) // 双指旋转触发该手势事件 .gesture( RotationGesture() .onActionStart((event: GestureEvent) => { console.info(Rotation start) }) .onActionUpdate((event: GestureEvent) => { this.angle = this.rotateValue + event.angle }) .onActionEnd(() => { this.rotateValue = this.angle console.info(Rotation end) }).onActionCancel(()=>{ console.info(Rotation onActionCancel) }) ) }.width(100%) } }

用于触发滑动事件，滑动速度大于100vp/s时可识别成功。