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 { 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-sig/photoview-ets
文件目录结构如下
|---- photoview-ets |---- entry| |---- pages # 示例代码文件夹 |---- photoview | |---- components # 库文件夹| | |---- photoview.ets #自定义组件 | | |---- rectf.ets # 区域坐标点数据封装| |---- readme.md # 安装使用方法
类结构
相关方法
结语
通过本篇文章介绍，您对openharmony photoview组件应该有了初步的了解。我们所有的源码和指导文档都已经开源，如果您对本篇文章内容以及所实现的demo感兴趣，可以根据本篇文章介绍自行下载openharmony photoview源码进行研究和使用。同时也欢迎更多开发者与我们共享开发成果，分享技术解读与经验心得。
什么是时钟电路 时钟电路的原理和作用
实体按键和触摸屏幕你更喜欢哪个
小米6最新消息：小米6充电重启断流问题频发，雷军未回应想必也很迷茫！
SOVD协议在HPC中的应用详解
PCB如何快速批量的进行丝印调整
OpenHarmony PhotoView组件的介绍
NTP网络时间服务器助力电子政务系统
全桥驱动器UBA2030T及其应用
第四次工业革命专注于工业物联网，AR能做什么
单片机想入门应该怎么学？请记住以下几点
数据通信的结构原理_数据通信传输方式
涡旋式压缩机的结构_涡旋式压缩机的特点
几款常见的PLC设备
一种基于前馈控制的平均电流控制方案
2023年半导体设备国产化成绩单：亮点与期待
航空定位导航设备超高导热11W导热垫介绍
三大运营商的5G用户争夺战正愈演愈烈
2020下半年VR/AR领域重要融资事件汇总
OPPO Reno3系列拒绝板砖机，轻薄机身真的不难
电源芯片SF1538DP动态调整率好精度高
使用场景
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 { 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-sig/photoview-ets
文件目录结构如下
|---- photoview-ets |---- entry| |---- pages # 示例代码文件夹 |---- photoview | |---- components # 库文件夹| | |---- photoview.ets #自定义组件 | | |---- rectf.ets # 区域坐标点数据封装| |---- readme.md # 安装使用方法
类结构
相关方法
结语
通过本篇文章介绍，您对openharmony photoview组件应该有了初步的了解。我们所有的源码和指导文档都已经开源，如果您对本篇文章内容以及所实现的demo感兴趣，可以根据本篇文章介绍自行下载openharmony photoview源码进行研究和使用。同时也欢迎更多开发者与我们共享开发成果，分享技术解读与经验心得。
什么是时钟电路 时钟电路的原理和作用
实体按键和触摸屏幕你更喜欢哪个
小米6最新消息：小米6充电重启断流问题频发，雷军未回应想必也很迷茫！
SOVD协议在HPC中的应用详解
PCB如何快速批量的进行丝印调整
OpenHarmony PhotoView组件的介绍
NTP网络时间服务器助力电子政务系统
全桥驱动器UBA2030T及其应用
第四次工业革命专注于工业物联网，AR能做什么
单片机想入门应该怎么学？请记住以下几点
数据通信的结构原理_数据通信传输方式
涡旋式压缩机的结构_涡旋式压缩机的特点
几款常见的PLC设备
一种基于前馈控制的平均电流控制方案
2023年半导体设备国产化成绩单：亮点与期待
航空定位导航设备超高导热11W导热垫介绍
三大运营商的5G用户争夺战正愈演愈烈
2020下半年VR/AR领域重要融资事件汇总
OPPO Reno3系列拒绝板砖机，轻薄机身真的不难
电源芯片SF1538DP动态调整率好精度高