# SwipeGesture
用于触发滑动事件,滑动速度大于100vp/s时可识别成功。
参数名称 参数类型 必填 参数描述 fingers number 否 触发滑动的最少手指数,默认为1,最小为1指,最大为10指。 默认值:1 direction SwipeDirection 否 触发滑动手势的滑动方向。 默认值:SwipeDirection.All speed number 否 识别滑动的最小速度(默认为100VP/秒)。 默认值:100SwipeDirection的三个枚举值
复制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时可识别成功。
参数名称 参数类型 必填 参数描述 fingers number 否 触发滑动的最少手指数,默认为1,最小为1指,最大为10指。 默认值:1 direction SwipeDirection 否 触发滑动手势的滑动方向。 默认值:SwipeDirection.All speed number 否 识别滑动的最小速度(默认为100VP/秒)。 默认值:100SwipeDirection的三个枚举值
复制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%) } }免责声明:文章内容来自互联网,本站不对其真实性负责,也不承担任何法律责任,如有侵权等情况,请与本站联系删除。
转载请注明出处:SwipeGesture和RotationGesture手势-swim歌曲原唱 https://www.yhzz.com.cn/a/5961.html