【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');
}))
}
}