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对象

aboutToAppear() {
this.data
.setImageResource($rawfile('wallpaper.jpg'))
.setScale(1, false)
.setImageFit(ImageFit.Contain)
.setOnPhotoTapListener({
onPhotoTap(x:number,y:number){
}
})
}

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源码及文件结构

文件目录结构如下

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

类结构

相关方法

结语

通过本篇文章介绍,您对OpenHarmony PhotoView组件应该有了初步的了解。我们所有的源码和指导文档都已经开源,如果您对本篇文章内容以及所实现的Demo感兴趣,可以根据本篇文章介绍自行下载OpenHarmony PhotoView源码进行研究和使用。同时也欢迎更多开发者与我们共享开发成果,分享技术解读与经验心得。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/pingmian/17711.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Git | 用一个简单的例子来说明 git fetch 的作用

如是我闻&#xff1a; git fetch的作用是从远程仓库获取最新的更改&#xff0c;但不合并到本地分支。这事第一次听起来真挺奇怪的&#xff0c;为什么不直接 git pull呢&#xff1f;让我们尝试用一个简单的例子来看看 git fetch 的作用。 场景&#xff1a;玩具盒和玩具店 背景…

材料物理 笔记-9

原内容请参考哈尔滨工业大学何飞教授&#xff1a;https://www.bilibili.com/video/BV18b4y1Y7wd/?p12&spm_id_frompageDriver&vd_source61654d4a6e8d7941436149dd99026962 或《材料物理性能及其在材料研究中的应用》&#xff08;哈尔滨工业大学出版社&#xff09; ——…

lvm概述和配额

lvm概述和配额 文章目录 lvm概述和配额LVM概述1、逻辑卷的作用&#xff1a;2、lvm主要命令和实操磁盘配额创建data目录&#xff0c;进入data目录限制创建文件数 LVM概述 逻辑卷管理liunx系统下对硬盘分区的一种管理机制 lvm机制特别适合管理大储存设备&#xff0c;可以动态的…

linux系统——bg命令,linux运行的级别

在linux中可以使用bg命令&#xff0c;将进程任务置于后台执行 在这里&#xff0c;使用ping www.baidu.com命令后再使用ctrlz&#xff0c;可以将命令先暂停并保留在后台&#xff0c;jobs可以对任务进行查看 使用runlevel可以查看系统当前的运行级别

python练习题-反转一个只有三位数的整数

【问题描述】&#xff1a;反转一个只有三位数的整数 [示例]&#xff1a;123 321 完整代码如下&#xff1a; nint(input()) if n<100 or n>999: print("请输入三位数&#xff01;") else: gen%10 shin//10%10 bain//100 m100*ge10*shibai…

大数据框架总结(全)

☔️ 大数据框架总结&#xff08;全&#xff09; 关注“大数据领航员”&#xff0c;在公众号号中回复关键字【大数据面试资料】&#xff0c;即可可获取2024最新大数据面试资料的pdf文件 一. Hadoop HDFS读流程和写流程 HDFS写数据流程 &#xff08;1&#xff09;客户端通过…

JavaWeb笔记整理+图解——服务器渲染技术之EL表达式与JSTL

上一篇我们讲解了什么是服务器渲染技术和jsp&#xff0c;今天我来整理一下EL表达式和JSTL的笔记与图解&#xff0c;让我们的jsp页面更加的简洁与可维护。 没看过上一期的小伙伴可以看上一期的笔记&#xff1a; JavaWeb笔记全整理——JSP服务器渲染技术-CSDN博客 一、EL表达式…

Git 小白入门到进阶—(基本概念和常用命令)

一.了解 Git 基本概念和常用命令的作用 (理论) 基本概念 1、工作区 包含.git文件夹的目录&#xff0c;主要用存放开发的代码2、仓库 分为本地仓库和远程仓库&#xff0c;本地仓库是自己电脑上的git仓库(.git文件夹);远程仓库是在远程服务器上的git仓库git文件夹无需我们进行操…

Minio实现大文件切片上传

在进行视频、压缩包等大文件上传时&#xff0c;我们有时会遇到上传速度过慢、上传到一半失败等问题。这时我们可以将一个大文件切成若干个小文件依次上传&#xff0c;这样不仅可以看到上传进度&#xff0c;当上传到一半失败时也可以继承上一次的上传进度&#xff0c;而避免了每…

【Unity】 HTFramework框架(四十九)新建脚本时,自动向脚本添加【引用命名空间】

