4

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

 1 year ago
source link: https://blog.51cto.com/OpenHarmony/5682158
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

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

精选 原创

PhotoView是OpenAtom OpenHarmony（简称“OpenHarmony”）系统的一款图片缩放及浏览的三方组件，用于声明式应用开发，支持图片缩放、平移、旋转等功能。

使用场景​

PhotoView为广大OpenHarmony应用开发者在处理图片时，提供了很大的便利。当开发者需要对图片进行浏览、查看等处理时，只需要导入PhotoView三方组件，然后调用相关的接口就能实现效果，例如基于大禹200开发板开发的图库应用，就使用到了PhotoView三方库去处理图片。

效果展示​

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  # 安装使用方法
PhotoView——支持图片缩放、平移、旋转的一个优雅的三方组件_ide_02
相关方法​
PhotoView——支持图片缩放、平移、旋转的一个优雅的三方组件_ide_03
通过本篇文章介绍，您对OpenHarmony  PhotoView组件应该有了初步的了解。我们所有的源码和指导文档都已经开源，如果您对本篇文章内容以及所实现的Demo感兴趣，可以根据本篇文章介绍自行下载OpenHarmony PhotoView源码进行研究和使用。同时也欢迎更多开发者与我们共享开发成果，分享技术解读与经验心得。（OpenHarmony PhotoView源码下载链接https://gitee.com/openharmony-sig/PhotoView-ETS）

            

        
        
        
    

    

        
  • 
                
                    
                    赞
                
            
    • 
            
  • 
                
                    
                    收藏
                
            
    • 
            
  • 
                
                    
                    评论
                
            
    • 
            
  • 
                
                    
                    分享
                
            
    • 
                            
  • 
                    
                        
                        举报
                    
                
    • 
                    

    
    


        

        

            

                report
            

        

    







        
Recommend

        



                

    
About Joyk

    
 





Aggregate valuable and interesting links.

Joyk means Joy of geeK