简介
深度缩放视图，图像显示，手势平移缩放双击等
效果图（旋转、缩放、平移）
下载安装
ohpm install @ohos/subsampling-scale-image-view
使用说明
生成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)
2. 设置图片是否可缩放
setZoomEnabled(zoomEnabled: boolean)
DD一下：欢迎大家关注工粽号<程序猿百晓生>，可以了解到以下知识点。
`欢迎大家关注工粽号<程序猿百晓生>，可以了解到以下知识点。`
1.OpenHarmony开发基础
2.OpenHarmony北向开发环境搭建
3.鸿蒙南向开发环境的搭建
4.鸿蒙生态应用开发白皮书V2.0 & V3.0
5.鸿蒙开发面试真题（含参考答案）
6.TypeScript入门学习手册
7.OpenHarmony 经典面试题(含参考答案)
8.OpenHarmony设备开发入门【最新版】
9.沉浸式剖析OpenHarmony源代码
10.系统定制指南
11.【OpenHarmony】Uboot 驱动加载流程
12.OpenHarmony构建系统--GN与子系统、部件、模块详解
13.ohos开机init启动流程
14.鸿蒙版性能优化指南
.......
- 设置图片是否可平移
public setPanEnabled(panEnabled: boolean)
4. 设置图片最大缩放比例
public setMaxScale(maxScale: number)
5. 设置图片旋转角度
public setOrientation(degrees: number)
6. 获取图片高宽
public getSWidth()
public getSHeight()
7. 单击监听器
public setSingleTapListener(listener: OnSingleTapListener)
8. 长按监听器
public setLongPressListener(listener: OnLongPressListener)
9. 双击监听器
public setDoubleTapListener(listener: OnDoubleTapListener)
约束与限制
在下述版本验证通过：
- DevEco Studio: NEXT Beta1-5.0.3.806,SDK:API12 Release(5.0.0.66)
- DevEco Studio NEXT Developer Beta3: 5.0(5.0.3.530)
- SDK: API12 (5.0.0.35(SP3))
目录结构
|---- subsampling-scale-image-view
|---- entry # 示例代码文件夹
|---- library
| |---- src
| |---- main
| |---- ets
| |---- components # 库文件夹
| |---- SubsamplingScaleImageView.ets # 自定义组件
| |---- ImageViewState.ets # 组件状态数据封装类
| |---- index.ets # 对外接口
| |---- README_zh.md # 安装使用方法
