OpenHarmony實現(xiàn)復(fù)合手勢識別
作者：野生菌君
當(dāng)前OpenHarmony提供的熱區(qū)設(shè)置屬性（responseRegion）只能在不同的觸摸熱區(qū)中觸發(fā)相同的事件，那么如何實現(xiàn)不同熱區(qū)不同事件呢，本例即以上述視頻播放場景為例進行說明。
應(yīng)用開發(fā)中經(jīng)常需要給同一個組件劃分不同的觸摸熱區(qū)，并且不同熱區(qū)觸發(fā)的操作也不同，比如閱讀應(yīng)用通常包含左右兩個觸摸熱區(qū)，用戶觸摸左側(cè)觸發(fā)向后翻頁，觸摸右側(cè)觸發(fā)向前翻頁；同樣的，視頻應(yīng)用中，長按視頻播放器的左側(cè)觸發(fā)快退播放，長按右側(cè)觸發(fā)快進播放等等。
當(dāng)前OpenHarmony提供的熱區(qū)設(shè)置屬性（responseRegion）只能在不同的觸摸熱區(qū)中觸發(fā)相同的事件，那么如何實現(xiàn)不同熱區(qū)不同事件呢，本例即以上述視頻播放場景為例進行說明。
效果呈現(xiàn)
效果說明：開始時視頻以正常速度播放，播放到5秒時，長按播放器右側(cè)觸發(fā)快進播放，播放到14秒時長按播放器左側(cè)觸發(fā)快退播放。
環(huán)境要求
本例基于以下環(huán)境開發(fā)，開發(fā)者也可以基于其他適配的版本進行開發(fā)：
- IDE: DevEco Studio 4.0 Release
- SDK: Ohos_sdk_public 4.0.10.13 (API Version 10 Release)
實現(xiàn)思路
本例即采用上述思路為Video組件的左右兩側(cè)添加不同的交互動作。從而實現(xiàn)長按視頻播放器的左側(cè)觸發(fā)后退播放，長按右側(cè)觸發(fā)快進播放。
開發(fā)步驟
本例詳細開發(fā)步驟如下，開發(fā)步驟中僅展示相關(guān)步驟代碼，全量代碼請參考完整代碼章節(jié)的內(nèi)容。
通過Video組件創(chuàng)建視頻播放器，并添加觸摸手勢，通過觸摸控制視頻的播放、暫停。
@Component
export struct VideoPlayer{
//...
private isPlaying:boolean = true
private updateTime: number
private videoController:VideoController = new VideoController()
build(){
// 添加視頻組件
Video({src:this.videoSrc, controller:this.videoController, previewUri:this.videoPreviewer,currentProgressRate:this.playRate})
//...
// 獲取當(dāng)前進度條的時間點
.onUpdate((e)=>{
this.updateTime = e.time
})
.gesture(
// 添加觸摸手勢
TapGesture({count:1})
.onAction((event:GestureEvent)=>{
if (this.isPlaying){
// 觸摸觸發(fā)播放
this.videoController.start()
this.isPlaying = !this.isPlaying
} else {
// 再次觸摸觸發(fā)暫停
this.videoController.pause()
this.isPlaying =!this.isPlaying
}
})
)
}
}為Video組件添加長按手勢，通過長按手勢觸發(fā)播放的快退和快進動作。由于觸摸手勢和長按手勢需要互斥，即一次只能觸發(fā)一種手勢，所以通過GestureGroup來實現(xiàn)手勢的互斥。
.gesture(
// 通過GestureGroup的GestureMode.Exclusive參數(shù)控制手勢互斥
GestureGroup(GestureMode.Exclusive,
// 添加觸摸手勢
TapGesture({count:1})
.onAction((event:GestureEvent)=>{
if (this.isPlaying){
// 觸摸觸發(fā)播放
this.videoController.start()
this.isPlaying = !this.isPlaying
} else {
// 再次觸摸觸發(fā)暫停
this.videoController.pause()
this.isPlaying =!this.isPlaying
}
}),
// 添加長按手勢
LongPressGesture({repeat:true})
// 長按時觸發(fā)快進或快退
.onAction((event)=>{
//添加快進和快退的邏輯，通過event獲取手勢坐標(biāo)進行判斷。
})
// 長按結(jié)束后播放速度回歸正常
.onActionEnd(()=>{
// 添加回歸正常播放的邏輯
})
)
)補充長按手勢中的業(yè)務(wù)邏輯：通過event獲取到觸摸點的x坐標(biāo)：localX，當(dāng)localX>=200時，說明觸摸點在組件的右側(cè)，觸發(fā)快進播放；當(dāng)localX<200時，說明觸摸點在左側(cè)，觸發(fā)快退播放。當(dāng)觸摸停止時，回歸正常播放速度。
// 添加長按手勢
LongPressGesture({repeat:true})
// 長按時觸發(fā)快進或快退
.onAction((event)=>{
// 獲取到觸摸點x坐標(biāo)localX，當(dāng)localX>=200時，說明觸摸點在組件的右側(cè)，觸發(fā)快進播放
if (event.fingerList[0].localX>=200){
// 播放速度變?yōu)?倍速
this.playRate = PlaybackSpeed.Speed_Forward_2_00_X
}
// 當(dāng)localX<200時，說明觸摸點在左側(cè)，觸發(fā)快退播放
if (event.fingerList[0].localX<200){
if (this.intervalCount===0){
// 通過進度時間減小來達到快退的目的，通過setInterval來控制后退的速度，否則會連續(xù)觸發(fā)后退，瞬間后退到播放起點
this.seekBack = setInterval(()=>{
this.updateTime -= 1
this.videoController.setCurrentTime(this.updateTime)
},500)
}
this.intervalCount = 1
}
})
// 長按結(jié)束后播放速度回歸正常
.onActionEnd(()=>{
// 播放回歸到1倍速
this.playRate = PlaybackSpeed.Speed_Forward_1_00_X
// 清空計時器
clearInterval(this.seekBack)
this.intervalCount = 0
})完整代碼
本例完整代碼如下：
說明：本例中使用的視頻等資源需要替換為開發(fā)者自己的資源。
@Entry
@Component
export struct VideoPlayer{
private videoSrc:Resource = $rawfile('video_1.mp4')
private isPlaying:boolean = true
private updateTime: number = 0
private videoPreviewer:Resource = $r('app.media.wandering_previewer')
private videoController:VideoController = new VideoController()
@State playRate:number = 1
private seekBack:number = 0
private intervalCount:number = 0
build(){
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)
// 獲取當(dāng)前進度條的時間點
.onUpdate((e)=>{
this.updateTime = e.time
})
.gesture(
// 通過GestureGroup的GestureMode.Exclusive參數(shù)控制手勢互斥
GestureGroup(GestureMode.Exclusive,
// 添加觸摸手勢
TapGesture({count:1})
.onAction((event:GestureEvent)=>{
if (this.isPlaying){
// 觸摸觸發(fā)播放
this.videoController.start()
this.isPlaying = !this.isPlaying
} else {
// 再次觸摸觸發(fā)暫停
this.videoController.pause()
this.isPlaying =!this.isPlaying
}
}),
// 添加長按手勢
LongPressGesture({repeat:true})
// 長按時觸發(fā)快進或快退
.onAction((event)=>{
// 獲取到觸摸點x坐標(biāo)localX，當(dāng)localX>=200時，說明觸摸點在組件的右側(cè)，觸發(fā)快進播放
if (event.fingerList[0].localX>=200){
// 播放速度變?yōu)?倍速
this.playRate = PlaybackSpeed.Speed_Forward_2_00_X
}
// 當(dāng)localX<200時，說明觸摸點在左側(cè)，觸發(fā)快退播放
if (event.fingerList[0].localX<200){
if (this.intervalCount===0){
// 通過進度時間減小來達到快退的目的，通過setInterval來控制后退的速度，否則會連續(xù)觸發(fā)后退，瞬間后退到播放起點
this.seekBack = setInterval(()=>{
this.updateTime -= 1
this.videoController.setCurrentTime(this.updateTime)
},500)
}
this.intervalCount = 1
}
})
// 長按結(jié)束后播放速度回歸正常
.onActionEnd(()=>{
// 播放回歸到1倍速
this.playRate = PlaybackSpeed.Speed_Forward_1_00_X
// 清空計時器
clearInterval(this.seekBack)
this.intervalCount = 0
})
)
)
}
.height('100%')
.width('100%')
}
}責(zé)任編輯：姜華
來源：
鴻蒙開發(fā)者社區(qū)
