简介

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 = new
PhotoView.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 <
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源码及文件结构

下载地址https://gitee.com/openharmony-sig/PhotoView-ETS

文件目录结构如下

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

  

类结构

相关方法

结语

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

PhotoView——支持图片缩放、平移、旋转的一个优雅的三方组件的更多相关文章

  1. C#图片缩放平移 —— 从功能分析到编码实现

    序 一直都是在看别人的博客,查到想要的,看完后把页面一关就万事大吉了,没啥感觉:直到后来遇到了同样的问题,总想不起来咋弄,关键是还查不到以前看过的,郁闷!现在想想,还是“好记性不如烂笔头”啊,自己弄过 ...

  2. 分享一个项目中在用的图片处理工具类(图片缩放,旋转,画布格式,字节,image,bitmap转换等)

    using System; using System.Collections.Generic; using System.IO; using System.Text; using System.Dra ...

  3. android图片缩放平移

    <?xml version="1.0" encoding="utf-8"?> <FrameLayout xmlns:android=" ...

  4. 解决css3不支持同时缩放和旋转的办法

    设置两个div,外层scale,内层rotate.

  5. Vue + Element-ui实现后台管理系统(5)---封装一个Form表单组件和Table表格组件

    封装一个Form表单组件和Table组件 有关后台管理系统之前写过四遍博客,看这篇之前最好先看下这四篇博客.另外这里只展示关键部分代码,项目代码放在github上: mall-manage-syste ...

  6. Android实现支持缩放平移图片

    本文主要用到了以下知识点 Matrix GestureDetector 能够捕捉到长按.双击 ScaleGestureDetector 用于检测缩放的手势 自由的缩放 需求:当图片加载时,将图片在屏幕 ...

  7. Android 手势检测实战 打造支持缩放平移的图片预览效果(下)

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/39480503,本文出自:[张鸿洋的博客] 上一篇已经带大家实现了自由的放大缩小图 ...

  8. Android -- 图片处理, 画画板,缩放,旋转,平移,镜面,倒影,图片合成,颜色处理

    1. 画画板 示例代码 public class MainActivity extends Activity { private ImageView iv; private Bitmap baseBi ...

  9. Discuz!图片查看插件(支持鼠标缩放、实际大小、旋转、下载)

    Discuz!图片查看插件(支持鼠标缩放.实际大小.旋转.下载) 图片查看是网站中的常用功能,用于展示详细的图片.在discuz图片插件的基础上进行了改造,因此这篇文章主要从以下几个方面来讨论图片查看 ...

  10. 【C#/WPF】Image图片的Transform变换:平移、缩放、旋转

    WPF中图像控件Image的变换属性Transform: 平移 缩放 旋转 即要想实现图片的平移.缩放.旋转,是修改它所在的Image控件的Transform变换属性. 下面在XAML中定义了Imag ...

随机推荐

  1. 6大数据类型之间的转换及数据在内存中的缓存机制----day03

    1.自动类型转换 当2个不同类型的数据进行运算的时候,默认向更高精度转换 数据类型精度从低到高:bool  < int < float <complex 1,1强制类型转换 # Nu ...

  2. Spingboot替换掉jar包里面的@Bean

    问题 如下图,我们需要替换掉JsoncCfg配置类里面的YCloudObjectMapper这个Bean. 这个Bean是在依赖的第三方jar包中的,因为用了@Bean而不是像@Component这种 ...

  3. 微信小程序:接手项目,修bug

    好家伙,   问题描述如下: 小程序主界面,选择快速上传会议记录 选择快速 其中,没有2022-2023第二学期,所以,新的会议记录无法上传 于是,我自愿修复这个bug 由于我们没有产品文档 我只能由 ...

  4. C++ STL 容器 forward_list类型

    C++ STL 容器 forward_list类型 介绍 std::forward_list 是 C++ 标准模板库 (STL) 中的一个单向链表容器.与 std::list 不同,std::forw ...

  5. C++ //栈 stack 容器 先进后出 不允许遍历

    1 //栈 stack 容器 先进后出 不允许遍历 2 3 4 #include<iostream> 5 #include<stack> 6 7 using namespace ...

  6. C 语言字符串操作总结

    C 语言字符串操作总结 一.字符串操作 size_t 是一个无符号整型. 1.1 strcpy 函数原型:char *strcpy(char *dest, const char *src). 功 能: ...

  7. 使用LabVIEW打开默认应用程序中的文档(PDF,Word,Excel,Html)

    问题详情 我想让我的LabVIEW VI使用默认应用程序打开硬盘上的文档.如何实现? 解决方案 有一个名为 "Open a Document on Disk.vi" 的 VI,它可 ...

  8. Vue3 写业务逻辑不适合用TS(TypeScript)

    TypeScript 最重要的就是装饰器 Vue3最重要更新就是Setup 装饰器就是为了打散功能点,Vue3的Setup功能也是打散功能点,那用Vue3上TS,感觉就是自己给自己多一层工作量. 我这 ...

  9. day03-自己实现Mybatis底层机制-02

    自己实现Mybatis底层机制-02 7.任务阶段4&5 阶段4任务:开发Mapper接口和Mapper.xml 阶段5任务:开发和Mapper接口相映射的MapperBean (1)Mapp ...

  10. day18--Java集合01

    Java集合01 1.什么是集合? 前面我们保存数据使用的是数组,数组有不足的地方,我们来分析一下: 长度开始时必须指定,而且一但指定不能更改 保存的必须是同一类型的元素 使用数组进行增加/删除元素的 ...