【OpenHarmony】图形图像加载:LargeImage

简介

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

详细功能:

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) // 设置图片旋转角度
              })
    }
  }
}
DD一下: 欢迎大家关注工粽号<程序猿百晓生>,可以了解到以下知识点。
erlang 复制代码
`欢迎大家关注工粽号<程序猿百晓生>,可以了解到以下知识点。`
1.OpenHarmony开发基础
2.OpenHarmony北向开发环境搭建
3.鸿蒙南向开发环境的搭建
4.鸿蒙生态应用开发白皮书V2.0 & V3.0
5.鸿蒙开发面试真题(含参考答案) 
6.TypeScript入门学习手册
7.OpenHarmony 经典面试题(含参考答案)
8.OpenHarmony设备开发入门【最新版】
9.沉浸式剖析OpenHarmony源代码
10.系统定制指南
11.【OpenHarmony】Uboot 驱动加载流程
12.OpenHarmony构建系统--GN与子系统、部件、模块详解
13.ohos开机init启动流程
14.鸿蒙版性能优化指南
.......

接口说明

接口名 参数 返回值 说明
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 NEXT Developer Beta3: 5.0(5.0.3.530), SDK: API12 (5.0.0.35(SP3))

目录结构

lua 复制代码
|---- LargeImage
|     |---- entry     # 示例代码文件夹
|     |---- library     # LargeImage库文件夹
|     		|---- LargeImage.ets     # LargeImage对外接口
|     |---- README.md # 安装使用方法    
相关推荐
淡写成灰10 小时前
「Flutter 文件保存太难了?」一个插件打通 7 大平台,我把方案开源了 🎉
flutter·harmonyos
大雷神16 小时前
HarmonyOS ArkGraphics 2D 自定义字体实操:注册字体并验证中文回退
pytorch·华为·harmonyos
Nayana17 小时前
《Web 到 HarmonyOS》-- 第一课:前端经验哪些能带走
vue.js·harmonyos
大雷神18 小时前
HarmonyOS ArkGraphics 2D 复杂文本排版实操:用 ParagraphBuilder 做资讯阅读卡片
华为·harmonyos
大雷神18 小时前
HarmonyOS ArkGraphics 2D NativeImage 实操:获取 NativeWindow 与 SurfaceId
华为·harmonyos
小玮看世界18 小时前
当“教用户配置系统“成为产品的遮羞布:从鸿蒙拦截栈与小红书联系机制看科技公司的“驯化式创新“
科技·华为·harmonyos
梦想不只是梦与想18 小时前
鸿蒙 应用类型:企业应用
华为·harmonyos·企业应用
大雷神19 小时前
HarmonyOS ArkGraphics 2D 文本绘制实操:用 TextBlob 做动态文字排版
华为·harmonyos
搬砖的kk19 小时前
从 0 到 1:用 KMP + Compose Multiplatform + Ktor 实现鸿蒙「历史上的今天」应用
开源·harmonyos
星辰徐哥19 小时前
鸿蒙PC平台 Gnote 笔记应用适配实战:从 Linux 到 鸿蒙PC 的 Electron 迁移
linux·笔记·electron·harmonyos·gnote