綁定手勢方法
為組件綁定不同類型的手勢事件,并設(shè)置事件的響應(yīng)方法。
說明:
開發(fā)前請熟悉鴻蒙開發(fā)指導(dǎo)文檔 :[gitee.com/li-shizhen-skin/harmony-os/blob/master/README.md]點(diǎn)擊或者復(fù)制轉(zhuǎn)到。
從API Version 7開始支持。后續(xù)版本如有新增內(nèi)容,則采用上角標(biāo)單獨(dú)標(biāo)記該內(nèi)容的起始版本。
綁定手勢識別
通過如下屬性給組件綁定手勢識別,手勢識別成功后可以通過事件回調(diào)通知組件。
名稱 | 參數(shù)類型 | 默認(rèn)值 | 描述 |
---|---|---|---|
gesture | gesture: [GestureType], mask?: [GestureMask] | gesture: -, mask: GestureMask.Normal | 綁定手勢。 - gesture: 綁定的手勢類型, - mask: 事件響應(yīng)設(shè)置。 |
priorityGesture | gesture: [GestureType], mask?: [GestureMask] | gesture: -, mask: GestureMask.Normal | 綁定優(yōu)先識別手勢。 - gesture: 綁定的手勢類型, - mask: 事件響應(yīng)設(shè)置。 1、默認(rèn)情況下,子組件優(yōu)先識別通過gesture綁定的手勢,當(dāng)父組件配置priorityGesture時(shí),父組件優(yōu)先識別priorityGesture綁定的手勢。 2、長按手勢時(shí),設(shè)置觸發(fā)長按的最短時(shí)間小的組件會優(yōu)先響應(yīng),會忽略priorityGesture設(shè)置。 |
parallelGesture | gesture: [GestureType], mask?: [GestureMask] | gesture: -, mask: GestureMask.Normal | 綁定可與子組件手勢同時(shí)觸發(fā)的手勢。 - gesture: 綁定的手勢類型。 - mask: 事件響應(yīng)設(shè)置。 手勢事件為非冒泡事件。父組件設(shè)置parallelGesture時(shí),父子組件相同的手勢事件都可以觸發(fā),實(shí)現(xiàn)類似冒泡效果。若父子組件中同時(shí)綁定單擊手勢事件和雙擊手勢事件,則只響應(yīng)單擊手勢事件。 |
GestureType
名稱 | 描述 |
---|---|
[TapGesture] | 點(diǎn)擊手勢,支持單次點(diǎn)擊、多次點(diǎn)擊識別。 |
[LongPressGesture] | 長按手勢。 |
[PanGesture] | 平移手勢,滑動(dòng)最小距離為5vp時(shí)識別成功。 |
[PinchGesture] | 捏合手勢。 |
[RotationGesture] | 旋轉(zhuǎn)手勢。 |
[SwipeGesture] | 滑動(dòng)手勢,滑動(dòng)最小速度為100vp/s時(shí)識別成功。 |
[GestureGroup] | 手勢識別組,多種手勢組合為復(fù)合手勢,支持連續(xù)識別、并行識別和互斥識別。 |
GestureMask枚舉說明
名稱 | 描述 |
---|---|
Normal | 不屏蔽子組件的手勢,按照默認(rèn)手勢識別順序進(jìn)行識別。 |
IgnoreInternal | 屏蔽子組件的手勢,包括子組件上系統(tǒng)內(nèi)置的手勢,如子組件為List組件時(shí),內(nèi)置的滑動(dòng)手勢同樣會被屏蔽。 |
響應(yīng)手勢事件
組件通過手勢事件綁定不同GestureType的手勢對象,各手勢對象在響應(yīng)手勢操作的事件回調(diào)中提供手勢相關(guān)信息。下面通過TapGesture手勢對象的onAction事件響應(yīng)點(diǎn)擊事件,獲取事件相關(guān)信息。其余手勢對象的事件定義見各個(gè)手勢對象章節(jié)。 若需綁定多種手勢請使用 [組合手勢]。
TapGesture事件說明
名稱 | 功能描述 |
---|---|
onAction((event?:GestureEvent) => void) | Tap手勢識別成功回調(diào)。 |
GestureEvent對象說明
名稱 | 類型 | 描述 |
---|---|---|
repeat | boolean | 是否為重復(fù)觸發(fā)事件,用于LongPressGesture手勢觸發(fā)場景。 |
offsetX | number | 手勢事件x軸相對偏移量,單位為vp,用于PanGesture手勢觸發(fā)場景,從左向右滑動(dòng)offsetX為正,反之為負(fù)。 |
offsetY | number | 手勢事件y軸相對偏移量,單位為vp,用于PanGesture手勢觸發(fā)場景,從上向下滑動(dòng)offsetY為正,反之為負(fù)。 |
angle | number | 用于RotationGesture手勢觸發(fā)場景時(shí),表示旋轉(zhuǎn)角度。 用于SwipeGesture手勢觸發(fā)場景時(shí),表示滑動(dòng)手勢的角度,即兩根手指間的線段與水平方向的夾角變化的度數(shù)。**說明:**角度計(jì)算方式:滑動(dòng)手勢被識別到后,連接兩根手指之間的線被識別為起始線條,隨著手指的滑動(dòng),手指之間的線條會發(fā)生旋轉(zhuǎn),根據(jù)起始線條兩端點(diǎn)和當(dāng)前線條兩端點(diǎn)的坐標(biāo),使用反正切函數(shù)分別計(jì)算其相對于水平方向的夾角,最后arctan2(cy2-cy1,cx2-cx1)-arctan2(y2-y1,x2-x1)為旋轉(zhuǎn)的角度。以起始線條為坐標(biāo)系,順時(shí)針旋轉(zhuǎn)為0到180度,逆時(shí)針旋轉(zhuǎn)為-180到0度。 |
scale | number | 縮放比例,用于PinchGesture手勢觸發(fā)場景。 |
pinchCenterX | number | 捏合手勢中心點(diǎn)相對于當(dāng)前組件元素左上角x軸坐標(biāo),單位為vp,用于PinchGesture手勢觸發(fā)場景。 |
pinchCenterY | number | 捏合手勢中心點(diǎn)相對于當(dāng)前組件元素左上角y軸坐標(biāo),單位為vp,用于PinchGesture手勢觸發(fā)場景。 |
speed8+ | number | 滑動(dòng)手勢速度,即所有手指滑動(dòng)的平均速度,單位為vp/秒,用于SwipeGesture手勢觸發(fā)場景。 |
fingerList8+ | [FingerInfo] | 觸發(fā)事件的所有手指信息,用于LongPressGesture與TapGesture手勢觸發(fā)場景。 |
timestamp8+ | number | 事件時(shí)間戳。 |
target8+ | [EventTarget] | 觸發(fā)手勢事件的元素對象顯示區(qū)域。 |
source8+ | [SourceType] | 事件輸入設(shè)備。 |
pressure9+ | number | 按壓的壓力大小。 |
tiltX9+ | number | 手寫筆在設(shè)備平面上的投影與設(shè)備平面X軸的夾角。 |
tiltY9+ | number | 手寫筆在設(shè)備平面上的投影與設(shè)備平面Y軸的夾角。 |
sourceTool9+ | [SourceTool] | 事件輸入源。 |
velocityX10+ | number | 用于[PanGesture]手勢中,獲取當(dāng)前手勢的x軸方向速度。坐標(biāo)軸原點(diǎn)為屏幕左上角,分正負(fù)方向速度,從左往右為正,反之為負(fù)。 |
velocityY10+ | number | 用于[PanGesture]手勢中,獲取當(dāng)前手勢的y軸方向速度。坐標(biāo)軸原點(diǎn)為屏幕左上角,分正負(fù)方向速度,從上往下為正,反之為負(fù)。 |
velocity10+ | number | 用于[PanGesture]手勢中,獲取當(dāng)前手勢的主方向速度。為xy軸方向速度的平方和的算術(shù)平方根。 |
SourceType枚舉說明
名稱 | 描述 |
---|---|
Unknown | 未知設(shè)備。 |
Mouse | 鼠標(biāo)。 |
TouchScreen | 觸摸屏。 |
FingerInfo對象說明
名稱 | 類型 | 描述 |
---|---|---|
id | number | 手指的索引編號。 |
globalX | number | 相對于應(yīng)用窗口左上角的x軸坐標(biāo)。 |
globalY | number | 相對于應(yīng)用窗口左上角的y軸坐標(biāo)。 |
localX | number | 相對于當(dāng)前組件元素左上角的x軸坐標(biāo)。 |
localY | number | 相對于當(dāng)前組件元素左上角的y軸坐標(biāo)。 |
SourceTool枚舉說明
名稱 | 描述 |
---|---|
Unknown | 未知輸入源。 |
Finger | 手指輸入。 |
Pen | 手寫筆輸入。HarmonyOS與OpenHarmony鴻蒙文檔籽料:mau123789是v直接拿 |
示例
// xxx.ets
@Entry
@Component
struct GestureSettingsExample {
@State priorityTestValue: string = ''
@State parallelTestValue: string = ''
build() {
Column() {
Column() {
Text('TapGesture:' + this.priorityTestValue).fontSize(28)
.gesture(
TapGesture()
.onAction(() = > {
this.priorityTestValue += 'nText'
}))
}
.height(200)
.width(250)
.padding(20)
.margin(20)
.border({ width: 3 })
// 設(shè)置為priorityGesture時(shí),點(diǎn)擊文本會忽略Text組件的TapGesture手勢事件,優(yōu)先識別父組件Column的TapGesture手勢事件
.priorityGesture(
TapGesture()
.onAction((event: GestureEvent) = > {
this.priorityTestValue += 'nColumn'
}), GestureMask.IgnoreInternal)
Column() {
Text('TapGesture:' + this.parallelTestValue).fontSize(28)
.gesture(
TapGesture()
.onAction(() = > {
this.parallelTestValue += 'nText'
}))
}
.height(200)
.width(250)
.padding(20)
.margin(20)
.border({ width: 3 })
// 設(shè)置為parallelGesture時(shí),點(diǎn)擊文本會同時(shí)觸發(fā)子組件Text與父組件Column的TapGesture手勢事件
.parallelGesture(
TapGesture()
.onAction((event: GestureEvent) = > {
this.parallelTestValue += 'nColumn'
}), GestureMask.Normal)
}
}
}
-
組件
+關(guān)注
關(guān)注
1文章
503瀏覽量
17786 -
手勢
+關(guān)注
關(guān)注
0文章
7瀏覽量
5000 -
鴻蒙
+關(guān)注
關(guān)注
57文章
2302瀏覽量
42689
發(fā)布評論請先 登錄
相關(guān)推薦
評論