OpenHarmony 图片缩放&滚动—LargeImage

2024-09-27 21:29:11 浏览数 (3)

简介

加载可以执行缩放（放大和缩小）和滚动操作的图像，图像放大之后可以拖动查看。

详细功能：

1.加载图像。

2.支持缩放。

3.支持拖动查看大图。

下载安装

代码语言：javascript复制
ohpm install @ohos/largeimage

使用说明

代码语言：typescript复制
import {LargeImage} from '@ohos/largeimage'; // 导入库的代码

@Entry
@Component
struct Index {
  @State model: LargeImage.Model  = new LargeImage.Model() //创建模型
  @State rotate:number =0;
    
  private aboutToAppear() { 
    this.model.setImage($r('app.media.tiger')); // 设置图片资源
    this.model.setMaxScale(2); // 设置图片最大缩放比例
  }

  build() {
    Stack({ alignContent: Alignment.Bottom }) {
      LargeImage({ model: this.model }) // 加载大图对象
          Image($r('app.media.rotate'))
              .width(30)
              .height(30)
              .margin({ top: 6 ,left:10,right:20})
              .onClick((event: ClickEvent) => {
                this.rotate  =90;
                this.model.setOrientation(this.rotate) // 设置图片旋转角度
              })
    }
  }
}

接口说明

接口名

参数

返回值

说明

setImage

src: Resource

void

设置图像资源

setZoomEnabled

zoomEnabled: boolean

void

设置是否可以缩放图像。

setPanEnabled

panEnabled: boolean

void

设置是否可以平移图像。

setMaxScale

maxScale: number

void

设置图像的最大缩放比例。

setOrientation

degrees: number

void

设置图像旋转角度

getLoadedImageWidth getLoadedImageHeight

无

number

获取源图像的宽度和高度

setSingleTapListener

listener: OnSingleTapListener

void

设置单击事件监听器

setLongPressListener

listener: OnLongPressListener

void

设置长按事件监听器

setDoubleTapListener

listener: OnDoubleTapListener

void

设置双击事件监听器

约束与限制

在下述版本验证通过：

  • DevEco Studio: 4.0 (4.0.3.512), SDK: API10 (4.0.10.9)
  • DevEco Studio: 4.0 Canary1(4.0.0.112), SDK: API10 (4.0.7.2)

目录结构

代码语言：shell复制
|---- LargeImage
|     |---- entry     # 示例代码文件夹
|     |---- library     # LargeImage库文件夹
|     		|---- LargeImage.ets     # LargeImage对外接口
|     |---- README.md # 安装使用方法

写在最后

如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：