HarmonyOS Image 属性了解

HarmonyOS Image 存放的地方

在entry > src > main > resources > base > media

位置如下

HarmonyOS Image 的属性

属性主要有裁切和缩放

属性名称	中文描述	取值	取值说明	使用案例
clip_alignment	图像裁剪对齐方式	left	表示按左对齐裁剪。	ohos:clip_alignment="left"
		right	表示按右对齐裁剪。	ohos:clip_alignment="right"
		top	表示按顶部对齐裁剪。	ohos:clip_alignment="top"
		bottom	表示按底部对齐裁剪。	ohos:clip_alignment="bottom"
		center	表示按居中对齐裁剪。	ohos:clip_alignment="center"
scale_mode	图像缩放类型	zoom_center	表示原图按照比例缩放到与Image最窄边一致，并居中显示。	ohos:scale_mode="center"
		zoom_start	表示原图按照比例缩放到与Image最窄边一致，并靠起始端显示。
		zoom_end	表示原图按照比例缩放到与Image最窄边一致，并靠结束端显示。
		stretch	表示将原图缩放到与Image大小一致。
		center	表示不缩放，按Image大小显示原图中间部分。
		inside	表示将原图按比例缩放到与Image相同或更小的尺寸，并居中显示。
		clip_center	表示将原图按比例缩放到与Image相同或更大的尺寸，并居中显示。

裁切呢感觉一般的app开发都不会用到,因为是裁切无论怎样设置,如果图片很大的话,一般都会缺少部分

如下

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:orientation="vertical"><Imageohos:height="200vp"ohos:width="match_parent"ohos:image_src="$media:three"/><Imageohos:height="200vp"ohos:width="match_parent"ohos:clip_alignment="left"ohos:image_src="$media:three"ohos:top_margin="10vp"/><Imageohos:height="200vp"ohos:width="match_parent"ohos:clip_alignment="right"ohos:image_src="$media:three"ohos:top_margin="10vp"/><Imageohos:height="200vp"ohos:width="match_parent"ohos:clip_alignment="center"ohos:image_src="$media:three"ohos:top_margin="10vp"/></DirectionalLayout>

效果图

估计还是缩放的属性使用的多

注意当设置图片的的长和宽大于图片的的时候如果想方法图片使用clip_center

如果想缩小图片使用zoom_center 或者inside

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayoutxmlns:ohos="http://schemas.huawei.com/res/ohos"ohos:height="match_parent"ohos:width="match_parent"ohos:orientation="vertical"><Imageohos:height="200vp"ohos:width="match_parent"ohos:image_src="$media:three"/><Imageohos:height="300vp"ohos:width="match_parent"ohos:scale_mode="zoom_center"ohos:image_src="$media:three"ohos:background_element="#00d8a0"ohos:top_margin="10vp"/><Imageohos:height="300vp"ohos:width="match_parent"ohos:scale_mode="clip_center"ohos:image_src="$media:three"ohos:background_element="#00d8a0"ohos:top_margin="10vp"/></DirectionalLayout>

效果图

当然可以使用使用

ohos:scale_x="比例"
ohos:scale_y="比例"

放大图片不过这2个就不仅仅作用图片了它在其他的地方也起作用,比如button ,text 等.

HarmonyOS Image 属性了解相关推荐

HarmonyOS实战—Text组件宽高三种值的写法和颜色属性
文章目录 1. 文本组件(Text) 1.1 宽高属性 1.2 长度单位(像素px) 2. 宽高三种值的写法 2.1 宽高为:match_content 2.2 宽高为:match_parent,铺满 ...
【鸿蒙】HarMonyOS之Text组件的常用属性
Text是用来显示字符串的组件,在界面上显示为一块文本区域.Text作为一个基本组件,有很多扩展,常见的有按钮组件Button,文本编辑组件TextField. 属性名称中文描述取值取值说明使 ...
OpenHarmony/HarmonyOS文本通用属性
文本通用属性作者:坚果团队:坚果组织公众号:"大前端之旅" 润开鸿技术专家,华为HDE,InfoQ签约作者,OpenHarmony布道师,擅长HarmonyOS应用开发.熟悉 ...
HarmonyOS之深入解析图像的位图操作和属性解码
一.位图操作 ① 应用场景位图操作就是指对 PixelMap 图像进行相关的操作,比如创建.查询信息.读写像素数据等. ② 位图操作 API 位图操作类 PixelMap 的主要接口: 接口名描述 ...
HarmonyOS之组件通用的XML属性总览
一.Component Component 是所有组件的基类. Component 支持的 XML 属性,其它组件都支持. 二.基础属性 Component 支持的 XML 的基础属性如下所示: 属性 ...
HarmonyOS鸿蒙学习笔记（11）Flex组件alignItems属性说明
Flex组件alignItems属性 1.代码示例 2.FlexDirection.Row情况下各个ItemAlign的运行情况. 2.1.alignItems:ItemAlign.Auto的运行效果 ...
HarmonyOS ScrollView 不滑动的问题
HarmonyOS ScrollView 本来就是看看文档,然后想着写一下看看, 结果泪崩了,弄了2个小时啊,阿西吧, 就是不滑动,最后睡觉前把宽高的属性设置了以下就好了不滑动的原因就是把加载字 ...
HarmonyOS Text超出部分末尾显示...
HarmonyOS Text 默认是显示一行,想要Text超出部分末尾显示... 设置 truncation_mode="ellipsis_at_end" 即可, truncati ...
HarmonyOS 输入框TextField的使用
TextField 是什么 TextField是HarmonyOS 里面的输入框 TextField 的属性 TextField 继承Text 所以Text的属行也适用TextField ,需要记住的 ...

HarmonyOS Image 属性了解

HarmonyOS Image 存放的地方

HarmonyOS Image 的属性

HarmonyOS Image 属性了解相关推荐

最新文章

热门文章