在一些内存要求高的场景下,使用绘制几何图形的方式替代以减小内存,目前支持矩形Rectangle、圆角矩形Rectangle、圆形Circle、椭圆Ellipse、扇形Arc、弧线Arc、直线Line。
起始规范版本:HarmonyOS 5.0
是否平台特性:否
锁屏(Lockscreen) | 桌面(Wallpaper) | 一镜到底(LongTake) | 百变卡片(Widget) | 充电动效(ChargingSkin) | |
|---|---|---|---|---|---|
是否支持 | √ | √ | √ | √ | √ |
直板机 | 折叠屏 | 平板 | |
|---|---|---|---|
是否支持 | √ | √ | √ |
<Rectangle w="" h="" x="" y="" weight="" strokeColor="" fillColor="" cap="" dottedLine="" cornerRadius="" />
参数 | 类型 | 选项 | 注释 |
x | 数值 | 选填 | 图形坐标点x坐标;Rectangle 为左上角坐标x坐标,直线为起点坐标x坐标,其余的几何图形均为中心点坐标x坐标,默认为0,单位为像素,支持表达式。 |
y | 数值 | 选填 | 图形坐标点y坐标;Rectangle 为左上角坐标y坐标,直线为起点坐标y坐标,其余的几何图形均为中心点坐标y坐标,默认为0,单位为像素,支持表达式。 |
strokeColor | 字符串 | 选填 | 描边颜色。支持6位或8位16进制颜色表示,如:#FFFFFF 、#FFFFFFFF,8位中前两位表示透明度,后六位依次表示红、绿、蓝;支持函数argb(255,255,255,255) (argb(透明度,红,绿,蓝),每个数值在[0-255]范围内);支持字符串变量,如:@abc,字符串变量需为无#的6或8位16进制表示:"ffffff"、“ffffffff",或argb函数。默认黑色。 |
fillColor | 字符串 | 选填 | 填充色,支持strokeColor中三种颜色表示。 |
weight | 数值 | 选填 | 描边宽度,自然数,默认0无描边,支持表达式 |
cap | 字符串 | 选填 | 线头形状,semicircle/square。semicircle(半圆), square(方形),不写表示无线头 |
dottedLine | 字符串 | 选填 | 虚线模式。格式“线长,间隔,线长,间隔….”。如dottedLine=”10,20,30,40”,表示10像素宽的线段,20像素的间隔,30像素的线段,40像素的间隔,以上虚线重复出现构成几何图形描边。注:至少两个参数。 |
hybridMode | 字符串 | 选填 | 共有12种混合模式供选择:
可以通过输入字符串或者对应的数字编号来选择混合模式,需要与Group联合使用。 |
矩形与圆角矩形属性:
参数 | 类型 | 选项 | 注释 |
cornerRadius | 字符串 | 选填 | 矩形圆角半径,格式”x向半径,y向半径”,例如:"10,10",半径为正整数,默认为0,单位为像素 |
w | 数值 | 必填 | 矩形宽,自然数,默认为0,单位为像素,支持表达式 |
h | 数值 | 必填 | 矩形高,自然数,默认为0,单位为像素,支持表达式 |
圆形属性:
参数 | 类型 | 选项 | 注释 |
r | 数值 | 必填 | 圆半径,自然数,默认为0,单位为像素,支持表达式 |
椭圆属性:
参数 | 类型 | 选项 | 注释 |
w | 数值 | 必填 | 椭圆宽,自然数,默认为0,单位为像素,支持表达式 |
h | 数值 | 必填 | 椭圆高,自然数,默认为0,单位为像素,支持表达式 |
扇形、圆弧属性:
参数 | 类型 | 选项 | 注释 |
w | 数值 | 必填 | 扇形所在椭圆的宽,自然数,支持表达式 |
h | 数值 | 必填 | 扇形所在椭圆的高,自然数,支持表达式 |
startAngle | 数值 | 选填 | 起始角,-360-360度,默认为0,时钟3点钟方向为0度,支持表达式 |
sweepAngle | 数值 | 必填 | 扫描角(扇形的角度),-360-360度,默认为0,起始角开始顺时针方向扫描角度,支持表达式。 |
closure | 字符串 | 选填 | 取值true/false。true 表示闭合,绘制的是扇形;false 表示不闭合,绘制的是弧线。默认false |
直线属性:
参数 | 类型 | 选项 | 注释 |
x1 | 数值 | 必填 | 直线终点坐标x坐标,默认为0,单位为像素,支持表达式。 |
y1 | 数值 | 必填 | 直线终点坐标y坐标,默认为0,单位为像素,支持表达式。 |
示例一:圆角矩形。圆角矩形左上角坐标为(10,20),宽100,高200,描边宽度为5,右下角坐标为(10+100+5*2, 20+200+5*2)=(120,230)。
<Rectangle w="300" h="300" x="100" y="100" weight="3" strokeColor="0xff0000" fillColor="@color" cap="square" dottedLine="10,20" cornerRadius="20,20" />
示例二:椭圆。椭圆圆心坐标为(100,400),x轴半径为rx=50,y轴半径为ry=100,描边宽度为weight=5。
<Ellipse w="300" h="250" x="100" y="100" weight="3" strokeColor="#ff0000" fillColor="rgba(0,0,0,0)" cap="square" dottedLine="10,20" />
示例三:圆形。圆心坐标为(600,200),圆半径为50,描边宽度为weight=5,扫描渐变的中心坐标为(r+weight, r+weight)=(55,55)。
<Circle w="0" h="0" x="150" y="150" r="300" weight="3" strokeColor="#ff00ff" fillColor="rgba(0,0,0,0)" cap="square" dottedLine="10,20" />
示例四:扇形。扇形所在椭圆的圆心为(400,200),x轴半径为100,y轴半径为200,closure设置为true。以时钟3点钟方向为起始0°角,角度小于0为逆时针方向,角度大于0为顺时针方向,所以startAngle=-10,sweepAngle=50为截取椭圆上逆时针10°开始扫描角度为50的扇形区域。渐变中心点计算与椭圆一致。(扇形描边宽度不宜设置过大)。
<Arc w="300" h="250" x="200" y="200" weight="3" strokeColor="#ff0000" fillColor="rgba(0,0,0,0)" cap="square" dottedLine="0" startAngle="0" sweepAngle="180" closure="false" />
示例五:直线。
<Line w="300" h="200" x="50" y="50" x1="250" y1="180" weight="3" strokeColor="#ff0000" fillColor="rgba(0,0,0,0)" cap="square" dottedLine="10,20" />