【OpenHarmony】 鸿蒙图片加载 ImageViewZoom

简介

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

效果展示

下载安装

bash 复制代码
ohpm install @ohos/imageviewzoom 

使用说明

ets 代码依赖

ts 复制代码
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未变化时,出现手势竞争问题,如下所示:

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

DD一下: 欢迎大家关注工粽号<程序猿百晓生>,可以了解到以下知识点。

erlang 复制代码
`欢迎大家关注工粽号<程序猿百晓生>,可以了解到以下知识点。`
1.OpenHarmony开发基础
2.OpenHarmony北向开发环境搭建
3.鸿蒙南向开发环境的搭建
4.鸿蒙生态应用开发白皮书V2.0 & V3.0
5.鸿蒙开发面试真题(含参考答案) 
6.TypeScript入门学习手册
7.OpenHarmony 经典面试题(含参考答案)
8.OpenHarmony设备开发入门【最新版】
9.沉浸式剖析OpenHarmony源代码
10.系统定制指南
11.【OpenHarmony】Uboot 驱动加载流程
12.OpenHarmony构建系统--GN与子系统、部件、模块详解
13.ohos开机init启动流程
14.鸿蒙版性能优化指南
.......

接口说明

  1. 设置图片资源

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

  2. 设置默认图像显示类型

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

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

  1. 清除当前显示的图片

    public dispose(): void

  2. 设置是否能够双击

    public setDoubleTapEnabled(value: boolean): void

  3. 设置是否能够缩放

    public setScaleEnabled(value: boolean): void

  4. 设置是否能够滚动

    public setScrollEnabled(value: boolean): void

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

    public setOnDrawableChangedListener(listener: OnDrawableChangeListener): void

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

    public setOnLayoutChangeListener(listener: OnLayoutChangeListener): void

  7. 恢复显示

    public resetDisplay(): void

  8. 恢复视图矩阵

public resetMatrix(): void

  1. 获取当前允许的最大图像比例

public getMaxScale(): number

  1. 获取当前允许的最小图像比例

public getMinScale(): number

  1. 设置当前视图矩阵

public setImageMatrix(matrix: object): void

  1. 返回当前视图矩阵

public getImageViewMatrix(): object

  1. 打印矩阵详细信息

public printMatrix(matrix: object): void

  1. 返回当前视图比例

public getScale(): number

  1. 缩放到目标比例

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

DD一下: 欢迎大家关注工粽号<程序猿百晓生>,可以了解到以下知识点。

erlang 复制代码
`欢迎大家关注工粽号<程序猿百晓生>,可以了解到以下知识点。`
1.OpenHarmony开发基础
2.OpenHarmony北向开发环境搭建
3.鸿蒙南向开发环境的搭建
4.鸿蒙生态应用开发白皮书V2.0 & V3.0
5.鸿蒙开发面试真题(含参考答案) 
6.TypeScript入门学习手册
7.OpenHarmony 经典面试题(含参考答案)
8.OpenHarmony设备开发入门【最新版】
9.沉浸式剖析OpenHarmony源代码
10.系统定制指南
11.【OpenHarmony】Uboot 驱动加载流程
12.OpenHarmony构建系统--GN与子系统、部件、模块详解
13.ohos开机init启动流程
14.鸿蒙版性能优化指南
.......
  1. 设置是否能够双击

public setDoubleTapEnabled(value: boolean): void

  1. 设置是否能够缩放

public setScaleEnabled(value: boolean): void

  1. 返回是否能够双击状态值

public getDoubleTapEnabled(): boolean

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

public canScroll(): boolean

  1. 设置双击监听事件

public setDoubleTapListener(listener: OnImageViewTouchDoubleTapListener): void

  1. 设置单击监听事件

public setSingleTapListener(listener: OnImageViewTouchSingleTapListener): void

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

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

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

  1. 图片资源变化监听

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

约束与限制

在下述版本验证通过:

  • DevEco Studio: NEXT Beta1-5.0.3.806,SDK:API12 Release(5.0.0.66)
  • DevEco Studio NEXT Developer Beta3: 5.0(5.0.3.530), SDK: API12 (5.0.0.35(SP3))

目录结构

lua 复制代码
|---- ImageViewZoom
|     |---- entry  # 示例代码文件夹
|     |---- library  # ImageViewZoom库文件夹
|        |----src
|           |----main
|              |----ets
|                 |---- components
|                       |---- utils  # 工具库
|                             |---- IDisposable.ets  # 提供清除图片接口
|                       |---- ImageViewTouch.ets  # 自定义控件
|           |---- index.ets  # 对外接口
|     |---- README.MD  # 安装使用方法
|     |---- README_zh.MD  # 安装使用方法
|     |---- LICENSE #证书
相关推荐
代码飞天10 小时前
harmonyOS开发基础之标题栏(HdsNavigation)
华为·harmonyos
2501_9206276113 小时前
Flutter 框架跨平台鸿蒙开发 - 派对策划助手应用
flutter·华为·harmonyos
沙雕不是雕又菜又爱玩13 小时前
基于HarmonyOS的笔记管理应用
harmonyos
@不误正业14 小时前
AI Agent多轮对话管理:3大架构源码级实现与性能对比(附鸿蒙实战)
人工智能·架构·harmonyos
里欧跑得慢14 小时前
Flutter 组件 powersync_core 的适配 鸿蒙Harmony 实战 - 驾驭极致离线优先架构、实现鸿蒙端高性能 SQL 增量同步与数据安全治理方案
flutter·harmonyos·鸿蒙·openharmony·powersync_core
轻口味14 小时前
HarmonyOS 6 自定义人脸识别模型9:基于tflite的人脸识别模型转换
华为·harmonyos
芙莉莲教你写代码14 小时前
Flutter 框架跨平台鸿蒙开发 - 网络安全学习应用
学习·web安全·flutter·华为·harmonyos
互联网散修16 小时前
零基础鸿蒙应用开发第二十五节:接口的行为契约能力
华为·harmonyos
@不误正业16 小时前
AI Agent工具调用深度实战-从Function-Calling到鸿蒙设备控制全链路
人工智能·华为·harmonyos
云和数据.ChenGuang17 小时前
鸿蒙应用对接扣子智能体:从 0 到 1 落地 AI 智能体集成
人工智能·华为·harmonyos