更新日期&#xff1a;2024年5月28日。 Github源码&#xff1a;[点我获取源码] Gitee源码&#xff1a;[点我获取源码] 索引 自动向脚本添加【引用命名空间】1.新建一个编辑器脚本2.静态构造方法3.标记 InitializeOnLoad4.添加【默认引用命名空间】的规则5.再次新建脚本 自动向脚…

MaxKB,基于 LLM 大语言模型的知识库问答系统,开箱即用,支持快速嵌入到第三方业务系统。

MaxKB 是一款基于 LLM 大语言模型的知识库问答系统。MaxKB Max Knowledge Base&#xff0c;旨在成为企业的最强大脑。开箱即用&#xff0c;支持快速嵌入到第三方业务系统。 项目链接 github.com/1Panel-dev/MaxKB 项目介绍 MaxKB 是一款基于 LLM 大语言模型的知识库问答系统…

opencv学习备份

2019年3月9日 指针地址向后走 int a[5] {1,100,200,300} int *pa –>*p1 –>*p100 指针移动 –> p0x00000000 内存地址 int a1 int *p&a 指针赋值常量&#xff0c;需要加寻址符号 –>*p1 –>*p CV_8UC1&#xff0c;CV_8UC2&#xff0c;CV_8UC3。 (最后的…

Sping源码(九)—— Bean的初始化(非懒加载)— EmbeddedValueResolver

序言 上一篇文章介绍了ConversionService,顺着finishBeanFactoryInitialization主流程继续往下走&#xff0c;这篇文章介绍EmbeddedValueResolver。 源码 源码中关于EmbeddedValueResolver有说到&#xff0c;如果没有BeanPostProcessor则创建一个默认的内嵌的值解析器。那我…

【C++】d1

关键字&#xff1a; 运行、前缀、输入输出、换行 运行f10 前缀必须项&#xff1a; #include <iostream> using namespace std; 输入/输出&#xff1a; cin >> 输入 cout << 输出 语句通过>>或<<分开 换行 endl或者"\n"

了解CSS中的link和@import引入CSS的区别

CSS中的link和import引入CSS的主要区别如下: 1&#xff1a;引入方式: link是HTML标签,用于在HTML文档中引入外部资源,如CSS文件。import是CSS语法,用于在CSS文件中引入其他CSS文件。2&#xff1a;加载顺序: link引入的CSS文件会与HTML文档并行加载,不会阻塞HTML文档的解析。im…

VMware报平台不支持虚拟化Win10家庭版关闭Hyper-V及内核隔离

1.BIOS中开启虚拟化功能 2.启动或关闭程序中找不到Hyper-v 停止 hypervisorlaunchtype&#xff08;Windows Hyper-V 启动加载器&#xff09; 以管理员的身份打开命令行窗口&#xff0c;运行如下命令&#xff0c;关闭停止 Windows Hyper-V 启动加载器 开启 Windows Hyper-V 启…

防火墙基础技术篇:ensp配置防火墙ssh方式登录

防火墙基础技术篇&#xff1a;ensp配置防火墙ssh方式登录 一、SSH 是什么 历史上&#xff0c;网络主机之间的通信是不加密的&#xff0c;属于明文通信。这使得通信很不安全&#xff0c;一个典型的例子就是服务器登录。登录远程服务器的时候&#xff0c;需要将用户输入的密码传…

TECHNIUM INTERNATIONAL: 利用 AI 和 TECHNIUM 矩阵协议引领区块链创新

在充满活力的加密货币和区块链技术领域&#xff0c;Technium International 以领军者的姿态迅速崛起&#xff0c;跻身科技巨头的顶尖行列。Technium International 成立于 2018 年&#xff0c;总部设于塞席尔&#xff0c;透过人工智慧&#xff08;AI&#xff09;和区块链技术的…

智能跳绳的产品体验与思考(一)

我&#xff0c;虽称不上跳绳高手&#xff0c;却对这项运动怀有深厚的热爱&#xff0c;也曾在某电商平台上选购过一款智能跳绳&#xff0c;希望能借此提升我的跳绳技巧。今天&#xff0c;咱们就来聊聊我和这条绳子的发生的一些故事&#xff0c;外加我的一些思考。 此刻&#xf…

揭秘python模块导入的“隐身术”:如何控制模块代码的执行?

新书上架~&#x1f447;全国包邮奥~ python实用小工具开发教程http://pythontoolsteach.com/3 欢迎关注我&#x1f446;&#xff0c;收藏下次不迷路┗|&#xff40;O′|┛ 嗷~~ 目录 一、引言&#xff1a;两个下划线的奥秘 二、案例展示&#xff1a;模块导入与代码执行 1. 导…