綁定手勢(shì)方法

2024-01-22 16:46 更新

為組件綁定不同類型的手勢(shì)事件，并設(shè)置事件的響應(yīng)方法。

說明

從API Version 7開始支持。后續(xù)版本如有新增內(nèi)容，則采用上角標(biāo)單獨(dú)標(biāo)記該內(nèi)容的起始版本。

綁定手勢(shì)識(shí)別

通過如下屬性給組件綁定手勢(shì)識(shí)別，手勢(shì)識(shí)別成功后可以通過事件回調(diào)通知組件。

名稱

參數(shù)類型

默認(rèn)值

描述

gesture

gesture: GestureType,

mask?: GestureMask

gesture: -，

mask: GestureMask.Normal

綁定手勢(shì)。

- gesture: 綁定的手勢(shì)類型，

- mask: 事件響應(yīng)設(shè)置。

priorityGesture

gesture: GestureType,

mask?: GestureMask

gesture: -，

mask: GestureMask.Normal

綁定優(yōu)先識(shí)別手勢(shì)。

- gesture: 綁定的手勢(shì)類型，

- mask: 事件響應(yīng)設(shè)置。

1、默認(rèn)情況下，子組件優(yōu)先識(shí)別通過gesture綁定的手勢(shì)，當(dāng)父組件配置priorityGesture時(shí)，父組件優(yōu)先識(shí)別priorityGesture綁定的手勢(shì)。

2、長(zhǎng)按手勢(shì)時(shí)，設(shè)置觸發(fā)長(zhǎng)按的最短時(shí)間小的組件會(huì)優(yōu)先響應(yīng)，會(huì)忽略priorityGesture設(shè)置。

parallelGesture

gesture: GestureType,

mask?: GestureMask

gesture: -，

mask: GestureMask.Normal

綁定可與子組件手勢(shì)同時(shí)觸發(fā)的手勢(shì)。

- gesture: 綁定的手勢(shì)類型。

- mask: 事件響應(yīng)設(shè)置。

手勢(shì)事件為非冒泡事件。父組件設(shè)置parallelGesture時(shí)，父子組件相同的手勢(shì)事件都可以觸發(fā)，實(shí)現(xiàn)類似冒泡效果。若父子組件中同時(shí)綁定單擊手勢(shì)事件和雙擊手勢(shì)事件，則只響應(yīng)單擊手勢(shì)事件。

GestureType

名稱

描述

TapGesture

點(diǎn)擊手勢(shì)，支持單次點(diǎn)擊、多次點(diǎn)擊識(shí)別。

LongPressGesture

長(zhǎng)按手勢(shì)。

PanGesture

平移手勢(shì)，滑動(dòng)最小距離為5vp時(shí)識(shí)別成功。

PinchGesture

捏合手勢(shì)。

RotationGesture

旋轉(zhuǎn)手勢(shì)。

SwipeGesture

滑動(dòng)手勢(shì)，滑動(dòng)最小速度為100vp/s時(shí)識(shí)別成功。

GestureGroup

手勢(shì)識(shí)別組，多種手勢(shì)組合為復(fù)合手勢(shì)，支持連續(xù)識(shí)別、并行識(shí)別和互斥識(shí)別。

GestureMask枚舉說明

名稱

描述

Normal

不屏蔽子組件的手勢(shì)，按照默認(rèn)手勢(shì)識(shí)別順序進(jìn)行識(shí)別。

IgnoreInternal

屏蔽子組件的手勢(shì)，包括子組件上系統(tǒng)內(nèi)置的手勢(shì)，如子組件為L(zhǎng)ist組件時(shí)，內(nèi)置的滑動(dòng)手勢(shì)同樣會(huì)被屏蔽。

響應(yīng)手勢(shì)事件

組件通過手勢(shì)事件綁定不同GestureType的手勢(shì)對(duì)象，各手勢(shì)對(duì)象在響應(yīng)手勢(shì)操作的事件回調(diào)中提供手勢(shì)相關(guān)信息。下面通過TapGesture手勢(shì)對(duì)象的onAction事件響應(yīng)點(diǎn)擊事件，獲取事件相關(guān)信息。其余手勢(shì)對(duì)象的事件定義見各個(gè)手勢(shì)對(duì)象章節(jié)。 若需綁定多種手勢(shì)請(qǐng)使用 組合手勢(shì)。

TapGesture事件說明

名稱

功能描述

onAction((event?:GestureEvent) => void)

Tap手勢(shì)識(shí)別成功回調(diào)。

GestureEvent對(duì)象說明

名稱

類型

描述

repeat

boolean

是否為重復(fù)觸發(fā)事件，用于LongPressGesture手勢(shì)觸發(fā)場(chǎng)景。

offsetX

number

手勢(shì)事件x軸相對(duì)偏移量，單位為vp，用于PanGesture手勢(shì)觸發(fā)場(chǎng)景，從左向右滑動(dòng)offsetX為正，反之為負(fù)。

offsetY

number

手勢(shì)事件y軸相對(duì)偏移量，單位為vp，用于PanGesture手勢(shì)觸發(fā)場(chǎng)景，從上向下滑動(dòng)offsetY為正，反之為負(fù)。

angle

number

用于RotationGesture手勢(shì)觸發(fā)場(chǎng)景時(shí)，表示旋轉(zhuǎn)角度。

