OpenHarmony - ArkUI（ETS）自定义图片查看组件原创精华

中软HOS小鸿

发布于 2022-5-23 14:31

浏览

8收藏

已被收录在 2 个专栏，

前言

日常开发中，经常会遇到一些图片查看的需求，此时有的用户习惯放大图片来看，那么在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 - ArkUI（ETS）自定义图片查看组件-鸿蒙开发者社区

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/
1.

在命令行工具中，执行如下命令进行安装，如安装subsampling-scale-image-view三方库，依赖包会存储在工程的node_modules目录下@ohos\subsampling-scale-image-view下。

npm install @ohos/subsampling-scale-image-view --save
1.

在package.json中会自动添加如下依赖：

"dependencies": {
  "@ohos/subsampling-scale-image-view": "^1.0.0",
}
1.
2.
3.

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

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

1.
2.
3.
4.
5.
6.
7.
8.
9.

使用说明

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 })
...
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.

主要用到的接口

接口	描述
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)
1.
2.
3.

接口使用案例

//单击事件监听
this.model.setSingleTapListener({
    onSingleTapConfirmed(event: ClickEvent) {
    console.log("单击我了")
    }
})
// 长按事件监听
this.model.setLongPressListener({
      onLongPress(event: GestureEvent) {
        console.log("长按我了");
      }
})
// 双击事件监听
this.model.setDoubleTapListener({
      onDoubleTap(event: GestureEvent) {
        console.log("双击我了")
      }
})


1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.

轮播区域使用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)
    }
  }
}


1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.

点击旋转按钮，每次旋转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)
              })
1.
2.
3.
4.
5.
6.
7.
8.