智能时代IT科技
快捷导航
您的位置：首页>数据库>>HarmonyOS实战—Image组件的剪切和缩放 >

HarmonyOS实战—Image组件的剪切和缩放

  发布时间：2025-11-04 04:13:09   作者：玩站小弟   我要评论
想了解更多内容，请访问：和华为官方合作共建的鸿蒙技术社区https://harmonyos.51cto.com1. Image图片标签概述：图片(Image)是用来显示图片的组件。常见的属性：id，长 。

想了解更多内容，实缩放请访问：

和华为官方合作共建的战I组件鸿蒙技术社区

https://harmonyos.51cto.com

1. Image图片标签

概述：图片(Image)是用来显示图片的组件。

常见的切和属性：id，长、实缩放宽、战I组件高等。切和

具体可以参考华为开发手册(组件的实缩放通用属性)：

https://developer.harmonyos.com/cn/docs/documentation/doc-guides/ui-java-component-common-xml-0000001138483639

比较重要的属性：

蓝色的区域就是背景图片

如果image标签比较大，而要展示的战I组件图片比较小，前景图片就盖不住背景图片，切和背景图片就会展示出来。实缩放

工作当中，战I组件关于image标签有两个习惯：

大小会包裹内容，切和图片多大，实缩放image标签多大

image标签基本不会设置背景图片，战I组件只会设置前景图片，切和因为前景图片才是要展示出来的图片

新建项目：ImageApplication

<Image          ohos:height="1000px"          ohos:width="1000px"          ohos:image_src="$media:girl1"          ohos:background_element="#0000FF"      /> 

使用的girl图片如下，可下载自取

girl图片信息：

运行，会发现蓝色区域其实就是image标签，里面的girl就是展示的云南idc服务商前景图片，默认情况是不剪切、不缩放的形式展示，把展示的图片直接放在image正中间

2. 图片剪切 clip_alignment

查看girl图片信息

把宽高改为100px，因为image标签要比真实图片小的时候，才需要剪切

<Image    ohos:height="100px"    ohos:width="100px"    ohos:image_src="$media:girl1"    ohos:background_element="#0000FF"    ohos:clip_alignment="center"    /> 

运行：

发现只把中间的一小部分显示出来了，并且宽高大小均为100px

所以，ohos:clip_alignment="center"表示把图片中间和部分进行剪切，然后再展示出来

ohos:clip_alignment="left"，表示剪切左边的部分，其他属性以此类推

ohos:clip_alignment="left|top"表示剪切左上部分图片

3. 缩放图片 scale_mode

使用的飞机图片如下，可下载自取

飞机图片的信息

<Image     ohos:height="500px"     ohos:width="500px"     ohos:image_src="$media:plane"     ohos:background_element="#0000FF"     /> 

默认不剪切、不缩放，就是把图片放在正中间

ohos:scale_mode="inside"：表示将图片按比例缩放到跟image相同的或更小的尺寸并居中展示，但有可能不会填充整个组件

如：把图片宽高改为 300px

<Image         ohos:height="300px"         ohos:width="300px"         ohos:image_src="$media:plane"         ohos:background_element="#0000FF"         ohos:scale_mode="inside"         /> 

可以看到缩小了，把原图等比例缩小了。是跟image相同的或更小的尺寸并居中展示。

改为ohos:scale_mode="center"：表示不缩放，按照image大小来展示原图中间的b2b信息网那一部分

改为ohos:scale_mode="stretch"：表示拉伸，会把整个image拉伸铺满。缩小后会把整个image铺满

宽高改为1000px，改为ohos:scale_mode="zoom_center"，：表示把原图等比例放大，放大到跟窄边一致的时候(也就是说：在放大的时候，只要这个图片已经铺满了其中一边，那么他是铺满了横向的宽度，所以就不会再缩放了，然后再居中显示)

