Image
Image是用来显示图片的组件。
支持的XML属性
Image的共有XML属性继承自：Component
Image的自有XML属性见下表：
| 属性名称 | 中文描述 | 取值 | 取值说明 | 使用案例 |
|---|---|---|---|---|
| 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" | ||
| image_src | 图像 | Element类型 | 可直接配置色值，也可引用color资源或引用media/graphic下的图片资源。 | ohos:image_src="#FFFFFFFF"ohos:image_src="$color:black"ohos:image_src="$media:warning"ohos:image_src="$graphic:graphic_src" |
| scale_mode | 图像缩放类型 | zoom_center | 表示原图按照比例缩放到与Image最窄边一致，并居中显示。 | ohos:scale_mode="center" |
| zoom_start | 表示原图按照比例缩放到与Image最窄边一致，并靠起始端显示。 | |||
| zoom_end | 表示原图按照比例缩放到与Image最窄边一致，并靠结束端显示。 | |||
| stretch | 表示将原图缩放到与Image大小一致。 | |||
| center | 表示不缩放，按Image大小显示原图中间部分。 | |||
| inside | 表示将原图按比例缩放到与Image相同或更小的尺寸，并居中显示。 | |||
| clip_center | 表示将原图按比例缩放到与Image相同或更大的尺寸，并居中显示。 |
创建Image
在“Project”窗口，打开“entry > src > main > resources > base > media”，添加一个图片至media文件夹下，以“plant.JPG”为例。
既可以在XML中创建Image，也可以在代码中创建Image，两种方式如下：
在XML中创建Image
<Image ohos:id="$+id:image" ohos:width="match_content" ohos:height="match_content" ohos:layout_alignment="center" ohos:image_src="$media:plant"/>在代码中创建Image
Image image = new Image(getContext());image.setPixelMap(ResourceTable.Media_plant);
图1 创建一个Image
使用Image
设置透明度
<Image ohos:id="$+id:image" ohos:width="match_content" ohos:height="match_content" ohos:layout_alignment="center" ohos:image_src="$media:plant" ohos:alpha="0.5"/>图2 设置透明度为0.5的效果
设置缩放系数
<Image ohos:id="$+id:image" ohos:width="match_content" ohos:height="match_content" ohos:layout_alignment="center" ohos:image_src="$media:plant" ohos:scale_x="0.5" ohos:scale_y="0.5"/>图3 设置X轴和Y轴缩放为0.5的效果
设置缩放方式
当图片尺寸与Image尺寸不同时，可以根据不同的缩放方式来对图片进行缩放，如设置Image的宽高为200vp。
以按比例缩小居中显示为例，设置ohos:scale_mode="zoom_center"。
<Image ohos:id="$+id:image" ohos:width="200vp" ohos:height="200vp" ohos:layout_alignment="center" ohos:image_src="$media:plant" ohos:scale_mode="zoom_center"/>图4 设置缩放方式为zoom_center的效果
设置裁剪对齐模式
当Image尺寸小于图片尺寸时，可以对图片进行裁剪，仍以Image的宽高为200vp为例，小于图片尺寸。
以左对齐裁剪为例，设置clip_alignment="left"。
<Image ohos:id="$+id:image" ohos:width="200vp" ohos:height="200vp" ohos:layout_alignment="center" ohos:image_src="$media:plant" ohos:clip_alignment="left"/>图5 设置左对齐裁剪的效果