用于SwipeGesture手勢(shì)觸發(fā)場(chǎng)景時(shí)，表示滑動(dòng)手勢(shì)的角度，即兩根手指間的線段與水平方向的夾角變化的度數(shù)。

說明：

角度計(jì)算方式：滑動(dòng)手勢(shì)被識(shí)別到后，連接兩根手指之間的線被識(shí)別為起始線條，隨著手指的滑動(dòng)，手指之間的線條會(huì)發(fā)生旋轉(zhuǎn)，根據(jù)起始線條兩端點(diǎn)和當(dāng)前線條兩端點(diǎn)的坐標(biāo)，使用反正切函數(shù)分別計(jì)算其相對(duì)于水平方向的夾角，最后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手勢(shì)觸發(fā)場(chǎng)景。

pinchCenterX

number

捏合手勢(shì)中心點(diǎn)相對(duì)于當(dāng)前組件元素左上角x軸坐標(biāo)，單位為vp，用于PinchGesture手勢(shì)觸發(fā)場(chǎng)景。

pinchCenterY

number

捏合手勢(shì)中心點(diǎn)相對(duì)于當(dāng)前組件元素左上角y軸坐標(biāo)，單位為vp，用于PinchGesture手勢(shì)觸發(fā)場(chǎng)景。

speed8+

number

滑動(dòng)手勢(shì)速度，即所有手指滑動(dòng)的平均速度，單位為vp/秒，用于SwipeGesture手勢(shì)觸發(fā)場(chǎng)景。

fingerList8+

FingerInfo[]

觸發(fā)事件的所有手指信息，用于LongPressGesture與TapGesture手勢(shì)觸發(fā)場(chǎng)景。

timestamp8+

number

事件時(shí)間戳。

target8+

EventTarget

觸發(fā)手勢(shì)事件的元素對(duì)象顯示區(qū)域。

source8+

SourceType

事件輸入設(shè)備。

pressure9+

number

按壓的壓力大小。

tiltX9+

number

手寫筆在設(shè)備平面上的投影與設(shè)備平面X軸的夾角。

tiltY9+

number

手寫筆在設(shè)備平面上的投影與設(shè)備平面Y軸的夾角。

sourceTool9+

SourceTool

事件輸入源。

SourceType枚舉說明

名稱

描述

Unknown

未知設(shè)備。

Mouse

鼠標(biāo)。

TouchScreen

觸摸屏。

FingerInfo對(duì)象說明

名稱

類型

描述

id

number

手指的索引編號(hào)。

globalX

number

相對(duì)于應(yīng)用窗口左上角的x軸坐標(biāo)。

globalY

number

相對(duì)于應(yīng)用窗口左上角的y軸坐標(biāo)。

localX

number

相對(duì)于當(dāng)前組件元素左上角的x軸坐標(biāo)。

localY

number

相對(duì)于當(dāng)前組件元素左上角的y軸坐標(biāo)。

SourceTool枚舉說明

名稱

描述

Unknown

未知輸入源。

Finger

手指輸入。

Pen

手寫筆輸入。

示例

  1. // xxx.ets
  2. @Entry
  3. @Component
  4. struct GestureSettingsExample {
  5.   @State priorityTestValue: string = ''
  6.   @State parallelTestValue: string = ''
  7. 

  8.   build() {
  9.     Column() {
  10.       Column() {
  11.         Text('TapGesture:' + this.priorityTestValue).fontSize(28)
  12.           .gesture(
  13.           TapGesture()
  14.             .onAction(() => {
  15.               this.priorityTestValue += '\nText'
  16.             }))
  17.       }
  18.       .height(200)
  19.       .width(250)
  20.       .padding(20)
  21.       .margin(20)
  22.       .border({ width: 3 })
  23.       // 設(shè)置為priorityGesture時(shí)，點(diǎn)擊文本會(huì)忽略Text組件的TapGesture手勢(shì)事件，優(yōu)先識(shí)別父組件Column的TapGesture手勢(shì)事件
  24.       .priorityGesture(
  25.       TapGesture()
  26.         .onAction((event: GestureEvent) => {
  27.           this.priorityTestValue += '\nColumn'
  28.         }), GestureMask.IgnoreInternal)
  29. 

  30.       Column() {
  31.         Text('TapGesture:' + this.parallelTestValue).fontSize(28)
  32.           .gesture(
  33.           TapGesture()
  34.             .onAction(() => {
  35.               this.parallelTestValue += '\nText'
  36.             }))
  37.       }
  38.       .height(200)
  39.       .width(250)
  40.       .padding(20)
  41.       .margin(20)
  42.       .border({ width: 3 })
  43.       // 設(shè)置為parallelGesture時(shí)，點(diǎn)擊文本會(huì)同時(shí)觸發(fā)子組件Text與父組件Column的TapGesture手勢(shì)事件
  44.       .parallelGesture(
  45.       TapGesture()
  46.         .onAction((event: GestureEvent) => {
  47.           this.parallelTestValue += '\nColumn'
  48.         }), GestureMask.Normal)
  49.     }
  50.   }
  51. }

以上內(nèi)容是否對(duì)您有幫助：
在線筆記
App下載
App下載

掃描二維碼

下載編程獅App

公眾號(hào)
微信公眾號(hào)

編程獅公眾號(hào)