<Image        ohos:height="1000px"        ohos:width="1000px"        ohos:image_src="$media:plane"        ohos:background_element="#0000FF"        ohos:scale_mode="zoom_center"        /> 

改为ohos:scale_mode="zoom_start"：放大后只会在上面显示，如：

改为ohos:scale_mode="zoom_end"：放大后只会在下面显示，如：

4. zoom_center 和 inside 区别：

当image比较大时，要展示的图片比较小时，inside 不会进行放大的，只能缩小。

而 zoom_center 就会把原图放大

5. 小节

1、图片剪切显示：

代码中：可以用setClipGravity方法

xml文件中：可以用clip_alignment属性，上、下、左、右、居中，分别表示按照上、下、左、右、源码下载中间部位进行剪切。

2、图片缩放显示：

代码中：可以用setScaleMode方法

xml文件中：可以用scale_mode属性

inside：表示将原图按比例缩放到与Image相同或更小的尺寸，并居中显示。 有可能不会填充组件

center：表示不缩放，按Image大小显示原图中间部分。

stretch：表示将原图缩放到与Image大小一致。 拉伸。将组件填充。

clip_center：表示将原图按比例缩放到与Image相同或更大的尺寸，并居中显示。超过组件的部分被剪切掉。

zoom_center：表示原图按照比例缩放到与Image最窄边一致，并居中显示。

zoom_end：表示原图按照比例缩放到与Image最窄边一致，并靠结束端显示。

zoom_start：表示原图按照比例缩放到与Image最窄边一致，并靠起始端显示。

相关方法：

3、 实际开发当中，尽量不剪切、也不缩放，因为剪切或缩放了，就有可能导致图片失帧。

想了解更多内容，请访问：

和华为官方合作共建的鸿蒙技术社区

https://harmonyos.51cto.com

  • Tag：

相关文章

  • 电脑新手小白攻略教程（全面解析电脑使用技巧，帮助小白迅速掌握电脑操作）

    摘要：作为现代人必不可少的工具，电脑的操作已经渗透到我们生活的方方面面。然而对于那些没有接触过电脑，或者只是使用电脑上网冲浪的小白来说，掌握电脑使用技巧可能显得有些困难。本文将从零基础开...
    2025-11-04

  • Spring Boot并发更新还在掉坑？这5种解决方案让你稳如泰山！

    环境：SpringBoot3.4.21. 简介并发数据库更新是指多个用户或进程同时或在快速连续的时间内尝试修改同一数据库记录或数据的情况。在多用户或多线程环境中，当同时访问并修改同一数据时，就可能发生
    2025-11-04

  • 如何解决物联网的规模和性能需求？

    ​在夏季，电网中断和停电可能会更频繁地发生。这有一些可怕的事件:2017年，飓风“艾尔玛”摧毁了佛罗里达州养老院的空调设备，12名养老院居民在令人窒息的高温中丧生。但公用设施故障并不只是在炎热的月份才
    2025-11-04

  • 一文读懂DevOps、CICD、IaT、GitOps

    现代信息社会，快速稳定的交付客户所需的应用是企业成功的关键，随着时代发展，开发现代应用程序与过去的方法不同，许多团队开始探索使用DevOps来加速实现自己的业务价值。DevOps：加速价值交付DevO
    2025-11-04

  • 如何更换声卡驱动？（详细教程和注意事项）

    摘要：声卡驱动在电脑中起着重要的作用，它负责声音的输入和输出，如果声卡驱动出现问题，可能会导致电脑无法发出声音或者声音质量低劣。本文将详细介绍如何更换声卡驱动，帮助读者解决声卡驱动问题。...
    2025-11-04

  • 为什么微信选 SQLite 保存聊天记录？

    微信，一个几乎无人不知、无人不用的社交应用，每天传递着数十亿的消息。无论是日常的摸鱼，还是深情的告白，亦或是关键的商务沟通，这些聊天记录都是我们生活中重要的一部分。SQLite 是一个被大家低估的数据
    2025-11-04

最新评论