OpenHarmony 图片缩放浏览组件—PhotoView

简介

图片缩放浏览组件，图片可缩放，平移，旋转

旋转/缩放/平移

下载安装

代码语言：shell复制

ohpm  install @ohos/photoview

OpenHarmony ohpm环境配置等更多内容，请参考 如何安装OpenHarmony ohpm包 。

使用说明

生成 PhotoView

代码语言：ts复制

import {PhotoView} from '@ohos/photoview';
...
//创建model对象
 @State data: PhotoView.Model = new PhotoView.Model();

//设置图片源
aboutToAppear() {
this.data
.setImageResource($rawfile('wallpaper.jpg'))
.setScale(1, false)
.setImageFit(ImageFit.Contain)
.setOnPhotoTapListener({
onPhotoTap(x:number,y:number){
}
})
}
...
//使用PhotoView
PhotoView({model: this.data})

接口说明

1. 设置图片资源

代码语言：ts复制

public setImageResource(src:Resource)
public setImageURI(src: string)
public setImageElement(src: PixelMap)

1. 设置图片是否可缩放

代码语言：ts复制

public setZoomable(zoomable: boolean)

1. 设置旋转角度

代码语言：ts复制

public setRotationTo(rotationDegree: number)
public setRotationBy(rotationDegree: number)

1. 设置图片最大缩放比

代码语言：ts复制

public setMaximumScale(maximumScale: number)

1. 设置图片最小缩放比

代码语言：ts复制

public setMinimumScale(minimumScale: number)

1. 设置中间缩放比

代码语言：ts复制

public setMediumScale(mediumScale: number)

1. 获取当前缩放比

代码语言：ts复制

public getScale(): number

1. 单击监听器

代码语言：ts复制

public setOnClickListener(listener: OnClickListener)

1. 长按监听器

代码语言：ts复制

public setOnLongClickListener(listener: OnLongPressListener)

1. 双击监听器

代码语言：ts复制

public setOnDoubleTapListener(onDoubleTapListener: OnDoubleTapListener)  

1. matrix监听器

代码语言：ts复制

public setOnMatrixChangeListener(listener: OnMatrixChangedListener)

约束与限制

在下述版本验证通过：

• DevEco Studio 版本： 4.1 Canary(4.1.3.317)
• OpenHarmony SDK:API11 (4.1.0.36)

目录结构

代码语言：shell复制

|---- PhotoView
    |---- entry
    |     |---- pages  # 示例代码文件夹       
    |---- library 
    |     |---- components  # 库文件夹 
    |     |     |---- PhotoView.ets  # 自定义组件                  
    |     |     |---- RectF.ets  # 区域坐标点数据封装
    |     |---- README.md  # 安装使用方法

写在最后

如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：

• 点赞，转发，有你们的 『点赞和评论』，才是我创造的动力；
• 关注小编，同时可以期待后续文章ing
  移动开发 harmonyos openharmony 组件化openHarmony harmonyOS 组件化 移动开发
  0 人点赞