ArkUI(ETS)openHarmony 自定义图片查看组件

2024-03-21 18:12

本文主要是介绍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

  1. 基本概念
  2. 构建第一个ArkTS应用
  3. ……

开发基础知识:https://qr21.cn/FV7h05

  1. 应用基础知识
  2. 配置文件
  3. 应用数据管理
  4. 应用安全管理
  5. 应用隐私保护
  6. 三方应用调用管控机制
  7. 资源分类与访问
  8. 学习ArkTS语言
  9. ……

基于ArkTS 开发:https://qr21.cn/FV7h05

  1. Ability开发
  2. UI开发
  3. 公共事件与通知
  4. 窗口管理
  5. 媒体
  6. 安全
  7. 网络与链接
  8. 电话服务
  9. 数据管理
  10. 后台任务(Background Task)管理
  11. 设备管理
  12. 设备使用信息统计
  13. DFX
  14. 国际化开发
  15. 折叠屏系列
  16. ……

鸿蒙开发面试真题(含参考答案):https://qr18.cn/F781PH

鸿蒙开发面试大盘集篇(共计319页):https://qr18.cn/F781PH

1.项目开发必备面试题
2.性能优化方向
3.架构方向
4.鸿蒙开发系统底层方向
5.鸿蒙音视频开发方向
6.鸿蒙车载开发方向
7.鸿蒙南向开发方向

这篇关于ArkUI(ETS)openHarmony 自定义图片查看组件的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/833485

相关文章

Mysql实现范围分区表(新增、删除、重组、查看)

《Mysql实现范围分区表(新增、删除、重组、查看)》MySQL分区表的四种类型(范围、哈希、列表、键值),主要介绍了范围分区的创建、查询、添加、删除及重组织操作,具有一定的参考价值,感兴趣的可以了解... 目录一、mysql分区表分类二、范围分区(Range Partitioning1、新建分区表:2、分

Java实现自定义table宽高的示例代码

《Java实现自定义table宽高的示例代码》在桌面应用、管理系统乃至报表工具中,表格(JTable)作为最常用的数据展示组件,不仅承载对数据的增删改查,还需要配合布局与视觉需求,而JavaSwing... 目录一、项目背景详细介绍二、项目需求详细介绍三、相关技术详细介绍四、实现思路详细介绍五、完整实现代码

一文详解Java Stream的sorted自定义排序

《一文详解JavaStream的sorted自定义排序》Javastream中的sorted方法是用于对流中的元素进行排序的方法,它可以接受一个comparator参数,用于指定排序规则,sorte... 目录一、sorted 操作的基础原理二、自定义排序的实现方式1. Comparator 接口的 Lam

利用Python脚本实现批量将图片转换为WebP格式

《利用Python脚本实现批量将图片转换为WebP格式》Python语言的简洁语法和库支持使其成为图像处理的理想选择,本文将介绍如何利用Python实现批量将图片转换为WebP格式的脚本,WebP作为... 目录简介1. python在图像处理中的应用2. WebP格式的原理和优势2.1 WebP格式与传统

基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)

《基于HTML5Canvas实现图片旋转与下载功能(完整代码展示)》本文将深入剖析一段基于HTML5Canvas的代码,该代码实现了图片的旋转(90度和180度)以及旋转后图片的下载... 目录一、引言二、html 结构分析三、css 样式分析四、JavaScript 功能实现一、引言在 Web 开发中,

Python如何去除图片干扰代码示例

《Python如何去除图片干扰代码示例》图片降噪是一个广泛应用于图像处理的技术,可以提高图像质量和相关应用的效果,:本文主要介绍Python如何去除图片干扰的相关资料,文中通过代码介绍的非常详细,... 目录一、噪声去除1. 高斯噪声(像素值正态分布扰动)2. 椒盐噪声(随机黑白像素点)3. 复杂噪声(如伪

Python中图片与PDF识别文本(OCR)的全面指南

《Python中图片与PDF识别文本(OCR)的全面指南》在数据爆炸时代,80%的企业数据以非结构化形式存在,其中PDF和图像是最主要的载体,本文将深入探索Python中OCR技术如何将这些数字纸张转... 目录一、OCR技术核心原理二、python图像识别四大工具库1. Pytesseract - 经典O

Python实现精准提取 PDF中的文本,表格与图片

《Python实现精准提取PDF中的文本,表格与图片》在实际的系统开发中,处理PDF文件不仅限于读取整页文本,还有提取文档中的表格数据,图片或特定区域的内容,下面我们来看看如何使用Python实... 目录安装 python 库提取 PDF 文本内容:获取整页文本与指定区域内容获取页面上的所有文本内容获取

Windows的CMD窗口如何查看并杀死nginx进程

《Windows的CMD窗口如何查看并杀死nginx进程》:本文主要介绍Windows的CMD窗口如何查看并杀死nginx进程问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录Windows的CMD窗口查看并杀死nginx进程开启nginx查看nginx进程停止nginx服务

Python基于微信OCR引擎实现高效图片文字识别

《Python基于微信OCR引擎实现高效图片文字识别》这篇文章主要为大家详细介绍了一款基于微信OCR引擎的图片文字识别桌面应用开发全过程,可以实现从图片拖拽识别到文字提取,感兴趣的小伙伴可以跟随小编一... 目录一、项目概述1.1 开发背景1.2 技术选型1.3 核心优势二、功能详解2.1 核心功能模块2.