#鸿蒙通关秘籍#如何在HarmonyOS中处理拖拽悬浮窗的触摸事件?

HarmonyOS
1天前
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
雨后彩虹ML

通过onTouchEvent回调处理触摸事件。当触摸开始时记录触摸点到悬浮窗左上角的偏移。当移动时根据触摸点更新悬浮窗位置,使用animateTo实现跟随动画。当触摸结束时,判断悬浮窗位置决定吸附的方向,并使用弹性动画效果。

case TouchType.Down: {
    this.offsetX = event.touches[0].x;
    this.offsetY = event.touches[0].y;
    break;
  }

case TouchType.Move: {
    const windowX: number = event.touches[0].windowX;
    const windowY: number = event.touches[0].windowY;
    animateTo({ curve: curves.responsiveSpringMotion() }, () => {
      this.positionX = windowX - this.offsetX - Constants.PAGE_PADDING;
      this.positionY = windowY - this.offsetY - this.topRectHeight - Constants.PAGE_PADDING;
    })
    break;
  }

case TouchType.Up: {
    animateTo({ curve: curves.springMotion() }, () => {
      if (this.positionX > (this.windowRectWidth - Constants.FLOAT_WINDOW_WIDTH) / 2) {
        this.positionX = this.windowRectWidth - Constants.FLOAT_WINDOW_WIDTH - Constants.PAGE_PADDING;
      } else {
        this.positionX = Constants.PAGE_PADDING;
      }
      const pageHeight: number = this.windowRectHeight - this.topRectHeight - this.bottomRectHeight;
      if (this.positionY < Constants.PAGE_PADDING) {
        this.positionY = Constants.PAGE_PADDING;
      } else if (this.positionY > pageHeight - Constants.FLOAT_WINDOW_HEIGHT - Constants.PAGE_PADDING) {
        this.positionY = pageHeight - Constants.FLOAT_WINDOW_HEIGHT - Constants.PAGE_PADDING;
      }
    })
    break;
  }
分享
微博
QQ
微信
回复
1天前
相关问题
HarmonyOS 悬浮拖拽功能怎么处理
274浏览 • 1回复 待解决