????小菜在之前簡(jiǎn)單搭建了一個(gè)【登錄】頁面，其中用到了 Image 圖片組件，小菜今天簡(jiǎn)單學(xué)習(xí)一下常用的 Image 組件；
Image
????Image 繼承自 Component 基礎(chǔ)組件類，與 Android 類似；小菜優(yōu)先學(xué)習(xí)一下幾個(gè)常見的重要屬性；
1. image_src 圖片資源
????Image 通過 image_src 來引入本地圖片資源，與 Android 類似，很容易理解；
<Image
ohos:height="match_content"
ohos:width="match_content"
ohos:background_element="$color:color_btn_start"
ohos:image_src="$media:icon_hzw01"
ohos:layout_alignment="center"
ohos:margin="10vp"/>
2. alpha 透明度
????Image 通過 alpha 設(shè)置圖片透明度，其中需要注意的是，透明度影響的是整個(gè) Image 組件，包括圖片背景效果；
<Image
ohos:height="match_content"
ohos:width="match_content"
ohos:alpha="0.5"
ohos:background_element="$color:color_btn_start"
ohos:image_src="$media:icon_hzw01"
ohos:layout_alignment="center"
ohos:margin="10vp"/>
3. scale_x & scale_y 水平 & 垂直縮放比例
????scale_x 和 scale_y 分別對(duì)應(yīng)水平方向和垂直方向圖片的縮放比例，當(dāng)設(shè)置縮放時(shí)，只是圖片展示效果縮放，但圖片的整體尺寸并未影響；
<Image
ohos:height="match_content"
ohos:width="match_content"
ohos:background_element="$color:color_btn_start"
ohos:image_src="$media:icon_hzw01"
ohos:layout_alignment="center"
ohos:margin="10vp"
ohos:scale_x="0.5"
ohos:scale_y="0.5"/>
4. scale_mode 填充方式
????scale_mode 對(duì)應(yīng)圖片的填充方式，當(dāng)設(shè)置寬高屬性與原始圖片不一致時(shí)，為了相同的顯示效果，通常設(shè)置 scale_mode 圖片的填充方式；
- center：以原始圖片中心擴(kuò)展圖片，截取展示 Image 設(shè)置的寬高尺寸，整個(gè)過程圖片不會(huì)縮放，center 為圖片的默認(rèn)填充方式；
- zoom_start：原始圖片按比例縮放到 Image 設(shè)置的最小的寬或高尺寸，并以開始方向?qū)R，大部分情況是從左向右方向，但是阿拉伯語等是從右向左方向；
- zoom_center：原始圖片按比例縮放到 Image 設(shè)置的最小的寬或高尺寸，并居中對(duì)齊；
- zoom_end：原始圖片按比例縮放到 Image 設(shè)置的最小的寬或高尺寸，并以結(jié)束方向?qū)R；
- clip_center：以原始圖片中心縮放圖片，直到原始圖的最小寬高之一滿足 Image 設(shè)置的最小寬高之后，整體進(jìn)行縮放，再進(jìn)行裁剪；
- inside：以原始圖片中心對(duì)圖片進(jìn)行縮放，直到原始圖的最大寬高滿足 Image 設(shè)置的最小寬高時(shí)，整體進(jìn)行縮放；
- stretch：以 Image 設(shè)置寬高為基礎(chǔ)，對(duì)原始圖片進(jìn)行水平垂直放心壓縮或拉伸，將整個(gè)圖片存放在設(shè)置的 Image 中；
<Image
ohos:height="100vp"
ohos:width="100vp"
ohos:background_element="$color:color_btn_start"
ohos:image_src="$media:icon_hzw02"
ohos:layout_alignment="center"
ohos:margin="10vp"
ohos:scale_mode="center"/>
// 順序
1. ohos:scale_mode="inside"
2. ohos:scale_mode="center"
3. ohos:scale_mode="zoom_start"
4. ohos:scale_mode="zoom_center"
5. ohos:scale_mode="zoom_end"
6. ohos:scale_mode="clip_center"
7. ohos:scale_mode="stretch"
5. clip_alignment 裁剪方式
????clip_alignment 為圖片的裁剪方式，多種對(duì)齊方式可以共同使用，互相影響；
- center：以圖片中心對(duì)齊裁剪，默認(rèn)方式；
- left：以圖片居左對(duì)齊裁剪；
- right：以圖片居右對(duì)齊裁剪；
- top：以圖片居頂對(duì)齊裁剪；
- bottom：以圖片居底對(duì)齊裁剪；
<Image
ohos:height="150vp"
ohos:width="150vp"
ohos:background_element="$color:color_btn_start"
ohos:clip_alignment="center"
ohos:image_src="$media:icon_hzw02"
ohos:layout_alignment="center"
ohos:margin="10vp"/>
// 順序
1. ohos:clip_alignment="center"
2. ohos:clip_alignment="top"
3. ohos:clip_alignment="bottom"
4. ohos:clip_alignment="left"
5. ohos:clip_alignment="right"
6. ohos:clip_alignment="bottom|right"
6. clip_direction 裁剪方向
????clip_direction 為裁剪方向，Image 提供了兩種裁剪方式，默認(rèn)的 vertical 垂直方向和 horizontal 水平方向；當(dāng)設(shè)置 horizontal 水平方向裁時(shí)，只會(huì)原始圖片水平居中的位置進(jìn)行裁剪；
<Image
ohos:height="150vp"
ohos:width="150vp"
ohos:background_element="$color:color_btn_start"
ohos:clip_alignment="bottom|right"
ohos:clip_direction="horizontal"
ohos:image_src="$media:icon_hzw02"
ohos:layout_alignment="center"
ohos:margin="10vp"/>
// 順序
1. ohos:clip_alignment="center"
2. ohos:clip_alignment="top"
3. ohos:clip_alignment="bottom"
4. ohos:clip_alignment="left"
5. ohos:clip_alignment="right"
6. ohos:clip_alignment="bottom|right"
????小菜主要學(xué)習(xí)了 Image 的幾個(gè)常見的屬性，后續(xù)會(huì)逐漸對(duì) Image 進(jìn)行深入探索；如有錯(cuò)誤，請(qǐng)多多指導(dǎo)！
來源：阿策小和尚
