社区编辑申请
注册/登录
OpenHarmony - ArkUI(ETS) 自定义图片查看组件
系统 OpenHarmony
今日分享的组件由subsampling-scale-image-view+swiper来实现深度缩放视图、图像显示、手势平移缩放双击等。

​想了解更多关于开源的内容,请访问:​

​51CTO 开源基础软件社区​

​https://ost.51cto.com​

前言

日常开发中,经常会遇到一些图片查看的需求,此时有的用户习惯放大图片来看,那么在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",
}

subsampling-scale-image-view组件目录结构。

|---- subsampling-scale-image-view 
|---- src
| |---- main
| |------- ets
| | |---- components # 库文件夹
| | | |---- SubsamplingScaleImageView.ets # 自定义组件
| | | |---- ImageViewState.ets # 组件状态数据封装类

使用说明

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 })
...

主要用到的接口

设置图片资源

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)
})

项目源码

https://gitee.com/YiRanRuMeng/open-harmony-image-view/tree/master。

总结

此组件主要实现深度缩放视图、图像显示、手势平移缩放双击等。

  • subsampling-scale-image-view:深度缩放视图、图像显示、手势平移缩放双。
  • swiper图片轮播。
  • setOrientation设置旋转角度。

​想了解更多关于开源的内容,请访问:​

​51CTO 开源基础软件社区​

​https://ost.51cto.com​​。

责任编辑:jianghua 来源: 鸿蒙社区
相关推荐

2022-03-21 15:19:27

鸿蒙UI组件ets自定义

2022-05-24 15:06:57

AbilityeTS FA鸿蒙

2022-01-25 17:05:44

2022-06-07 10:33:29

Camera组件鸿蒙

2022-04-07 14:17:15

Harmonytoast组件鸿蒙

2022-04-02 20:45:04

Hi3516开发板操作系统鸿蒙

2022-05-11 15:08:52

驱动开发系统移植

2022-01-07 09:56:16

2022-04-06 11:27:05

harmonyeTS 开发NAPI开发

2022-04-15 14:31:02

鸿蒙操作系统

2022-03-07 15:22:16

classHarmony鸿蒙

2022-04-18 10:37:01

鸿蒙操作系统开发工具

2022-06-09 14:40:14

系统移植鸿蒙

2022-04-20 20:28:40

HDF 驱动框架鸿蒙操作系统

2022-05-24 15:55:37

避障小车华为

2022-06-13 14:18:39

电源管理子系统耗电量服务

2022-06-06 10:55:51

本地服务鸿蒙

2022-06-15 11:51:14

Vue3开发避坑

2022-04-07 15:28:16

HarmonyOS鸿蒙操作系统

2022-06-15 16:16:21

分布式数据库鸿蒙

同话题下的热门内容

OHOS构建自定义服务实战基于OpenHarmony3.1的购物车应用的实现啃论文俱乐部—数据密集型应用内存压缩HarmonyOS - 方舟开发框架ArkUI 流光按钮效果华为智慧屏分布式语音音乐软件,可见即可说OpenHarmony3.1-Ace-Formcomponent源码解析HarmonyOS Canvas 实现时钟HarmonyOS门锁品类的临时密码、照片编解码工具技术

编辑推荐

HarmonyOS 2.0鸿蒙第二期开发者Beta公测申请指南HarmonyOS LYEVK-3861开发板播放《蜜雪冰城》鸿蒙HarmonyOS分布式软总线:构建低时延、高带宽的多设备虚拟网络华为HarmonyOS的强势突围: 直面物联网迷宫的蓄力进击鸿蒙HarmonyOS2.0发布会现场回忆录
我收藏的内容
点赞
收藏

51CTO技术栈公众号