【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');
      }))
  }
}
相关推荐
鸿蒙自习室3 小时前
鸿蒙多线程开发——线程间数据通信对象02
ui·harmonyos·鸿蒙
SuperHeroWu75 小时前
【HarmonyOS】鸿蒙应用接入微博分享
华为·harmonyos·鸿蒙·微博·微博分享·微博sdk集成·sdk集成
zhangjr05758 小时前
【HarmonyOS Next】鸿蒙实用装饰器一览(一)
前端·harmonyos·arkts
诗歌难吟46415 小时前
初识ArkUI
harmonyos
SameX15 小时前
HarmonyOS Next 设备安全特性深度剖析学习
harmonyos
郭梧悠16 小时前
HarmonyOS(57) UI性能优化
ui·性能优化·harmonyos
郝晨妤1 天前
鸿蒙原生应用开发元服务 元服务是什么?和App的关系?(保姆级步骤)
android·ios·华为od·华为·华为云·harmonyos·鸿蒙
Peace*1 天前
HarmonyOs鸿蒙开发实战(16)=>沉浸式效果第一种方案一窗口全屏布局方案
harmonyos·鸿蒙·鸿蒙系统
howard20051 天前
鸿蒙实战:页面跳转传参
harmonyos·跳转·router·传参
威哥爱编程2 天前
异步编程在ArkTS中具体怎么实现?
harmonyos·arkts·harmonyos next