前言

日常开发中，经常会遇到一些图片查看的需求，此时有的用户习惯放大图片来看，那么在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）开发学习指南需要的可以扫码免费领取！！！

《鸿蒙（HarmonyOS）开发学习指南》

第一章 快速入门

1、开发准备

2、构建第一个ArkTS应用（Stage模型）

3、构建第一个ArkTS应用（FA模型）

4、构建第一个JS应用（FA模型）

5、…

第二章 开发基础知识

1、应用程序包基础知识

2、应用配置文件（Stage模型）

3、应用配置文件概述（FA模型）

4、…

第三章 资源分类与访问

1、 资源分类与访问

2、 创建资源目录和资源文件

3、 资源访问

4、…

第四章 学习ArkTs语言

1、初识ArkTS语言

2、基本语法

3、状态管理

4、其他状态管理

5、渲染控制

6、…

第五章 UI开发

1.方舟开发框架（ArkUI）概述

2.基于ArkTS声明式开发范式

3.兼容JS的类Web开发范式

4…

第六章 Web开发

1.Web组件概述

2.使用Web组件加载页面

3.设置基本属性和事件

4.在应用中使用前端页面JavaScript

5.ArkTS语言基础类库概述

6.并发

7…

11.网络与连接

12.电话服务

13.数据管理

14.文件管理

15.后台任务管理

16.设备管理

17…

第七章 应用模型

1.应用模型概述

2.Stage模型开发指导

3.FA模型开发指导

4…