HarmonyOS之常用组件Image的功能和使用

Posted 2021-07-03 Forever_wj

一、支持的 XML 属性

• Image 的共有 XML 属性继承自 Component，详情请参考我的博客：HarmonyOS之组件通用的XML属性总览。
• 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);

• 效果如下：

三、使用 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"/>

• 设置透明度为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"/>

• 设置 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"/>

• 设置缩放方式为 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"/>

• 设置左对齐裁剪的效果：