HarmonyOS手势处理
手势处理手势事件
[*]通过差别组件绑定差别手势，设置手势事件响应方式，当手势辨认成功，Ark通过事件回调通知手势辨认效果
绑定手势的方法
. gesture
[*]通例手势绑定方法
.gesture(gestureType,mak?:GestureMask)
. priorityGesture
[*]带优先级的绑定方法
.priorityGesture(gestureType,mask?:GestureMask)
[*]带优先级的绑定方法，在组件上绑定优先辨认手势
[*]在默认环境下，当父子组件同时使用gesture，子组件优先辨认通过gesture绑定手势
[*]当父组件使用priorityGesture绑定与子组件相同手势时，父组件优先通过手势判断
[*]破例：长按手势，长按手势是根据长时间的黑白决定优先级
.parallelGesture
[*]并行手势绑定方法
.parallelGesture(gestureType,mask?:GestureMask)
[*]可以在父组件和子组件上同时响应相同的手势
[*]在默认环境下，手势事件不是冒泡事件
[*]当父子组件绑定相同手势时，就会出现手势竞争，最多只能有一个组件的手势能得到响应
[*]当父组件绑定了并行手势parallelGesture时，父子组件可以同时触发，实现雷同冒泡的效果
按照手势数量分
单一手势
点击手势(TapGesture)
[*]点击手势支持单次点击和多次点击
[*]**count：**声明该点击手势辨认次数。默认为1
[*]**fingers：**用于触发点击的手指数量，最小值1，最大值10，当设置多指时，假如第一根手指按下300ms以内没有足够的手指按下，则视为无效
[*]**事件：**onAction( event ) 手势辨认成功回调
长按手势(LongPressGesture)
[*]长按手势用于触发长按事件，有三个可选参数
[*]**fingers：**用于声明手势的所需要最少手指数量，最小为1，最大为10，默认1
[*]**repeat：**用于声明是否连续触发回调事件（设置为true，长按连续触发）
[*]**duration：**用于声明触发长按所需的最短时间，单位ms，默认500
[*]事件：
[*]onAction( event )：手势辨认成功的回调
[*]onActionEnd( event )：手势辨认成功，当最后一根手指抬起后触发回调
[*]onActionCancel( event )：手势辨认成功，吸收到触摸取消事件触发回调
拖动手势(PanGesture)
[*]拖动手势用于触发拖动事件，滑动达到最小距离时拖动，手势辨认成功有三个参数
[*]fingers：手指数量，最小为2，最大为5，默认2
[*]direction：声明拖动的手势方向，此枚举值（PanDirection）支持逻辑与和逻辑或运算，默认值ALL
[*]distance：用于申明触发拖动的最小辨认距离，单位vp，默认5
[*]事件
[*]onActionStart(()=>{}) 手势辨认成功回调
[*]onActionUpdate(()=>{}) 手势移动过程中的回调
[*]onActionEnd(()=>{}) 手势辨认成功，手指抬起触发回调
[*]onActionCancel() 手势辨认成功，吸收到触摸取消时间触发
捏合手势(PinchGesture)
[*] 有两个可选参数
[*]fingers：手指数量
[*]distance：触发捏合手势的最小距离，默认值为5
[*] 事件
[*]onActionStart(()=>{ }) 手势辨认成功的回调
[*]onActionUpdate(()=>{ }) 手势移动过程中的回调
[*]onActionEnd(()=>{ }) 手势辨认成功，手指抬起时触发
[*]onActioncancel( ) 手势辨认成功，吸收到触摸取消事件触发
[*] 代码
[*] Text('这是一个捏合手势')
.width(200)
.height(300)
.border({
width:3
})
.margin({ top:100 })
//scale 缩放
.scale({
x:this._offset,
y:this._offset
})
.gesture(
PinchGesture()
.onActionStart(() => {
console.log(`>>>捏合手势开始触发`)
})
.onActionUpdate((event) => {
//调整缩放比例
//event.scale 这是比例值 大于0
console.log(`>>>>${event.scale}`)
this._offset = this._offset * event.scale
if(this._offset <= 0.5){
this._offset= 0.5
}
})
.onActionEnd(() => {
console.log(`>>>>捏合手势结束`)
})
)
旋转手势(RotationGesture)
[*] 有两个可选参数
[*]fingers：用于声明触发旋转手势需要最少手指数量为2，最大为5，默认为2
[*]angle：选择手势最小改变度数，单位deg
[*] 事件
[*]onActionStart( )：手势辨认成功的回调
[*]onActionUpdate( )：手势移动过程的回调
[*]onActionEnd( )：手势辨认成功，手指抬起触发
[*] 代码
[*] Text('这是旋转手势触发对象')
.width(200)
.height(300)
.border({
width:1
})
//组件的旋转角度，x,y 旋转轴的坐标 angle:旋转角度
.rotate({
angle:this._DEG
})
.gesture(
RotationGesture()
.onActionStart(() => {
console.log('>>>>旋转手势被触发')
})
.onActionUpdate((event) => {
//用于RotationGesture手势触发场景,表示旋转角度
console.log(`>>>>${event.angle}`)
this._DEG = event.angle
})
)
滑动手势(SwiperGesture)
[*] 当滑动速度大于100vp/s时，可辨认成功
[*] 有三个参数：
[*]**fingers：**用于声明触滑动手势最小的手指数量，最小值为1，最大值为10，默认1
[*]**direction：**用于声明触发滑动手势的方向，枚举值支持&& 和 ||
[*]speed：用于声明触发滑动最小滑动辨认速度，vp/s 默认值100
[*] 事件
[*]onAction：swiper手势辨认成功回调
[*] 代码
[*] Column(){
Text(`滑动手势的速度:${this.speed}`)
Text(`滑动手势的角度:${this.rotateAngle}`)
}
.border({ width: 3 })
.width(300)
.height(200)
// rotate：组的旋转，angle角度
.rotate({ angle:this.rotateAngle })
.gesture(
SwipeGesture({ fingers:2 })
.onAction((event) => {
console.log(`>>>>发生了滑动`)
if(event){
/*
* 滑动手势的速度
* 手指相对于组件原始区域滑动的评价速度
*
* */
this.speed = event.speed
/*
* 滑动角度
* 即两个手指间的线段与水平方向的夹角变化的度数
*
* */
this.rotateAngle = event.angle
}
})
)
组合手势
[*]组合手势由多种单一手势组合而成，通过GestureGroup中使用差别的GestureMode来声明该组合手势的范例
[*]顺序辨认，并行辨认，互斥辨认
[*]GestureGroup
[*]mode：手势辨认模式，顺序辨认，并行辨认，互斥辨认
[*]Sequence 顺序辨认
[*]Parallel 并行辨认
[*]Exclusive 互斥辨认
[*]guesture：手势范例 6种单一手势
顺序辨认
[*]组合手势按照手势的注册顺序辨认手势，直到所有手势辨认成功。
[*]当顺序辨认由一个手势辨认失败，后续手势均失败。
[*]在顺序辨认手势组中仅有最后一个手势可以响应onActionEnd
Column(){
Text(
'组合手势\n' + '长按手势:' + this.count + '\n拖动手势偏移' +
'\n x:' + this.x + '\ny:' + this.y
)
.fontSize(28)
}
.width(250)
.height(300)
.margin(10)
.border({
width:1,
style:this.border_style
})
//偏移量
.translate({
x:this.x,
y:this.y
})
/*
* 一个有长按手势与拖动手势结合的组合手势
*
* */
//绑定手势
.gesture(
//组合手势
GestureGroup(
//声明组合手势类型为顺序识别
GestureMode.Sequence,
//第一个触发的手势为长按手势，且长按手势可以多次相应
LongPressGesture( { repeat: true } )
.onAction((event) => {
this.count++
}),
//当长按之后进行拖动，拖动手势将被触发
PanGesture()
.onActionStart(() => {
this.border_style = BorderStyle.Dashed
})
.onActionUpdate((event) => {
this.x = this.offset_x + event.offsetX
this.y = this.offset_y + event.offsetY
})
.onActionEnd(() => {
this.offset_x = this.x
this.offset_y = this.y
this.border_style = BorderStyle.Solid
})
)
.onCancel(() => {
//顺序手势没有全部执行则触发
console.log('顺序手势结束')
})
)
并行辨认
[*]并行辨认组合手势中注册的手势将同时举行辨认，直到所有手势辨认结束
[*]并行辨认手势组合中的手势举行辨认互不影响
Column(){
Text('并行事件\n' + '并行事件1:' + this.count1 +
'\n 并行事件2:' + this.count2
)
.fontSize(28)
}
.height(500)
.width('100%')
.border({
width:1
})
.justifyContent(FlexAlign.Center)
//绑定手势
.gesture(
//并行识别的组合手势
GestureGroup(
GestureMode.Parallel,
//单击手势
TapGesture({ count:1 })
.onAction(() => {
this.count1++
}),
//双击手势
TapGesture({ count:2 })
.onAction(() => {
this.count2++
})
)
)
互斥辨认
[*]互斥辨认将组合手势中注册的手势同时辨认
[*]若有一个手势辨认成功，则结束手势辨认，其他所有手势辨认失败
Column(){
Text('互斥事件\n' + '互斥事件1:' + this.count1 +
'\n 互斥事件2:' + this.count2
)
.fontSize(28)
}
.height(500)
.width('100%')
.border({
width:1
})
.justifyContent(FlexAlign.Center)
//绑定手势
.gesture(
//并行识别的组合手势
GestureGroup(
GestureMode.Exclusive,
//为什么？因为点击事件以两次点击间隔时间
// 是否大于300ms为识别界限，
// 如果小于300ms那么继续计入到点击次数中
//如果大于300ms触发对应事件
//双击手势
TapGesture({ count:4 })
.onAction(() => {
this.count2++
}),
//单击手势
TapGesture({ count:3 })
.onAction(() => {
this.count1++
}),
)
)
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]