OpenHarmony实战开发-如何实现图片缩放效果。

介绍

图片预览在应用开发中是一种常见场景,在诸如QQ、微信、微博等应用中均被广泛使用。本模块基于Image组件实现了简单的图片预览功能。

使用说明:

  1. 双指捏合对图片进行缩放
  2. 双击图片进行图片的大小切换,在放大状态下,双击可恢复默认状态
  3. 图片在放大模式下,滑动图片查看图片的对应位置

效果图预览

在这里插入图片描述

实现思路

1.使用matrix实现图片的缩放。

@State matrix: matrix4.Matrix4Transit = matrix4.identity().copy();
Image(this.imagePixelMap).transform(this.matrix)

2.使用offset属性对图片进行偏移。

@State imageOffsetInfo: OffsetModel = new OffsetModel(0, 0);
Image(this.imagePixelMap).offset({x: this.imageOffsetInfo.currentX,y: this.imageOffsetInfo.currentY})

3.Image的objectFit属性设置为Cover,锁定图片宽高比,并使其能够超出父组件边界显示。

Image(this.imagePixelMap).objectFit(ImageFit.Cover)

4.提前计算图片信息,并通过Image的宽或高配合aspectRatio设置默认尺寸。

initCurrentImageInfo(): void {this.matrix = matrix4.identity().copy();const imageSource: image.ImageSource = image.createImageSource(this.imageUri);imageSource.getImageInfo(0).then((data: image.ImageInfo) => {this.imageWHRatio = data.size.width / data.size.height;this.imageDefaultSize = this.calcImageDefaultSize(this.imageWHRatio, windowSizeManager.get());if (this.imageDefaultSize.width === windowSizeManager.get().width) {this.fitWH = "width";} else {this.fitWH = "height";}this.imageScaleInfo.maxScaleValue += this.fitWH === "width" ? (windowSizeManager.get().height / this.imageDefaultSize.height) : (windowSizeManager.get().width / this.imageDefaultSize.width);}).catch((err: BusinessError) => {console.error(`[error][getImageInfo]${err.message}`);});imageSource.createPixelMap().then((data: image.PixelMap) => {this.imagePixelMap = data;}).catch((err: BusinessError) => {console.error(`[error][createPixelMap]${err.message}`);});
}Image(this.imagePixelMap).width(this.fitWH === "width" ? $r("app.string.image_default_width") : undefined).height(this.fitWH === "height" ? $r("app.string.image_default_height") : undefined).aspectRatio(this.imageWHRatio)

高性能知识点

  1. 数据懒加载
  2. 组件复用

模块依赖

动态路由模块

工程结构&模块类型

imageviewer                                     // har类型
|---constants                                   // 常量
|---model                                       // 模型层-自定义数据模型
|---utils                                       // 工具类
|---view                                        // 视图层-图片预览方案涉及的主要组件
|---|---ImageViewerView.ets                     // 视图层-入口
|---|---ImageItemView.ets                       // 视图层-单张图片的显示组件

其他

  1. TODO:增强需求:限制位移边界
  2. TODO:增强需求:多图切换

为了帮助大家更深入有效的学习到鸿蒙开发知识点,小编特意给大家准备了一份全套最新版的HarmonyOS NEXT学习资源,获取完整版方式请点击→HarmonyOS教学视频:https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

HarmonyOS教学视频:语法ArkTS、TypeScript、ArkUI等…视频教程

在这里插入图片描述
在这里插入图片描述

鸿蒙生态应用开发白皮书V2.0PDF: 获取完整版白皮书方式请点击→https://docs.qq.com/doc/DZVVkRGRUd3pHSnFG?u=a42c4946d1514235863bb82a7b2ac128

在这里插入图片描述

鸿蒙 (Harmony OS)开发学习手册→https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

一、入门必看

1.应用开发导读(ArkTS)
2………
在这里插入图片描述

二、HarmonyOS 概念→https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.系统定义
2.技术架构
3.技术特性
4.系统安全
5…

在这里插入图片描述

三、如何快速入门?→https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.基本概念
2.构建第一个ArkTS应用
3…

在这里插入图片描述

四、开发基础知识→https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.应用基础知识
2.配置文件
3.应用数据管理
4.应用安全管理
5.应用隐私保护
6.三方应用调用管控机制
7.资源分类与访问
8.学习ArkTS语言
在这里插入图片描述

五、基于ArkTS 开发→https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

