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 属性了解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。