文档管理中心
我的

视图:几何图形<Geometrical figue>

功能概述

在一些内存要求高的场景下,使用绘制几何图形的方式替代以减小内存,目前支持矩形Rectangle、圆角矩形Rectangle、圆形Circle、椭圆Ellipse、扇形Arc、弧线Arc、直线Line。

支持范围

起始规范版本:HarmonyOS 5.0

是否平台特性:否

表1 支持根标签
展开
  

锁屏(Lockscreen)

桌面(Wallpaper)

一镜到底(LongTake)

百变卡片(Widget)

充电动效(ChargingSkin)

是否支持

√

√

√

√

√

表2 支持设备类型
展开
  

直板机

折叠屏

平板

是否支持

√

√

√

XML规范

<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种混合模式供选择:

  • clear(0)
  • ori(1)
  • tgt(2)
  • oriOver(3)
  • tgtOver(4)
  • oriIn(5)
  • tgtIn(6)
  • oriOut(7)
  • tgtOut(8)
  • oriATop(9)
  • tgtATop(10)
  • xor(11)

可以通过输入字符串或者对应的数字编号来选择混合模式,需要与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" />