前言
日常开发中，经常会遇到一些图片查看的需求，此时有的用户习惯放大图片来看，那么在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目录下@ohossubsampling-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 # 组件状态数据封装类
阅读全文
下载说明：
1、本站所有资源均从互联网上收集整理而来，仅供学习交流之用，因此不包含技术服务请大家谅解！
2、本站不提供任何实质性的付费和支付资源，所有需要积分下载的资源均为网站运营赞助费用或者线下劳务费用！
3、本站所有资源仅用于学习及研究使用，您必须在下载后的24小时内删除所下载资源，切勿用于商业用途，否则由此引发的法律纠纷及连带责任本站和发布者概不承担！
4、本站站内提供的所有可下载资源，本站保证未做任何负面改动（不包含修复bug和完善功能等正面优化或二次开发），但本站不保证资源的准确性、安全性和完整性，用户下载后自行斟酌，我们以交流学习为目的，并不是所有的源码都100%无错或无bug！如有链接无法下载、失效或广告，请联系客服处理！
5、本站资源除标明原创外均来自网络整理，版权归原作者或本站特约原创作者所有，如侵犯到您的合法权益，请立即告知本站，本站将及时予与删除并致以最深的歉意！
6、如果您也有好的资源或教程，您可以投稿发布，成功分享后有站币奖励和额外收入！
7、如果您喜欢该资源，请支持官方正版资源，以得到更好的正版服务！
8、请您认真阅读上述内容，注册本站用户或下载本站资源即您同意上述内容！
原文链接：https://www.1024c.cn/archives/21527，转载请注明出处。
1、本站所有资源均从互联网上收集整理而来，仅供学习交流之用，因此不包含技术服务请大家谅解！
2、本站不提供任何实质性的付费和支付资源，所有需要积分下载的资源均为网站运营赞助费用或者线下劳务费用！
3、本站所有资源仅用于学习及研究使用，您必须在下载后的24小时内删除所下载资源，切勿用于商业用途，否则由此引发的法律纠纷及连带责任本站和发布者概不承担！
4、本站站内提供的所有可下载资源，本站保证未做任何负面改动（不包含修复bug和完善功能等正面优化或二次开发），但本站不保证资源的准确性、安全性和完整性，用户下载后自行斟酌，我们以交流学习为目的，并不是所有的源码都100%无错或无bug！如有链接无法下载、失效或广告，请联系客服处理！
5、本站资源除标明原创外均来自网络整理，版权归原作者或本站特约原创作者所有，如侵犯到您的合法权益，请立即告知本站，本站将及时予与删除并致以最深的歉意！
6、如果您也有好的资源或教程，您可以投稿发布，成功分享后有站币奖励和额外收入！
7、如果您喜欢该资源，请支持官方正版资源，以得到更好的正版服务！
8、请您认真阅读上述内容，注册本站用户或下载本站资源即您同意上述内容！
原文链接：https://www.1024c.cn/archives/21527，转载请注明出处。
评论0