OpenHarmony PhotoView組件的介紹

PhotoView是OpenAtom OpenHarmony（簡稱“OpenHarmony”）系統的一款圖片縮放及瀏覽的三方組件，用于聲明式應用開發，支持圖片縮放、平移、旋轉等功能。

使用場景

PhotoView為廣大OpenHarmony應用開發者在處理圖片時，提供了很大的便利。當開發者需要對圖片進行瀏覽、查看等處理時，只需要導入PhotoView三方組件，然后調用相關的接口就能實現效果，例如基于大禹200開發板開發的圖庫應用，就使用到了PhotoView三方庫去處理圖片。

效果展示

開發環境

安裝IDE：支持DevEco Studio 3.0 Beta3(Build Version 3.0.0.901)及以上版本。

安裝SDK：支持OpenHarmony API version 9及以上版本

如何使用

1.下載PhotoView組件，在page頁面導入

npm install @ohos/photoview --save;import {PhotoView} from '@ohos/photoview';

2.生成Photo View

2.1創建model對象

@State data: PhotoView.Model = newPhotoView.Model();

aboutToAppear() {this.data.setImageResource($rawfile('wallpaper.jpg')).setScale(1, false).setImageFit(ImageFit.Contain).setOnPhotoTapListener({onPhotoTap(x:number,y:number){}})}

3.使用示例：

平移、縮放、旋轉核心思想都是通過手勢觸發，然后獲取圖片變換前后的偏移量，最后更新圖片的矩陣Matrix實現效果。

這里以平移為例說明：

PinchGesture() // 平移手勢接口 .onActionStart((event) => {   console.log('photo PinchGesture start:' +this.model.animate) }) .onActionUpdate((event) => { console.info("photo pin:" +JSON.stringify(event)) if (this.model.isZoom) { var currentScale: number =this.model.scale + event.scale - 1; console.log('photo PinchGesture update:'+ currentScale) if (currentScale >this.model.scaleMax) { this.model.scale = this.model.scaleMax } else if (currentScale  { if (this.model.scale this.model.scaleMax) { this.model.scale = this.model.scaleMax } this.model.isZooming = (this.model.scale> 1) if (this.model.matrixChangedListener !=null) {this.model.matrixChangedListener.onMatrixChanged(this.model.rect) } if (this.model.scaleChangeListener != null){this.model.scaleChangeListener.onScaleChange(this.model.scale, 0, 0) } })

public updateMatrix():void { this.rect.left = this.componentWidth / 2 -(this.componentWidth * this.scale) / 2 + this.offsetX; this.rect.right = this.componentWidth / 2 +(this.componentWidth * this.scale) / 2 + this.offsetX; this.rect.top = this.componentHeight / 2 -(this.sHeight / 2) * this.scale + this.offsetY; this.rect.bottom = this.componentHeight / 2 +(this.sHeight / 2) * this.scale + this.offsetY; this.matrix = Matrix4.identity() .rotate({ x: 0, y: 0, z: 1, angle:this.rotateAngle }) .translate({ x: this.offsetX, y:this.offsetY }) .scale({ x: this.scale, y: this.scale,centerX: this.centerX, centerY: this.centerY })}

Image(this.model.src)      .alt(this.model.previewImage) .objectFit(this.model.imageFit) .transform(this.model.matrix) // 傳遞更新后的矩陣值 .interpolation(ImageInterpolation.Low)

demo源碼及文件結構

下載地址 https://gitee.com/openharmony-sig/PhotoView-ETS

文件目錄結構如下

|---- PhotoView-ETS  |---- entry|     |---- pages  # 示例代碼文件夾        |---- photoView |     |---- components  # 庫文件夾|     |     |---- PhotoView.ets  #自定義組件                 |     |     |---- RectF.ets  # 區域坐標點數據封裝|     |---- README.md  # 安裝使用方法

類結構

相關方法

結語

通過本篇文章介紹，您對OpenHarmony PhotoView組件應該有了初步的了解。我們所有的源碼和指導文檔都已經開源，如果您對本篇文章內容以及所實現的Demo感興趣，可以根據本篇文章介紹自行下載OpenHarmony PhotoView源碼進行研究和使用。同時也歡迎更多開發者與我們共享開發成果，分享技術解讀與經驗心得。