OpenHarmony成功复合手势识别

OpenHarmony提供的热区设置属性（responseRegion）只能在不同的触摸热区中触发相反的事情，那么如何成功不同热区不共事情呢，本例即以上述视频播放场景为例启动说明。

成果出现

成果说明：开局时视频以反常速度播放，播放到5秒时，长按播放器右侧触发快进播放，播放到14秒时长按播放器左侧触发快退播放。

环境要求

本例基于以下环境开发，开发者也可以基于其余适配的版本启动开发：

成功思绪

本例即驳回上述思绪为Video组件的左右两侧减少不同的交互举措。从而成功长按视频播放器的左侧触发前进播放，长按右侧触发快进播放。

开发步骤

本例具体开发步骤如下，开发步骤中仅展现相关步骤代码，全量代码请参考完整代码章节的内容。

经过Video组件创立视频播放器，并减少触摸手势，经过触摸控制视频的播放、暂停。

@Componentexport struct VideoPlayer{//...private isPlaying:boolean = trueprivate updateTime: numberprivate videoController:VideoController = new VideoController()build(){// 减少视频组件Video({src:this.videoSrc, controller:this.videoController, previewUri:this.videoPreviewer,currentProgressRate:this.playRate})//...// 失掉进展条的期间点.onUpdate((e)=>{this.updateTime = e.time}).gesture(// 减少触摸手势TapGesture({count:1}).onAction((event:GestureEvent)=>{if (this.isPlaying){// 触摸触发播放this.videoController.start()this.isPlaying = !this.isPlaying} else {// 再次触摸触发暂停this.videoController.pause()this.isPlaying =!this.isPlaying}}))}}

为Video组件减少长按手势，经过长按手势触发播放的快退和快进举措。因为触摸手势和长按手势须要互斥，即一次性只能触发一种手势，所以经过GestureGroup来成功手势的互斥。

.gesture(// 经过GestureGroup的GestureMode.Exclusive参数控制手势互斥GestureGroup(GestureMode.Exclusive,// 减少触摸手势TapGesture({count:1}).onAction((event:GestureEvent)=>{if (this.isPlaying){// 触摸触发播放this.videoController.start()this.isPlaying = !this.isPlaying} else {// 再次触摸触发暂停this.videoController.pause()this.isPlaying =!this.isPlaying}}),// 减少长按手势LongPressGesture({repeat:true})// 长按时触发快进或快退.onAction((event)=>{//减少快进和快退的逻辑，经过event失掉手势坐标启动判别。})// 长按完结后播放速度回归反常.onActionEnd(()=>{// 减少回归反常播放的逻辑})))

补充长按手势中的业务逻辑：经过event失掉到触摸点的x坐标：localX，当localX>=200时，说明触摸点在组件的右侧，触发快进播放；当localX<200时，说明触摸点在左侧，触发快退播放。当触摸中止时，回归反常播放速度。

// 减少长按手势LongPressGesture({repeat:true})// 长按时触发快进或快退.onAction((event)=>{// 失掉到触摸点x坐标localX，当localX>=200时，说明触摸点在组件的右侧，触发快进播放if (event.fingerList[0].localX>=200){// 播放速度变为2倍速this.playRate = PlaybackSpeed.Speed_Forward_2_00_X}// 当localX<200时，说明触摸点在左侧，触发快退播放if (event.fingerList[0].localX<200){if (this.intervalCount===0){// 经过进展期间减小来到达快退的目标，经过setInterval来控制前进的速度，否则会延续触发前进，瞬间前进到播放终点this.seekBack = setInterval(()=>{this.updateTime -= 1this.videoController.setCurrentTime(this.updateTime)},500)}this.intervalCount = 1}})// 长按完结后播放速度回归反常.onActionEnd(()=>{// 播放回归到1倍速this.playRate = PlaybackSpeed.Speed_Forward_1_00_X// 清空计时器clearInterval(this.seekBack)this.intervalCount = 0})

完整代码

说明：本例中经常使用的视频等资源须要交流为开发者自己的资源。

@Entry@Componentexport struct VideoPlayer{private videoSrc:Resource = $rawfile('video_1.mp4')private isPlaying:boolean = trueprivate updateTime: number = 0private videoPreviewer:Resource = $r('app.media.wandering_previewer')private videoController:VideoController = new VideoController()@State playRate:number = 1private seekBack:number = 0private intervalCount:number = 0build(){Column(){// 减少视频组件Video({src:this.videoSrc, controller:this.videoController, previewUri:this.videoPreviewer,currentProgressRate:this.playRate}).width('100%').height('30%').backgroundColor('#fffff0').controls(true).objectFit(ImageFit.Contain)// 失掉进展条的期间点.onUpdate((e)=>{this.updateTime = e.time}).gesture(// 经过GestureGroup的GestureMode.Exclusive参数控制手势互斥GestureGroup(GestureMode.Exclusive,// 减少触摸手势TapGesture({count:1}).onAction((event:GestureEvent)=>{if (this.isPlaying){// 触摸触发播放this.videoController.start()this.isPlaying = !this.isPlaying} else {// 再次触摸触发暂停this.videoController.pause()this.isPlaying =!this.isPlaying}}),// 减少长按手势LongPressGesture({repeat:true})// 长按时触发快进或快退.onAction((event)=>{// 失掉到触摸点x坐标localX，当localX>=200时，说明触摸点在组件的右侧，触发快进播放if (event.fingerList[0].localX>=200){// 播放速度变为2倍速this.playRate = PlaybackSpeed.Speed_Forward_2_00_X}// 当localX<200时，说明触摸点在左侧，触发快退播放if (event.fingerList[0].localX<200){if (this.intervalCount===0){// 经过进展期间减小来到达快退的目标，经过setInterval来控制前进的速度，否则会延续触发前进，瞬间前进到播放终点this.seekBack = setInterval(()=>{this.updateTime -= 1this.videoController.setCurrentTime(this.updateTime)},500)}this.intervalCount = 1}})// 长按完结后播放速度回归反常.onActionEnd(()=>{// 播放回归到1倍速this.playRate = PlaybackSpeed.Speed_Forward_1_00_X// 清空计时器clearInterval(this.seekBack)this.intervalCount = 0})))}.height('100%').width('100%')}}