关于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();

2.2设置图片源

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 <this.model.scaleMin) { this.model.scale = this.model.scaleMin } else { this.model.scale = currentScale;    } if (this.model.animate) { this.zoomTo(this.model.scale,this.model.mZoomDuration) } else { this.model.updateMatrix();// 通过此办法更新矩阵值 } } }) .onActionEnd((event) => { if (this.model.scale <this.model.scaleMin) { this.model.scale = this.model.scaleMin } 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) } })

调用UpdateMatrix( )办法

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 })}

Matrix已更新，此时给图片更新矩阵即可。

Image(this.model.src)      .alt(this.model.previewImage) .objectFit(this.model.imageFit) .transform(this.model.matrix) // 传递更新后的矩阵值 .interpolation(ImageInterpolation.Low)

demo源码及文件构造

下载地址https://gitee.com/openharmony...
文件目录构造如下

|---- PhotoView-ETS  |---- entry|     |---- pages  # 示例代码文件夹        |---- photoView |     |---- components  # 库文件夹|     |     |---- PhotoView.ets  #自定义组件                 |     |     |---- RectF.ets  # 区域坐标点数据封装|     |---- README.md  # 装置应用办法

类构造

相干办法

结语

通过本篇文章介绍，您对OpenHarmony  PhotoView组件应该有了初步的理解。咱们所有的源码和领导文档都曾经开源，如果您对本篇文章内容以及所实现的Demo感兴趣，能够依据本篇文章介绍自行下载OpenHarmony PhotoView源码进行钻研和应用。同时也欢送更多开发者与咱们共享开发成绩，分享技术解读与教训心得。（OpenHarmony PhotoView源码下载链接https://gitee.com/openharmony...）