如何在长按手势回调方法里获取手指触摸点的坐标
2024-12-18 15:42:07
306次阅读
0个评论
使用组合手势的顺序识别,当长按手势事件结束后触发拖动手势事件。在手势回调方法里获取event(GestureEvent类型)的fingerList(FingerInfo[]类型),获取到localX和localY数值,表示相对于当前组件元素原始区域左上角的坐标地址。可参考如下代码
import { promptAction } from '@kit.ArkUI'; 
 
@Component 
struct CoordinatesOfTheFingerTouchPoint { 
  @State count: number = 0; 
  private touchAreaRight: number = 0; 
  private touchAreaBottom: number = 0; 
  @State positionX: number = 0; 
  @State positionY: number = 0; 
  @State gestureEventInfo: string = ''; 
 
  build() { 
    Column() { 
      Row() { 
        Column() { 
          Text('+') 
            .fontSize(28) 
            .position({ x: this.positionX, y: this.positionY }) 
        } 
        .height(200) 
        .width('100%') 
        .backgroundColor('#F1F3F5') 
        .onAreaChange((oldValue: Area, newValue: Area) => { 
          this.touchAreaRight = newValue.width as number; 
          this.touchAreaBottom = newValue.height as number; 
        }) 
        .gesture( 
          // 以下组合手势为顺序识别,当长按手势事件未正常触发时则不会触发拖动手势事件 
          GestureGroup(GestureMode.Sequence, 
            LongPressGesture({ repeat: true }) 
              .onAction((event: GestureEvent) => { 
                if (event.repeat) { 
                  this.count++; 
                } 
              }), 
            PanGesture() 
              .onActionStart(() => { 
                promptAction.showToast({ message: 'Pan start', duration: 1000 }); 
              }) 
              .onActionUpdate((event: GestureEvent) => { 
                for (let i = 0; i < event.fingerList.length; i++) { 
                  if (event.fingerList[i] == undefined 
                    || event.fingerList[i].localX < 0 
                    || event.fingerList[i].localY < 0 
                    || event.fingerList[i].localX > this.touchAreaRight 
                    || event.fingerList[i].localY > this.touchAreaBottom) { 
                    return; 
                  } 
                  this.positionX = event.fingerList[i].localX; 
                  this.positionY = event.fingerList[i].localY; 
                } 
                this.gestureEventInfo = 'sequence gesture\n' + 'LongPress onAction' + this.count 
                  + '\nX:' + this.positionX + '\nY:' + this.positionY; 
              }) 
              .onActionEnd(() => { 
                promptAction.showToast({ message: 'Pan end', duration: 1000 }); 
              }) 
          ) 
            .onCancel(() => { 
              promptAction.showToast({ message: '取消', duration: 1000 }); 
            }) 
        ) 
      } 
      .padding(12) 
      .borderRadius(24) 
      .backgroundColor(Color.White) 
 
      Text(this.gestureEventInfo) 
        .fontSize(18) 
        .width('100%') 
        .textAlign(TextAlign.Start) 
        .padding({ left: 18, top: 30 }) 
    } 
    .height('100%') 
    .width('100%') 
    .backgroundColor('#F1F3F5') 
  } 
}
00
- 1回答
- 0粉丝
- 0关注
相关话题
- 【HarmonyOS NEXT】鸿蒙获取手势触摸点的屏幕全局坐标
- 鸿蒙开发:单一手势实现长按事件
- 【HarmonyOS 5】使用openCustomDialog如何禁止手势关闭的方案
- 【HarmonyOS 5】使用openCustomDialog如何禁止手势关闭的方案
- 如何在Page中获取WindowStage实例
- (二二)HarmonyOS Design 的手势设计
- ArkUI-X与Android桥接通信之方法回调
- 🤚🏻 Harmony OS Next玩转多层级手势事件:当组件遇上“套娃”,触摸该怎么分家?
- 鸿蒙开发:单一手势实现多次点击事件
- 鸿蒙Next文本输入TextInput事件回调总结
- 63.Harmonyos NEXT 图片预览组件之手势处理实现
- 79.HarmonyOS NEXT 手势操作模型详解:移动、缩放与旋转的实现原理
- Harmony OS Next手势操作大揭秘:让你的App动感十足!🌟
- 64.Harmonyos NEXT 图片预览组件之手势处理实现(二)
- 65.Harmonyos NEXT 图片预览组件之手势处理实现(三)
