一.前言

日常开发中，经常会遇到一些图片查看的需求，此时有的用户习惯放大图片来看，那么在 ets 中如何实现呢？今日分享的组件由 subsampling-scale-image-view+swiper 来实现深度缩放视图、图像显示、手势平移缩放双击等。

二.项目说明

项目说明本组件界面搭建基于 ArkUI 中 TS 扩展的声明式开发范式，ArkUI 学习地址：[https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkui-overview]

三. 主要功能

1.双击放大图片

2.如果图片已经是放大状态，双击恢复原图大小

3.点击下方缩略图列表，可查看对应图片

4.可旋转查看图片，每次旋转 90 度

5.点击箭头可查看上一组缩略视图和下一组缩略视图

四.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：深度缩放视图、图像显示、手势平移缩放双。swiper 图片轮播。setOrientation 设置旋转角度。