前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >OpenHarmony 图片缩放浏览组件—PhotoView

OpenHarmony 图片缩放浏览组件—PhotoView

原创
作者头像
小帅聊鸿蒙
修改2024-09-27 20:38:13
1220
修改2024-09-27 20:38:13
举报
文章被收录于专栏:鸿蒙开发笔记

简介

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

旋转/缩放/平移

下载安装

代码语言: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🚀,不定期分享原创知识;
  • 想要获取更多完整鸿蒙最新学习知识点,可关注B站:码牛课堂鸿蒙开发;

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 简介
  • 旋转/缩放/平移
  • 下载安装
  • 使用说明
    • 生成 PhotoView
    • 接口说明
    • 约束与限制
    • 目录结构
    • 写在最后
    领券
    问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档