HarmonyOS开发16：Image组件

常见的属性：

属性名称	功能说明
background_element （通用属性）	图片背景
image_src	展示图片/前景图片
clip_alignment	图像裁剪对齐方式
scale_mode	图像缩放类型

第一种情况：

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="center"
    ohos:orientation="vertical">

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

结果图：

图片剪切与缩放

图片剪切显示：

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

图片缩放显示：

• 代码中：可以用setScaleMode方法
• xml文件中：可以用scale_mode属性
  • inside：表示将原图按比例缩放到与Image相同或更小的尺寸，并居中显示。 有可能不会填充组件
  • center：表示不缩放，按Image大小显示原图中间部分。
  • stretch：表示将原图缩放到与Image大小一致。 拉伸。将组件填充。
  • clip_center：表示将原图按比例缩放到与Image相同或更大的尺寸，并居中显示。超过组件的部分被剪切掉。
  • zoom_center：表示原图按照比例缩放到与Image最窄边一致，并居中显示。
  • zoom_end：表示原图按照比例缩放到与Image最窄边一致，并靠结束端显示。
  • zoom_start：表示原图按照比例缩放到与Image最窄边一致，并靠起始端显示。

接下来看几个示例：

原图：

xml：

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="center"
    ohos:orientation="vertical">

    <Image
        ohos:height="200px"
        ohos:width="200px"
        ohos:image_src="$media:girl1"
        ohos:background_element="#0000ff"
        ohos:clip_alignment="left|top"
        />
    
</DirectionalLayout>

结果：

显示的是图片左上角的200px * 200px

xml：

<?xml version="1.0" encoding="utf-8"?>
<DirectionalLayout
    xmlns:ohos="http://schemas.huawei.com/res/ohos"
    ohos:height="match_parent"
    ohos:width="match_parent"
    ohos:alignment="center"
    ohos:orientation="vertical">

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

</DirectionalLayout>

结果：