【OpenHarmony开发】ArkUI（ETS）自定义图片查看组件

最新推荐文章于 2025-03-05 13:36:28 发布
最新推荐文章于 2025-03-05 13:36:28 发布
阅读量1.1k 收藏 17
点赞数 11
CC 4.0 BY-SA版权
文章标签： OpenHarmony 华为 鸿蒙 鸿蒙南向
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/HarmonyOS_001/article/details/139990104

前言

日常开发中，经常会遇到一些图片查看的需求，此时有的用户习惯放大图片来看，那么在ets中如何实现呢？今日分享的组件由subsampling-scale-image-view+swiper来实现深度缩放视图、图像显示、手势平移缩放双击等。

项目说明

本组件界面搭建基于ArkUI中TS扩展的声明式开发范式，官网官方文档地址：基于TS扩展的声明式开发范式1、基于TS扩展的声明式开发范式2
工具版本：DevEco Studio 3.0 Beta2 SDK版本：3.0.0.1（API Version 7 Beta2）

主要功能

●双击放大图片
●如果图片已经是放大状态，双击恢复原图大小
●点击下方缩略图列表，可查看对应图片
●可旋转查看图片，每次旋转90度
●点击箭头可查看上一组缩略视图和下一组缩略视图

效果展示

在这里插入图片描述

OpenHarmony npm包

OpenHarmony js/ts三方库使用的是OpenHarmony npm包，它是在传统的npm包的基础上，定义了OpenHarmony npm共享包特定的工程结构和配置文件，支持OpenHarmony页面组件相关API、资源的调用。通过OpenHarmony npm包，您可以实现多个模块或者多个工程共享OpenHarmony页面、资源等相关代码。

OpenHarmony npm共享包的实现依赖于npm，因此您需要了解和掌握npm的基础功能和机制，可通过npm官方文档进行了解

如何安装OpenHarmony npm包

设置 OpenHarmony推荐的npm专用仓库（如果使用DevEco Studio 3.0 Beta3及以上版本的命令行窗口，则可忽略此步骤）
ruby复制代码npm config set @ohos:registry=https://repo.harmonyos.com/npm/

在命令行工具中，执行如下命令进行安装，如安装subsampl

