鸿蒙5.0开发常见问题【如何在长按手势回调方法里获取手指触摸点的坐标?】

使用[组合手势]的顺序识别,当长按手势事件结束后触发拖动手势事件。在手势回调方法里获取event([GestureEvent]类型)的fingerList([FingerInfo[]]类型),获取到localX和localY数值,表示相对于当前组件元素原始区域左上角的坐标地址。可参考如下代码:

@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(
          // The following combined gestures are recognized sequentially. If the long press gesture event is not triggered normally, the drag gesture event will not be triggered.
          GestureGroup(GestureMode.Sequence,
            LongPressGesture({ repeat: true })
              .onAction((event: GestureEvent) => {
                if (event.repeat) {
                  this.count++;
                }
              }),
            PanGesture()
              .onActionStart(() => {
                this.getUIContext().getPromptAction().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(() => {
                this.getUIContext().getPromptAction().showToast({ message: 'Pan end', duration: 1000 });
              })
          )
            .onCancel(() => {
              this.getUIContext().getPromptAction().showToast({ message: 'Cancel', 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')
  }
}
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值