Harmony OS 开发入门 第三章
本章继续Harmony OS中UI开发中的内容。
目录
SVG图标
1. SVG 图标的优势
2. 在 HarmonyOS 中使用 SVG
3.官方图标库
背景属性
.backgroundImage()
.backgroundImagePosition()
.backgroundImageSize()
SVG图标
SVG (Scalable Vector Graphics) 是一种基于 XML 的矢量图形格式，在 HarmonyOS 开发中广泛用于图标和矢量图形的显示。以下是关于在 HarmonyOS 中使用 SVG 图标的详细介绍：
1. SVG 图标的优势
-
矢量特性：可无限缩放而不失真
-
文件体积小：相比位图更节省空间
-
可编辑性：可直接修改颜色、大小等属性
-
动画支持：支持基于属性的动画效果
2. 在 HarmonyOS 中使用 SVG
svg图标的使用和普通图片一样
Image($r('app.media.图标名称'))可以通过.fillColor修改图标颜色
3.官方图标库
Harmony OS官方为我们提供一套图标库
背景属性
| 属性方法 | 属性 |
|---|---|
| 背景色 | backgroundColor |
| 背景图 | backgroundImage |
| 背景图位置 | backgroundImagePosition |
| 背景图尺寸 | backgroundImageSize |
.backgroundImage()
.backgroundImage(图片地址,背景图平铺方式-ImageRepeat枚举类型)
背景图平铺方式（可省略）：
NoRepeat 不平铺（默认）
X 水平平铺
Y 垂直平铺
XY 水平垂直均平铺
.backgroundImagePosition()
调整背景图在组件内的显示位置，默认显示位置为组件左上角
.backgroundImagePosition(坐标对象或枚举)
位置坐标{x:坐标位置,y:坐标位置} 图片左顶点位置
枚举 Alignment
Text().width(100).height(100).backgroundImage($r('app.media.startIcon')).backgroundColor(Color.Red).backgroundImagePosition(Alignment.Center)单位问题：
背景定位的默认单位和宽高的默认单位不同
背景定位的单位：px 像素，实际的物理像素点
宽高默认单位：vp 虚拟像素，相对于不同的设备会自动转换，保证不同设备视觉一致（推荐）
函数vp2px()可以进行单位转换
.backgroundImageSize()
.backgroundImageSize(宽高对象或枚举)
背景图宽高{width:宽,height:高}
枚举ImageSize
Auto(默认) 原图尺寸
Cover 等比例缩放至完全覆盖组件范围 （多余内容被裁剪掉了）
Contain 等比例缩放至宽或高与组件尺寸相同停止缩放