深度缩放视图,图像显示,手势平移缩放双击等
ohpm install @ohos/subsampling-scale-image-view
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)
在下述版本验证通过:
|---- subsampling-scale-image-view
|---- entry # 示例代码文件夹
|---- library
| |---- src
| |---- main
| |---- ets
| |---- components # 库文件夹
| |---- SubsamplingScaleImageView.ets # 自定义组件
| |---- ImageViewState.ets # 组件状态数据封装类
| |---- index.ets # 对外接口
| |---- README.md # 安装使用方法
如果你觉得这篇内容对你还蛮有帮助,我想邀请你帮我三个小忙:
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。