OpenHarmony 视图缩放组件—subsampling-scale-image-view

本文主要是介绍OpenHarmony 视图缩放组件—subsampling-scale-image-view，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

简介

深度缩放视图，图像显示，手势平移缩放双击等

效果图（旋转、缩放、平移）

下载安装

ohpm install @ohos/subsampling-scale-image-view

OpenHarmony ohpm 环境配置等更多内容，请参考如何安装 OpenHarmony ohpm 包

使用说明

生成SubsamplingScaleImageView

import {SubsamplingScaleImageView} from '@ohos/subsampling-scale-image-view';
...
//创建model对象
@State model: SubsamplingScaleImageView.Model  = new SubsamplingScaleImageView.Model()
...
build() {Stack({ alignContent: Alignment.Bottom }) {//使用SubsamplingScaleImageView组件SubsamplingScaleImageView({ model: this.model })Column({ space: 5 }) {Swiper(this.swiperController) {Row({ space: 5 }) {Text('This image is 7,800 x 6,240 pixels. On most devices it will be subsampled, and higher quality tiles are loaded as you zoom in.').width('100%').height(60).layoutWeight(1).fontColor(0xffffff).textAlign(TextAlign.Center).fontSize(16)Image($r('app.media.next')).width(30).height(30).margin({ top: 6, left: 10 }).onClick((event: ClickEvent) => {this.index = 1;})}.width('100%').height(60).backgroundColor(0x3d3d3d)Row({ space: 5 }) {Image($r('app.media.previous')).width(30).height(30).margin({ top: 6 }).onClick((event: ClickEvent) => {this.index = 0;})Text('This image has been rotated 90 degrees. Tap the button to rotate it. EXIF rotation is supported for external files.').width('100%').height(60).layoutWeight(1).fontColor(0xffffff).textAlign(TextAlign.Center).fontSize(16)Image($r('app.media.rotate')).width(30).height(30).margin({ top: 6, left: 10, right: 20 }).onClick((event: ClickEvent) => {this.mRotate += 90;this.model.setOrientation(this.mRotate)})}.width('100%').height(60).backgroundColor(0x3d3d3d)}.index(this.index).autoPlay(false).indicator(false) // 默认开启指示点.loop(false) // 默认开启循环播放.duration(50).vertical(false) // 默认横向切换.itemSpace(0).onChange((index: number) => {if (index == 1) {this.model.setImage($r('app.media.swissroad'));}})}.height(60).backgroundColor(0x3d3d3d).align(Alignment.Bottom)}
}
//设置图片源
aboutToAppear() {this.model.setImage($r('app.media.card'));
}
...

接口说明

设置图片资源

public setImage(src: string | PixelMap | Resource)
public setImage(src: string | PixelMap | Resource, previewSource: string | Resource)
public setImage(src: string | PixelMap | Resource, state: ImageViewState)

设置图片是否可缩放

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)

约束与限制

在下述版本验证通过：

DevEco Studio 版本： 4.1 Canary(4.1.3.317)
OpenHarmony SDK:API11 (4.1.0.36)

目录结构

|---- subsampling-scale-image-view |---- entry # 示例代码文件夹      |---- library  |     |---- src|          |---- main|                |---- ets          |                      |---- components  # 库文件夹               |                           |---- SubsamplingScaleImageView.ets  # 自定义组件|                           |---- ImageViewState.ets  # 组件状态数据封装类  |     |---- index.ets  # 对外接口              |     |---- README.md  # 安装使用方法

为了能让大家更好的学习鸿蒙（HarmonyOS NEXT）开发技术，这边特意整理了《鸿蒙开发学习手册》（共计890页），希望对大家有所帮助：https://qr21.cn/FV7h05