OpenHarmony 实战开发PhotoView——支持图片缩放、平移、旋转的一个优雅的三方组件

news2024/11/19 5:46:23

简介

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.coloradmin.cn/o/1707769.html

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

相关文章

prompt提示词:如何让AI帮你提一个好问题

我们看完一篇文章的时候&#xff0c;有时候发给AI后&#xff0c;不知道如何问AI&#xff0c;不知道问哪些问题&#xff0c;你使用这个提示词&#xff0c;就可以让AI帮你想一个好问题&#xff0c;然后你用AI想好的问题再去问AI 能提出一个好的问题是非常难的 提示词 结合文章…

出现 Transaction rolled back because it has been marked as rollback-only 解决方法

目录 1. 问题所示2. 原理分析3. 解决方法1. 问题所示 用户反馈的Bug如下所示: Transaction rolled back because it has been marked as rollback-only截图如下: 浏览器终端同样显示: 2. 原理分析 错误表明,在事务的生命周期内,遇到了某个异常或条件,导致该事务被标记…

elemnt ui 时间选择器。 当前日期往前推6个月以前的的不可选择

<div class"hengxiang"><div class"lefttitle titlesBt" style"color:#15a66a;"><div>建单起始日期</div><el-date-picker class"elinputs" type"date" placeholder"请输入起始日" v-…

【基础篇-Day7:JAVA面向对象的初级使用】

目录 1、类和对象1.1 类的介绍1.2 类和对象的关系1.3 类的组成 2、对象内存图2.1 单个对象内存图2.2 两个对象内存图2.3 两个引用指向相同内存图 3、成员变量和局部变量3.1 成员变量和局部变量的区别 4、this关键字4.1 this可以解决的问题4.2 this介绍4.3 this内存图4.4 this总…

01 一文理解,Prometheus详细介绍

01 一文理解&#xff0c;Prometheus详细介绍 介绍 大家好&#xff0c;我是秋意零。 Prometheus 是一个开源的系统监控和报警工具包&#xff0c;最初由SoundCloud开发&#xff0c;并在2012年作为开源项目发布。Prometheus 目前由Cloud Native Computing Foundation&#xff08…

git 学习(一)

一、版本控制 &#xff08;一&#xff09;介绍 版本迭代 每一次更新代码 都会出现新的版本如果我们需要之前的版本的文件 我们就得需要版本控制的文件 每一次更新的结果我们都保存下来 多人开发必须要用版本控制器 否则代价会很大 &#xff08;二&#xff09;主流的版本控制…

中科驭数驭云、超低时延网络案例双双入选第七届数字中国建设峰会数字化转型典型应用案例

5月24日-25日&#xff0c;第七届数字中国建设峰会在福州召开。在“数字赋能民营经济专业工作会议”上&#xff0c;中关村云计算产业联盟发布了《2024中小企业数字化转型典型应用案例集》&#xff0c;中科驭数驭云、超低时延网络两大方案入选。 作为国内领先的DPU芯片及解决方案…

初识C语言——第二十六天

函数的递归1 什么是递归呢&#xff1f; 递归的两个必要条件 void print(unsigned int n) {if (n > 9){print(n / 10);}printf("%d ", n % 10); }int main() {unsigned int num 0;scanf("%u", &num);//123//递归-函数自己调用自己print(num);//pr…

Ubuntu20.04安装ffmpeg,并捕获视频流

工控机&#xff1a;幻影峡谷 系统&#xff1a;Ubuntu20.04 摄像头&#xff1a;杰瑞微通环星光USB摄像头记录一下使用ffmpeg拉取视频流的原因&#xff1a;刚开始用的是ubuntu系统自带的 茄子 软件&#xff0c;但是视频流很卡&#xff08;非常卡&#xff0c;基本上不能用&#xf…

nuxt3+Element Plus项目搭建过程记录

背景 本文只记录项目搭建过程中遇到的一些问题和关键点&#xff0c;nuxt框架的说明和API请参照官网学习 官网&#xff1a;https://nuxt.com/docs/getting-started/introduction 1. 初始化项目 指令如下: npx nuxilatest init <project-name>我在安装过程中出现报错&a…