1.Ability开发
2.UI开发
3.公共事件与通知
4.窗口管理
5.媒体
6.安全
7.网络与链接
8.电话服务
9.数据管理
10.后台任务(Background Task)管理
11.设备管理
12.设备使用信息统计
13.DFX
14.国际化开发
15.折叠屏系列
在这里插入图片描述

更多了解更多鸿蒙开发的相关知识可以参考:https://docs.qq.com/doc/DZVVBYlhuRkZQZlB3

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/620962.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

TensorFlow 1.x的学习

.为什么还有很多人都选择使用TensorFlow 1.x 兼容性问题: TensorFlow 1.x在一些旧项目中已经得到了广泛应用,这些项目可能依赖于1.x版本的特定API或行为。升级到2.x可能需要大量的代码修改和测试工作,对于一些已经稳定运行的项目,维护者可能…

内网渗透-内网环境下的横向移动总结

内网环境下的横向移动总结 文章目录 内网环境下的横向移动总结前言横向移动威胁 威胁密码安全 威胁主机安全 威胁信息安全横向移动威胁的特点 利用psexec 利用psexec.exe工具msf中的psexec 利用windows服务 sc命令 1.与靶机建立ipc连接2.拷贝exe到主机系统上3.在靶机上创建一个…

聚观早报 | 哪吒L上市定档;iPhone 16最新高清渲染图

聚观早报每日整理最值得关注的行业重点事件,帮助大家及时了解最新行业动态,每日读报,就读聚观365资讯简报。 整理丨Cutie 4月10日消息 哪吒L上市定档 iPhone 16最新渲染图 华为太空表与问界M9联动 蔚来万里长城加电风景线正式贯通 Red…

基于Springboot+Vue的Java项目-房产销售系统(附演示视频+源码+LW)

大家好!我是程序员一帆,感谢您阅读本文,欢迎一键三连哦。 💞当前专栏:Java毕业设计 精彩专栏推荐👇🏻👇🏻👇🏻 🎀 Python毕业设计 &am…

ubuntu16.04安装Eclipse C/C++

1.安装 JDK 官网源码安装 首先打开JDK官网,JDK1.8的下载网址为:https://www.oracle.com/cn/java/technologies/downloads/#java8-windows,进入到网址如下图所示: 向下滑动到 JDK1.8的下载界面,如下图所示&#xff1a…

戏作打油诗《无知》

笔者经营多年的《麻辣崇州论坛》,半月前突被攻击我在“霸屏”,没处讲理,特戏作打油诗《无知》一首,为那个无理取闹、砸我“麻辣崇州论坛”的无知小儿画像如下。 请点击链接,一目了然:崇州论坛-麻辣社区 没…

2024-04-15_[UPnP]:详细解析

UPnP 一、论文阅读 1.2 Theory 1.2.1 Geometry of the absolute pose problem α i f i v i R p i t , i 1.. n . \alpha_i \mathbf{f}_i \mathbf{v}_i \mathbf{R} \mathbf{p}_i \mathbf{t} ,i1..n. αi​fi​vi​Rpi​t,i1..n. 其中: P i ∈ R 3 P_i \i…

幽灵漏洞进阶版来了

近日,网络安全研究人员披露了针对英特尔系统上 Linux 内核的首个原生 Spectre v2 漏洞,该漏洞是2018 年曝出的严重处理器「幽灵」(Spectre)漏洞 v2 衍生版本,利用该漏洞可以从内存中读取敏感数据,主要影响英…

STM32学习和实践笔记(5):时钟树

STM32一共有4个时钟源。外部时钟高低速各一个,内部时钟高低速各一个。 外部高速时钟是:4-16MHZ的HSE OSC。HS表示高速high speed. E表示外部的external。开发板该处安装的8M晶振。 外部低速时钟是:32.768KHz的LSI OSC。LS表示高速low speed…

【每日刷题】Day15

【每日刷题】Day15 🥕个人主页:开敲🍉 🔥所属专栏:每日刷题🍍 目录 1. 141. 环形链表 - 力扣(LeetCode) 2. 142. 环形链表 II - 力扣(LeetCode) 3. 143. 重…

EasyRecovery数据恢复软件2024百度云网盘下载链接

EasyRecovery数据恢复软件是一款功能强大的数据恢复工具,它能够帮助用户从各种存储设备中恢复丢失或误删除的文件数据。无论是由于意外删除、格式化、病毒攻击还是其他原因导致的数据丢失,EasyRecovery都能提供有效的解决方案。 该软件支持多种存储介质…

ModuleNotFoundError: No module named ‘llama_index.readers“解决方案

大家好,我是爱编程的喵喵。双985硕士毕业,现担任全栈工程师一职,热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…