【HarmonyOS】放大缩小手势实现

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

在鸿蒙中对于常见的手势进行的封装，可以通过简单的API进行监听调用，以下是封装的手势类型：

二、手势绑定操作的实现：

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

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

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

---

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

---

三、DEMO示例：

/*** 手势界面*/
@Entry
@Component
struct GesturePage {private TAG: string = "GesturePage";@State mScale: number = 1;@State pinchValue: number = 1private 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.scalethis.mOldScale = newScale;}}console.info(this.TAG, 'PanGesture onActionUpdate');}).onActionEnd(() => {this.mOldScale = 0;this.pinchValue = this.mScale;console.info(this.TAG, 'PanGesture onActionEnd');}))}
}