乐趣区

关于openharmony:PhotoView支持图片缩放平移旋转的一个优雅的三方组件

jiezi

简介

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 = new
PhotoView.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…）

退出移动版