【HarmonyOS】放大缩小手势实现

【HarmonyOS】放大缩小手势实现

一、鸿蒙中手势的类型: 对于放大缩小手势,在应用开发中使用较为常见,例如预览图片时,扫码时等。

在鸿蒙中对于常见的手势进行的封装,可以通过简单的API进行监听调用,以下是封装的手势类型: 二、手势绑定操作的实现:

1、我们要对UI控件进行手势绑定,最常见的绑定函数是gesture。

2、当实现该函数时,需要从上节中的类型中,选择一种进行实例化,监听回调,实现手势操作开始,更新和结束三个回调。实现放大缩小功能,我们使用捏合手势,PinchGesture。

3、一般我们会根据更新回调中的数值,判定前次手势操作和当前手势操作的差值,来决定逻辑的处理,是否是放大还是缩小,以及这个动作的尺度。


因为系统回调的频率快,直接通过回到里的scale数值进行操作,渲染也会特别快,很影响性能。特别是有些系统API,高强度的set赋值,会导致其渲染卡顿,或者延迟严重。


三、DEMO示例:

dart 复制代码
/**
 * 手势界面
 */
@Entry
@Component
struct GesturePage {

  private TAG: string = "GesturePage";

  @State mScale: number = 1;
  @State pinchValue: number = 1

  private mOldScale: number = 0;
  private MIN_VAL: number = 0.1;
  private SCALE_IF_VAL: number = 1;

  build() {
    Row() {
      Column() {
        Image($r("app.media.background")).size({
          width: "100%",
          height: "100%"
        })
          .scale({
            x: this.mScale,
            y: this.mScale,
            z: 1
          })
      }
      .width('100%')
    }
    .height('100%')
    .gesture(PinchGesture()
      .onActionStart(() => {
        console.info(this.TAG, 'PanGesture onActionStart');
      })
      .onActionUpdate((event?: GestureEvent) => {
        if (event) {
          let newScale = event.scale;
          let dval = Math.abs(newScale - this.mOldScale);
          if(dval > this.MIN_VAL){
            // 放大手势
            if(dval > this.SCALE_IF_VAL){
              console.info(this.TAG, 'PanGesture zoom in');
            }
            // 缩小手势
            else{
              console.info(this.TAG, 'PanGesture zoom out');
            }
            this.mScale = this.pinchValue * event.scale
            this.mOldScale = newScale;
          }
        }
        console.info(this.TAG, 'PanGesture onActionUpdate');
      })
      .onActionEnd(() => {
        this.mOldScale = 0;
        this.pinchValue = this.mScale;
        console.info(this.TAG, 'PanGesture onActionEnd');
      }))
  }
}
相关推荐
SuperHeroWu71 小时前
【HarmonyOS】键盘遮挡输入框UI布局处理
华为·harmonyos·压缩·keyboard·键盘遮挡·抬起
sanzk5 小时前
华为鸿蒙应用开发
华为·harmonyos
SoraLuna10 小时前
「Mac畅玩鸿蒙与硬件28」UI互动应用篇5 - 滑动选择器实现
macos·ui·harmonyos
ClkLog-开源埋点用户分析11 小时前
ClkLog企业版(CDP)预售开启,更有鸿蒙SDK前来助力
华为·开源·开源软件·harmonyos
mg66811 小时前
鸿蒙系统的优势 开发 环境搭建 开发小示例
华为·harmonyos
lqj_本人11 小时前
鸿蒙next选择 Flutter 开发跨平台应用的原因
flutter·华为·harmonyos
lqj_本人11 小时前
使用 Flutter 绘制一个棋盘
harmonyos
lqj_本人14 小时前
Flutter&鸿蒙next 状态管理框架对比分析
flutter·华为·harmonyos
青瓷看世界16 小时前
华为HarmonyOS打造开放、合规的广告生态 - 插屏广告
华为·harmonyos·广告投放
青瓷看世界16 小时前
华为HarmonyOS借助AR引擎帮助应用实现虚拟与现实交互的能力2-管理AR会话
华为·ar·harmonyos·虚拟现实