本文主要是介绍ArkUI(ETS)openHarmony 自定义图片查看组件,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
前言
日常开发中,经常会遇到一些图片查看的需求,此时有的用户习惯放大图片来看,那么在ets中如何实现呢?今日分享的组件由subsampling-scale-image-view+swiper来实现深度缩放视图、图像显示、手势平移缩放双击等。
项目说明
本组件界面搭建基于ArkUI中TS扩展的声明式开发范式,官网官方文档地址:基于TS扩展的声明式开发范式1、基于TS扩展的声明式开发范式2
工具版本:DevEco Studio 3.0 Beta2 SDK版本:3.0.0.1(API Version 7 Beta2)
主要功能
- 双击放大图片
- 如果图片已经是放大状态,双击恢复原图大小
- 点击下方缩略图列表,可查看对应图片
- 可旋转查看图片,每次旋转90度
- 点击箭头可查看上一组缩略视图和下一组缩略视图
效果展示
OpenHarmony npm包
OpenHarmony js/ts三方库使用的是OpenHarmony npm包,它是在传统的npm包的基础上,定义了OpenHarmony npm共享包特定的工程结构和配置文件,支持OpenHarmony页面组件相关API、资源的调用。通过OpenHarmony npm包,您可以实现多个模块或者多个工程共享OpenHarmony页面、资源等相关代码。
OpenHarmony npm共享包的实现依赖于npm,因此您需要了解和掌握npm的基础功能和机制,可通过npm官方文档进行了解
如何安装OpenHarmony npm包
设置 OpenHarmony推荐的npm专用仓库(如果使用DevEco Studio 3.0 Beta3及以上版本的命令行窗口,则可忽略此步骤)
npm config set @ohos:registry=https://repo.harmonyos.com/npm/
在命令行工具中,执行如下命令进行安装,如安装subsampling-scale-image-view三方库,依赖包会存储在工程的node_modules目录下@ohos\subsampling-scale-image-view下。
npm install @ohos/subsampling-scale-image-view --save
在package.json中会自动添加如下依赖:
"dependencies": {"@ohos/subsampling-scale-image-view": "^1.0.0",
}
使用说明
import {SubsamplingScaleImageView} from '@ohos/subsampling-scale-image-view';
...
//创建model对象
@State model: SubsamplingScaleImageView.Model = new SubsamplingScaleImageView.Model()//设置图片源private aboutToAppear() {this.model.setImage($r("app.media.apple"));}
...
//使用SubsamplingScaleImageView组件
SubsamplingScaleImageView({ model: this.model })
...
主要用到的接口
接口 | 描述 |
---|---|
setZoomEnabled(zoomEnabled: boolean) | 设置图片是否可缩放 |
public setPanEnabled(panEnabled: boolean) | 设置图片是否可平移 |
public setMaxScale(maxScale: number) | 设置图片最大缩放比 |
public setOrientation(degrees: number) | 设置图片旋转角度 |
public getSWidth() | 获取图片高度 |
public getSHeight() | 获取图片高度 |
public setSingleTapListener(listener: OnSingleTapListener) | 单击图片监听器 |
public setLongPressListener(listener: OnLongPressListener) | 长按图片监听器 |
public setDoubleTapListener(listener: OnDoubleTapListener) | 双击图片监听器 |
设置图片资源
public setImage(src: string | PixelMap | Resource)
public setImage(src: string | PixelMap | Resource, previewSource: string | Resource)
public setImage(src: string | PixelMap | Resource, state: ImageViewState)
接口使用案例
//单击事件监听
this.model.setSingleTapListener({onSingleTapConfirmed(event: ClickEvent) {console.log("单击我了")}
})
// 长按事件监听
this.model.setLongPressListener({onLongPress(event: GestureEvent) {console.log("长按我了");}
})
// 双击事件监听
this.model.setDoubleTapListener({onDoubleTap(event: GestureEvent) {console.log("双击我了")}
})
轮播区域使用Stack布局
/**
* Stack堆叠容器,子组件按照顺序依次入栈,后一个子组件覆盖前一个子组件。
*/build() {Stack({ alignContent: Alignment.Bottom }) {SubsamplingScaleImageView({ model: this.model })Column({ space: 5 }) {Swiper(this.swiperController) {Row({ space: 5 }) {Image($r('app.media.previous')).width(30).height(30).margin({ top: 6 ,left:10}).onClick((event: ClickEvent) => {this.index = 2;this.model.setImage($r('app.media.cake'));})}.width('100%').height(60).backgroundColor(0x3d3d3d)...
}.index(this.index).autoPlay(false).indicator(false) // 默认开启指示点.loop(true) // 默认开启循环播放.duration(50).vertical(false) // 默认横向切换.itemSpace(0).onChange((index: number) => {console.log('当前下标'+index)...})}.height(60).backgroundColor(0x3d3d3d).align(Alignment.Bottom)}}
}
点击旋转按钮,每次旋转90度
Image($r('app.media.rotate')).width(30).height(30).margin({ top: 6 ,left:70,right:2}).onClick((event: ClickEvent) => {this.rotate +=90;this.model.setOrientation(this.rotate)})
subsampling-scale-image-view组件目录结构
|---- subsampling-scale-image-view |---- src| |---- main | |------- ets | | |---- components # 库文件夹 | | | |---- SubsamplingScaleImageView.ets # 自定义组件 | | | |---- ImageViewState.ets # 组件状态数据封装类
总结
此组件主要实现深度缩放视图、图像显示、手势平移缩放双击等。
- subsampling-scale-image-view:深度缩放视图、图像显示、手势平移缩放双。
- swiper图片轮播。
- setOrientation设置旋转角度。
为了能让大家更好的学习鸿蒙(HarmonyOS NEXT)开发技术,这边特意整理了《鸿蒙开发学习手册》(共计890页),希望对大家有所帮助:https://qr21.cn/FV7h05
《鸿蒙开发学习手册》:
如何快速入门:https://qr21.cn/FV7h05
- 基本概念
- 构建第一个ArkTS应用
- ……
开发基础知识:https://qr21.cn/FV7h05
- 应用基础知识
- 配置文件
- 应用数据管理
- 应用安全管理
- 应用隐私保护
- 三方应用调用管控机制
- 资源分类与访问
- 学习ArkTS语言
- ……
基于ArkTS 开发:https://qr21.cn/FV7h05
- Ability开发
- UI开发
- 公共事件与通知
- 窗口管理
- 媒体
- 安全
- 网络与链接
- 电话服务
- 数据管理
- 后台任务(Background Task)管理
- 设备管理
- 设备使用信息统计
- DFX
- 国际化开发
- 折叠屏系列
- ……
鸿蒙开发面试真题(含参考答案):https://qr18.cn/F781PH
鸿蒙开发面试大盘集篇(共计319页):https://qr18.cn/F781PH
1.项目开发必备面试题
2.性能优化方向
3.架构方向
4.鸿蒙开发系统底层方向
5.鸿蒙音视频开发方向
6.鸿蒙车载开发方向
7.鸿蒙南向开发方向
这篇关于ArkUI(ETS)openHarmony 自定义图片查看组件的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!