OpenHarmony 实战开发——视图加载ImageViewZoom

愿天堂没有996

于 2024-05-27 17:36:50 发布

阅读量719

点赞数 17

分类专栏： HarmonyOS 鸿蒙开发 OpenHarmony 文章标签：嵌入式硬件 OpenHarmony ui 驱动开发移动开发 ArkUI 鸿蒙开发

本文链接：https://blog.csdn.net/m0_70748458/article/details/139243813

版权

鸿蒙开发同时被 3 个专栏收录

578 篇文章 20 订阅

订阅专栏

OpenHarmony

536 篇文章 9 订阅

订阅专栏

HarmonyOS

177 篇文章 0 订阅

订阅专栏

简介

ImageViewZoom 支持加载 Resource 或 PixelMap 图片，支持设置图像显示类型功能，支持缩放功能，支持平移功能，双击放大功能，可以监听图片大小，资源变化事件，支持清除显示图片功能。

效果展示

下载安装

ohpm install @ohos/imageviewzoom

OpenHarmony ohpm 环境配置等更多内容，请参考如何安装 OpenHarmony ohpm 包

使用说明

ets 代码依赖

import {ImageViewTouchDate, ImageViewTouch, DisplayType} from "@ohos/imageviewzoom"
import {PixelMapUtils} from "./PixelMapUtils"
...
//创建model对象
@State private model: ImageViewTouch.Model = new ImageViewTouch.Model();
...
//使用ImageViewTouch组件
ImageViewTouch({ model: $model });
...

在Swiper组件内使用，如果有图片放大后切图的场景，需要在Swiper组件的onAnimationEnd方法内调用gestureConversion方法，调整手势方向，以避免图片index未变化时，出现手势竞争问题，如下所示：

 if (this.currentIndex == index && this.data[this.currentIndex].getScale() > 1) {
   this.data[this.currentIndex].gestureConversion(PanDirection.All, SwipeDirection.None)
 }

接口说明

设置图片资源

public setImageSrc(src ?: Resource | PixelMap | string | null, matrix ?: object | null, minZoom ?: number, maxZoom ?: number): void setImageSrc接口新增src参数的string类型

设置默认图像显示类型

public setDisplayType(type: DisplayType) public getDisplayType(): DisplayType

DisplayType.NONE：图像默认不缩放。 DisplayType.FIT_TO_SCREEN：图像将始终使用此视图的边界呈现。 DisplayType.FIT_IF_BIGGER：仅当大于此视图的边界时才会缩放图像。 DisplayType.FIT_HEIGHT：图像将被缩放以适合设备的高度。 DisplayType.FIT_WIDTH：图像将被缩放以适合设备的宽度。

清除当前显示的图片

public dispose(): void

设置是否能够双击

public setDoubleTapEnabled(value: boolean): void

设置是否能够缩放

public setScaleEnabled(value: boolean): void

设置是否能够滚动

public setScrollEnabled(value: boolean): void

设置图片资源变化监听事件

public setOnDrawableChangedListener(listener: OnDrawableChangeListener): void

设置图片大小变化监听事件

public setOnLayoutChangeListener(listener: OnLayoutChangeListener): void

恢复显示

public resetDisplay(): void

恢复视图矩阵

public resetMatrix(): void

返回当前允许的最大图像比例

public getMaxScale(): number

返回当前允许的最小图像比例

public getMinScale(): number

设置当前视图矩阵

public setImageMatrix(matrix: object): void

返回当前视图矩阵

public getImageViewMatrix(): object

打印矩阵详细信息

public printMatrix(matrix: object): void

返回当前视图比例

public getScale(): number

缩放到目标比例

public zoomTo(scale: number, durationMs: number): void

设置是否能够双击

public setDoubleTapEnabled(value: boolean): void

设置是否能够缩放

public setScaleEnabled(value: boolean): void

返回是否能够双击状态值

public getDoubleTapEnabled(): boolean

判断图片能否根据手势滚动

public canScroll(): boolean

设置双击监听事件

public setDoubleTapListener(listener: OnImageViewTouchDoubleTapListener): void

设置单击监听事件

public setSingleTapListener(listener: OnImageViewTouchSingleTapListener): void

设置滑动手势与拖拽手势的方向

public gestureConversion(panDirection: PanDirection, swipeDirection?: SwipeDirection, vertical?: boolean)

`gestureConversion接口是用于处理拖拽手势PanGesture和滑动手势SwipeGesture的手势竞争问题，通过动态的设置两个手势的触发方向，解决手势竞争。`

图片资源变化监听

onDrawableChanged(src: Resource | PixelMap | string): void onDrawableChanged方法新增src参数的string类型

约束与限制

在下述版本验证通过：

DevEco Studio 版本： 4.1.3.500
OpenHarmony SDK:API11 (4.1.0.63)

目录结构

|---- ImageViewZoom
|     |---- entry  # 示例代码文件夹
|     |---- library  # ImageViewZoom库文件夹
|        |----src
|           |----main
|              |----ets
|                 |---- components
|                       |---- utils  # 工具库
|                             |---- IDisposable.ets  # 提供清除图片接口
|                       |---- ImageViewTouch.ets  # 自定义控件
|           |---- index.ets  # 对外接口
|     |---- README.MD  # 安装使用方法
|     |---- LICENSE #证书

为了帮助到大家能够更有效的学习OpenHarmony 开发的内容，下面特别准备了一些相关的参考学习资料：