最低0.47元/天 解锁文章
鸿蒙HarmonyOS开发：渲染展示图片组件-image
2401_84917132的博客
08-16 922
image是图片组件，用来渲染展示图片。
【鸿蒙实战开发】ArkUI（ETS） 自定义图片查看组件
HarmonyOS007的博客
08-08 1172
日常开发中，经常会遇到一些图片查看的需求，此时有的用户习惯放大图片来看，那么在ets中如何实现呢？今日分享的组件由subsampling-scale-image-view+swiper来实现深度缩放视图、图像显示、手势平移缩放双击等。
ArkUI（ETS）openHarmony 自定义图片查看组件
maniuT的博客
03-21 1386
日常开发中，经常会遇到一些图片查看的需求，此时有的用户习惯放大图片来看，那么在ets中如何实现呢？今日分享的组件由subsampling-scale-image-view+swiper来实现深度缩放视图、图像显示、手势平移缩放双击等。此组件主要实现深度缩放视图、图像显示、手势平移缩放双击等。subsampling-scale-image-view：深度缩放视图、图像显示、手势平移缩放双。swiper图片轮播。setOrientation设置旋转角度。基本概念构建第一个ArkTS应用……
鸿蒙5.0开发实战-图片预览器实现案例
初一十五的博客
08-29 1069
使用系统弹窗组件CustomDialogController实现。
ArkUI声明式编程：仿朋友圈图片九宫格和图片预览
maniuT的博客
04-08 766
项目名称：ArkUI声明式编程：仿朋友圈图片九宫格和图片预览功能：仿朋友圈列表展示，九宫格小图图片展示，点击图片进行图片预览，图片左右滑动切换。开发版本：sdk7，DevEco Studio3.0 Beta1通过ArkUI声明式编程，实现，仿朋友圈列表展示，九宫格小图图片展示，点击图片进行图片预览，图片左右滑动切换。
HarmonyOS NEXT应用开发之图片缩放效果实现
maniuT的博客
03-11 687
图片预览在应用开发中是一种常见场景，在诸如QQ、微信、微博等应用中均被广泛使用。本模块基于Image组件实现了简单的图片预览功能。双指捏合缩放图片大小双击图片进行图片的大小切换图片在放大模式下，滑动图片查看图片的对应位置。
OpenHarmony ArkUI 实战开发—ETS 装饰器解读
m0_70748458的博客
04-26 1228
最近利用空闲时间在学习华为方舟开发框架（简称：ArkUI）的ets开发，发现在ets语言中装饰器的有着非常重要的作用，在写每一个自定义组件时都需要用到它，看到装饰器这个字眼，想起之前学过的设计模式里的装饰器模式（允许向一个现有的对象添加新的功能，同时又不改变其结构。这种类型的设计模式属于结构型模式，它是作为现有的类的一个包装），ets中的装饰器的作用就是类似这样的。华为官网中对装饰器的介绍也比较详细，参照官网的讲解，自己对其进行了汇总，方便后续理解与查阅。
OpenHarmony应用ArkUI 状态管理开发案例
鸿蒙开发知识记录
09-02 1119
在声明式UI编程框架中，UI是程序状态的运行结果，用户构建了一个UI模型，其中应用的运行时的状态是参数。当参数改变时，UI作为返回结果，也将进行对应的改变。这些运行时的状态变化所带来的UI的重新渲染，在ArkUI中统称为状态管理机制。
OpenHarmony开发指南：ArkUI组件集合规范
DMZDAMS的博客
07-21 1274
本示例为ArkUI中组件、通用、动画、全局方法的集合。
鸿蒙小案例-图片预览器
幻凡ss
07-26 522
一个简单的图片预览下载组件
OpenHarmony 实战开发PhotoView——支持图片缩放、平移、旋转的一个优雅的三方组件...
weixin_40387239的博客
09-03 140
简介PhotoView是OpenAtom OpenHarmony（简称“OpenHarmony”）系统的一款图片缩放及浏览的三方组件，用于声明式应用开发，支持图片缩放、平移、旋转等功能。使用场景PhotoView为广大OpenHarmony应用开发者在处理图片时，提供了很大的便利。当开发者需要对图片进行浏览、查看等处理时，...
ArkUI（ETS）openHarmony 自定义图片查看组件，ffmpeg音视频开发实战2024下载
2401_84181273的博客
04-16 966
此组件主要实现深度缩放视图、图像显示、手势平移缩放双击等。subsampling-scale-image-view：深度缩放视图、图像显示、手势平移缩放双。swiper图片轮播。setOrientation设置旋转角度。
基于PhotoViewPicker对图片进行操作
hongxiaomeng的博客
05-09 704
鸿蒙3.0又多了一种开发方式Ets
热门推荐
张晨光老师的播客
01-22 1万+
更新后发现多了另一种sdk，openharmonysdk，并且还多了一种开发鸿蒙的方式ets。 给大家几张截图和说明，大家尽快更新哦。 1，开发工具 升级之前是2.0，需要升级到3.0版本，下载连接，下载HarmonyOS SDK_一站式HarmonyOS系统DevEco Studio分布式应用开发平台 - HarmonyOS应用开发官网 2，sdk更新后 升级后多了一个 openharmonysdk，里面支持 js和Ets 开发 ，并且版本是7。 升级前是这样的： 3，Ets开发入口 后（先升级开
基于手势的图片预览与缩放
hongxiaomeng的博客
07-30 569
鸿蒙基于开源项目photoSwipe—如何实现点击预览图片放大缩小特效、图片轮播功能
m0_70749039的博客
05-31 1454
项目名称：PhotoSwipeJs_ohos（相册画廊组件）所属系列：鸿蒙的第三方组件适配移植功能：实现点击预览图片放大缩小特效、手指滑动，其他功能有标题栏等项目移植状态：100%，已完成核心功能移植调用差异：功能重构编程语言：Js外部库依赖：无开发版本：sdk7（版本向下兼容），DevEco Studio3.0 beta1。
鸿蒙代码实战【基于ArkUI实现图片预览功能】
zhenggaoxiao232的博客
03-05 472
本示例是基于ArkUI接口和swiper组件实现的图片预览应用，其功能包括图片的切换、图片的缩放，同时支持通过双击图片实现放大或缩小的效果，并且在图片被放大后，可以对图片进行滑动查看，当图片滑动到边界时，可切换图片。
鸿蒙APP开发--ArkUI组件
m0_63160843的博客
02-29 889
(1)声明Image组件并设置图片源：Image(src: string|PixelMap|Resource)//有三种声明方式string|PixelMap|Resource//下面有介绍string格式，通常用于加载网络图片,需要申请网络访问权限：ohos.permission.INTERENTPixelMap格式，可以加载像素图，常用在图片编辑中Resource格式，加载本地图片//使用$r是指的图片是在resources目录下的media目录的资源。
鸿蒙Harmony开发：应用组件间的通信原理规范
2401_84917132的博客
08-25 1478
ETS 组件间通信是通过组合不同的装饰器来实现数据在各个组件之间的单向/双向传递。
openharmony高级组件是什么
最新发布
04-28
### OpenHarmony高级组件的功能与定义 OpenHarmony 的高级组件通常是指基于 ArkUI 开发框架构建的一系列复杂 UI 组件，这些组件不仅提供了基本的视觉展示能力，还集成了更多的交互逻辑和业务场景支持。以下是关于 OpenHarmony 高级组件的一些核心功能及其定义： #### 1. **复合组件** 复合组件是由多个基础组件组合而成的更复杂的 UI 构建单元[^4]。它们可以封装常见的布局模式、样式以及行为逻辑，从而减少开发者重复编写相似代码的工作量。例如 `SubHeader` 是一种典型的复合组件，用于在页面中创建带有子标题的部分。 ```typescript // 使用 SubHeader 复合组件的例子 import { SubHeader } from '@ohos.subheader'; @Entry @Component struct ExampleComponent { build() { Column() { SubHeader({ title: 'Example Title' }) Text('This is a sub-header example.') .fontSize(20) .margin({ top: 10 }) } .width('100%') .height('100%') } } ``` #### 2. **自定义图片查看器** 通过扩展 ArkUI 提供的基础组件，开发者能够轻松实现更加灵活的图像处理工具。比如，在引用材料中有提到如何利用 ETS 创建一个增强型的图片浏览控件[^2]。这种类型的高级组件允许用户放大缩小照片、旋转视角甚至标注重点区域等功能。 #### 3. **网络请求管理** 对于现代移动应用程序而言，高效的数据交换至关重要。因此，像 Axios 这样的第三方 HTTP 客户端也被集成到了 OpenHarmony 生态当中[^3]。借助此类库的帮助，我们可以简化跨平台 API 调用过程并提高程序性能表现。 #### 4. **图形编辑插件 - ImageKnife** 作为一款专注于图像裁剪操作的专业解决方案，“ImageKnife” 展现出了卓越的技术实力[^5]。该模块具备精准切割线条绘制选项的同时还能保持良好的用户体验流畅度；另外值得注意的是其兼容性强，能够在不同版本环境下稳定运行。 --- ### 总结说明 综上所述，OpenHarmony 中所谓的 “高级组件”，实际上涵盖了从界面设计到数据通信再到媒体处理等多个层面的内容集合体。每一个单独部分都经过精心打磨以满足实际应用场景需求为导向进行优化改进。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值