OpenHarmony - ArkUI（ETS） 自定義圖片查看組件
??想了解更多關(guān)于開源的內(nèi)容，請訪問：??
前言
日常開發(fā)中，經(jīng)常會遇到一些圖片查看的需求，此時有的用戶習(xí)慣放大圖片來看，那么在ets中如何實現(xiàn)呢?今日分享的組件由subsampling-scale-image-view+swiper來實現(xiàn)深度縮放視圖、圖像顯示、手勢平移縮放雙擊等。
項目說明
本組件界面搭建基于ArkUI中TS擴展的聲明式開發(fā)范式，官網(wǎng)官方文檔地址：??基于TS擴展的聲明式開發(fā)范式1??、??基于TS擴展的聲明式開發(fā)范式2??。
- 工具版本：DevEco Studio 3.0 Beta2。
- SDK版本：3.0.0.1(API Version 7 Beta2)。
主要功能
- 雙擊放大圖片。
- 如果圖片已經(jīng)是放大狀態(tài)，雙擊恢復(fù)原圖大小。
- 點擊下方縮略圖列表，可查看對應(yīng)圖片。
- 可旋轉(zhuǎn)查看圖片，每次旋轉(zhuǎn)90度。
- 點擊箭頭可查看上一組縮略視圖和下一組縮略視圖。
效果展示
OpenHarmony npm包
OpenHarmony js/ts三方庫使用的是OpenHarmony npm包，它是在傳統(tǒng)的npm包的基礎(chǔ)上，定義了OpenHarmony npm共享包特定的工程結(jié)構(gòu)和配置文件，支持OpenHarmony頁面組件相關(guān)API、資源的調(diào)用。通過OpenHarmony npm包，您可以實現(xiàn)多個模塊或者多個工程共享OpenHarmony頁面、資源等相關(guān)代碼。
OpenHarmony npm共享包的實現(xiàn)依賴于npm，因此您需要了解和掌握npm的基礎(chǔ)功能和機制，可通過npm官方文檔進行了解。
如何安裝OpenHarmony npm包
設(shè)置 OpenHarmony推薦的npm專用倉庫(如果使用DevEco Studio 3.0 Beta3及以上版本的命令行窗口，則可忽略此步驟)。
npm config set @ohos:registry=https://repo.harmonyos.com/npm/
在命令行工具中，執(zhí)行如下命令進行安裝，如安裝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",
}
subsampling-scale-image-view組件目錄結(jié)構(gòu)。
|---- subsampling-scale-image-view
|---- src
| |---- main
| |------- ets
| | |---- components # 庫文件夾
| | | |---- SubsamplingScaleImageView.ets # 自定義組件
| | | |---- ImageViewState.ets # 組件狀態(tài)數(shù)據(jù)封裝類
使用說明
import {SubsamplingScaleImageView} from '@ohos/subsampling-scale-image-view';
//創(chuàng)建model對象
@State model: SubsamplingScaleImageView.Model = new SubsamplingScaleImageView.Model()
//設(shè)置圖片源
private aboutToAppear() {
this.model.setImage($r("app.media.apple"));
}
//使用SubsamplingScaleImageView組件
SubsamplingScaleImageView({ model: this.model })
主要用到的接口
設(shè)置圖片資源
public setImage(src: string | PixelMap | Resource)
public setImage(src: string | PixelMap | Resource, previewSource: string | Resource)
public setImage(src: string | PixelMap | Resource, state: ImageViewState)
接口使用案例
//單擊事件監(jiān)聽
this.model.setSingleTapListener({
onSingleTapConfirmed(event: ClickEvent) {
console.log("單擊我了")
}
})
// 長按事件監(jiān)聽
this.model.setLongPressListener({
onLongPress(event: GestureEvent) {
console.log("長按我了");
}
})
// 雙擊事件監(jiān)聽
this.model.setDoubleTapListener({
onDoubleTap(event: GestureEvent) {
console.log("雙擊我了")
}
})
輪播區(qū)域使用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) // 默認(rèn)開啟指示點
.loop(true) // 默認(rèn)開啟循環(huán)播放
.duration(50)
.vertical(false) // 默認(rèn)橫向切換
.itemSpace(0)
.onChange((index: number) => {
console.log('當(dāng)前下標(biāo)'+index)
})
}.height(60).backgroundColor(0x3d3d3d).align(Alignment.Bottom)
}
}
點擊旋轉(zhuǎn)按鈕，每次旋轉(zhuǎn)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)
})
項目源碼
https://gitee.com/YiRanRuMeng/open-harmony-image-view/tree/master。
總結(jié)
此組件主要實現(xiàn)深度縮放視圖、圖像顯示、手勢平移縮放雙擊等。
- subsampling-scale-image-view：深度縮放視圖、圖像顯示、手勢平移縮放雙。
- swiper圖片輪播。
- setOrientation設(shè)置旋轉(zhuǎn)角度。