前端项目上线

目录 1项目打包 2本地服务器部署 2.1具体操作步骤 2.2解决刷新 404 问题 2.3请求无法发送问题 3nginx 服务器部署 3.2nginx 配置代理练习 安装nginx nginx部署启动项目 3.3nginx 部署前端项目 4云服务器部署 本地资源上传 配置服务器与nginx 1项目打包 ●我…

lvm概述和配额

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

回答篇二:测试开发高频面试题目

引用之前文章&#xff1a;测试开发高频面试题目 本篇文章是回答篇&#xff08;持续更新中&#xff09; 1. 在测试开发中使用哪些自动化测试工具和框架&#xff1f;介绍一下你对其中一个工具或框架的经验。 a. 测试中经常是用的自动化测试工具和框架有Selenium、Pytest、Postman…

【Linux】解决误操作libc.so.6导致的问题,补充:升级glibc注意事项

千万不要轻易动/usr/lib64/libc.so.6。 glibc是Linux系统中最底层的api&#xff0c;Linux几乎所有运行库都依赖glibc。/usr/lib64/libc.so.6属于glibc&#xff0c;在centos7中是个软链接。 一旦误删或误操作libc.so.6&#xff0c;或者glibc新版本不兼容等原因&#xff0c;都可…

推荐一个 Java 开源企业级新能源汽车智能共享充电桩管理平台

文末可获取 Orise 平台源码 01 Orise 智能充电桩管理平台 奥升( Orise ) 新能源汽车充电桩管理 Saas 云平台是一个集充电设备管理、用户充电管理、线上小程序内容管理于一体的综合管理平台。Orise充电桩平台支持高并发业务、业务动态伸缩、桩通信负载均衡&#xff0c;通过Docke…

AI答题项目,无门槛答题一小时收益30+

朋友们&#xff0c;今天我想和大家探讨一个令人兴奋的副业机遇。你是否曾感觉到日常工作的枯燥乏味&#xff0c;而又渴望找到一种轻松的赚钱方式来增加你的收入&#xff1f;今天我将和你分享的这个项目正是你所期待的。 项目的核心是利用AI技术来回答网上付费用户的问题&…

哪个品种能够叫板白银现货t+d?

白银TD是在上海黄金交易所挂牌的白银投资品种&#xff0c;它可以说是国内版的现货白银交易&#xff0c;大家也可以把它理解成为白银交易的“快速通道”。通过它&#xff0c;投资者可以更加灵活地买卖白银&#xff0c;实现对内地白银价格的跟踪&#xff0c;并获得一定的杠杆化收…

vos3000外呼系统如何查询授权信息和系统并发

要查询VOS3000外呼系统的授权信息和系统并发情况&#xff0c;您可以按照以下步骤进行&#xff1a; 登录系统管理界面&#xff1a; 使用管理员账号登录VOS3000外呼系统的管理界面。 查找系统信息&#xff1a; 寻找系统信息或授权管理的相关选项或标签。 查询授权信息&#xff…

96.网络游戏逆向分析与漏洞攻防-ui界面的设计-角色管理功能的界面设计

免责声明&#xff1a;内容仅供学习参考&#xff0c;请合法利用知识&#xff0c;禁止进行违法犯罪活动&#xff01; 如果看不懂、不知道现在做的什么&#xff0c;那就跟着做完看效果&#xff0c;代码看不懂是正常的&#xff0c;只要会抄就行&#xff0c;抄着抄着就能懂了 内容…

如何让大模型更懂你?个性化与适应性学习的探索

一、引言 在人工智能技术的浪潮中&#xff0c;大模型以其强大的数据处理能力和广泛的应用场景&#xff0c;成为了推动智能化发展的重要力量。然而&#xff0c;要让大模型真正“懂你”&#xff0c;实现个性化与适应性学习&#xff0c;却是一项复杂而艰巨的任务。本文将围绕这一…