纯血鸿蒙APP实战开发——图片缩放效果实现

介绍

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

使用说明：

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

效果图预览

实现思路

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

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

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

    @State imageOffsetInfo: OffsetModel = new OffsetModel(0, 0);
    Image(this.imagePixelMap)
        .offset({
            x: this.imageOffsetInfo.currentX,
            y: this.imageOffsetInfo.currentY
        })
1
2
3
4
5
6

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

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

1. 提前计算图片信息，并通过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
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

高性能知识点

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

模块依赖

动态路由模块

工程结构&模块类型

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

其他

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

参考资料

1. image
2. gesture
3. swiper
4. window
5. matrix4

鸿蒙全栈开发全新学习指南

也为了积极培养鸿蒙生态人才，让大家都能学习到鸿蒙开发最新的技术，针对一些在职人员、0基础小白、应届生/计算机专业、鸿蒙爱好者等人群，整理了一套纯血版鸿蒙（HarmonyOS Next）全栈开发技术的学习路线【包含了大厂APP实战项目开发】。

本路线共分为四个阶段：

第一阶段：鸿蒙初中级开发必备技能

第二阶段：鸿蒙南北双向高工技能基础：gitee.com/MNxiaona/733GH

第三阶段：应用开发中高级就业技术

第四阶段：全网首发-工业级南向设备开发就业技术：gitee.com/MNxiaona/733GH

《鸿蒙 (Harmony OS)开发学习手册》（共计892页）

如何快速入门？

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

开发基础知识:gitee.com/MNxiaona/733GH

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

基于ArkTS 开发

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

鸿蒙开发面试真题（含参考答案）:gitee.com/MNxiaona/733GH

鸿蒙入门教学视频：

美团APP实战开发教学：gitee.com/MNxiaona/733GH

写在最后

• 如果你觉得这篇内容对你还蛮有帮助，我想邀请你帮我三个小忙：
• 点赞，转发，有你们的 『点赞和评论』，才是我创造的动力。
• 关注小编，同时可以期待后续文章ing
  声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/繁依Fanyi0/article/detail/578698