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

原文章标题：洪蒙实战演练—Image部件的裁切和放缩
1 。Image图片标签

简述：照片（Image）是用于表明照片的部件。
普遍的特性：id，长、宽、高。
实际能够参照华为开发指南（部件的通用性特性）： https://developer 。harmonyos 。com/cn/docs/documentation/doc-guides/ui-java-component-common-xml-0000001138483639
较为关键的特性：

深蓝色的地区便是背景图案

假如image标识较为大，而要展现的图片比较小，市场前景照片就盖不了背景图案，背景图案便会展现出去。

工作中之中，有关image标识有两个习惯性：

尺寸会包囊內容，照片多少，image标识多少
image标识基本上不容易设定背景图案，只能设定市场前景照片，由于市场前景照片才算是要展现出去的照片

新建项目：ImageApplication

应用的girl图片以下，可免费下载自提

girl图片信息内容：

运作，会发觉深蓝色地区实际上便是image标识，里边的girl便是展现的市场前景照片，默认设置状况不是裁切、不放缩的方式展现，把展现的照片立即放到image中间

2 。图片剪切 clip_alignment

查询girl图片信息内容

把高宽改成100px，由于image标识要比真实照片小的时候，才必须裁切

运作：

发觉只把正中间的一小部分表明出来，而且高宽尺寸均为100px
因此，ohos:clip_alignment=”center”表明把照片正中间和一部分开展裁切，随后再展现出去
ohos:clip_alignment=”left”，表明裁切左侧的一部分，别的特性依此类推

ohos:clip_alignment=”left|top”表明裁切左上一部分照片

3 。放缩照片 scale_mode

应用的飞机图片以下，可免费下载自提

飞机图片的信息内容

默认设置不裁切、不放缩，便是把照片放到中间

ohos:scale_mode=”inside”：表明将照片按占比缩放进跟image同样的或更小的规格并垂直居中展现，但有可能不容易添充全部部件
如：把照片高宽改成 300px

<Image
ohos:height=”300px”
ohos:width=”300px”
ohos:image_src=https://www.taobao49.com/74074/”$media:plane”
ohos:background_element=”#0000FF”
ohos:scale_mode=”inside”
/>
能够见到变小了，把原照等占比变小了。是跟image同样的或更小的规格并垂直居中展现。

改成ohos:scale_mode=”center”：表明不放缩，依照image大小来展现原照正中间的那一部分

改成ohos:scale_mode=”stretch”：表明拉申，会把全部image拉申布满。变小之后把全部image布满
高宽改成1000px，改成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、具体开发设计之中，尽可能不裁切、都不放缩，由于裁切或放缩了，就会有很有可能造成照片失帧。
——————
原創：老孙丨鸿蒙hms开发人员高級验证持证者！学习培训大量洪蒙OS有关开发设计能够关注我的微信公众号：洪蒙开发人员老孙回到搜狐网，点击查看

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

推荐阅读

关于节约粮食的名言诗句关于节约粮食的名言和诗句

奋斗励志朋友圈句子励志短句致自己奋斗朋友圈

想发朋友圈表示心情不好的句子心情不好发朋友圈的句子心情短句

贝拉玻尿酸是合法的吗贝拉玻尿酸是进口的还是国产的

核桃仁做菜的菜谱，您知道桃仁脆溜鸡的做法

浅紫色显皮肤黑还是白

库伦旗景点

居家隔离和集中隔离的区别什么情况下要隔离28天

蝉蛹是什么

怎样能丰胸最安全有效