鸿蒙Harmony-矩形绘制组件Rect使用详解

目录

一，定义

二，绘制自定义图形

三，作为其他控件背景使用

一，定义

Rect是鸿蒙提供的矩形绘制组件，利用该组件可以绘制矩形背景，矩形图案等

官方提供的参数和属性：

参数：

参数名	参数类型	必填	参数描述
width	string \| number	否	宽度。说明：异常值按照默认值处理。
height	string \| number	否	高度。说明：异常值按照默认值处理。
radius	string \| number \| Array<string \| number>	否	圆角半径，支持分别设置四个角的圆角度数。该属性和radiusWidth/radiusHeight属性效果类似，在组合使用时优先于radiusWidth/radiusHeight生效说明：异常值按照默认值处理。
radiusWidth	string \| number	否	圆角宽度。说明：异常值按照默认值处理。
radiusHeight	string \| number	否	圆角高度。说明：异常值按照默认值处理。

属性：

名称	类型	默认值	描述
radiusWidth	string \| number	0	圆角的宽度，仅设置宽时宽高一致。从API version 9开始，该接口支持在ArkTS卡片中使用。说明：异常值按照默认值处理。
radiusHeight	string \| number	0	圆角的高度，仅设置高时宽高一致。从API version 9开始，该接口支持在ArkTS卡片中使用。说明：异常值按照默认值处理。
radius	string \| number \| Array<string \| number>	0	圆角半径大小。从API version 9开始，该接口支持在ArkTS卡片中使用。说明：异常值按照默认值处理。
fill	ResourceColor	Color.Black	设置填充区域颜色。从API version 9开始，该接口支持在ArkTS卡片中使用。说明：异常值按照默认值处理。
fillOpacity	Length	1	设置填充区域透明度。取值范围是[0.0, 1.0]，若给定值小于0.0，则取值为0.0；若给定值大于1.0，则取值为1.0，其余异常值按1.0处理。从API version 9开始，该接口支持在ArkTS卡片中使用。
stroke	ResourceColor	-	设置边框颜色，不设置时，默认没有边框。从API version 9开始，该接口支持在ArkTS卡片中使用。说明：异常值不会绘制边框。
strokeDashArray	Array<Length>	[]	设置边框间隙。从API version 9开始，该接口支持在ArkTS卡片中使用。说明：线段相交时可能会出现重叠现象。异常值按照默认值处理。
strokeDashOffset	number \| string	0	边框绘制起点的偏移量。从API version 9开始，该接口支持在ArkTS卡片中使用。说明：异常值按照默认值处理。
strokeLineCap	LineCapStyle	LineCapStyle.Butt	设置边框端点绘制样式。从API version 9开始，该接口支持在ArkTS卡片中使用。
strokeLineJoin	LineJoinStyle	LineJoinStyle.Miter	设置边框拐角绘制样式。从API version 9开始，该接口支持在ArkTS卡片中使用。
strokeMiterLimit	number \| string	4	设置斜接长度与边框宽度比值的极限值。斜接长度表示外边框外边交点到内边交点的距离，边框宽度即strokeWidth属性的值。从API version 9开始，该接口支持在ArkTS卡片中使用。说明：该属性取值需在strokeLineJoin属性取值LineJoinStyle.Miter时生效。该属性的合法值范围应当大于等于1.0，当取值范围在[0,1)时按1.0处理，其余异常值按默认值处理。
strokeOpacity	Length	1	设置边框透明度。从API version 9开始，该接口支持在ArkTS卡片中使用。说明：该属性的取值范围是[0.0, 1.0]，若给定值小于0.0，则取值为0.0；若给定值大于1.0，则取值为1.0，其余异常值按1.0处理。
strokeWidth	Length	1	设置边框宽度。从API version 9开始，该接口支持在ArkTS卡片中使用。说明：该属性若为string类型, 暂不支持百分比，百分比按照1px处理。
antiAlias	boolean	true	是否开启抗锯齿效果。从API version 9开始，该接口支持在ArkTS卡片中使用。说明：异常值按照默认值处理。

二，绘制自定义图形

比如要绘制一个类似于叶子的图形

@Entry
@Component
struct Index {build() {Stack({alignContent: Alignment.Center}) {Rect({ width: 100, height: 50 }) //矩形的宽高.radius([[0, 0], [60, 60], [0, 0], [60, 60]]) //矩形的圆角.fill("#FF0000")//矩形的填充色}.width("100%").height("100%")}
}

效果如下：

设置矩形的边框颜色：

@Entry
@Component
struct Index {build() {Stack({alignContent: Alignment.Center}) {Rect({ width: 100, height: 50 }) //矩形的宽高.radius([[0, 0], [60, 60], [0, 0], [60, 60]]) //矩形的圆角.fill("#FF0000")//矩形的填充色.stroke("#000000") //矩形的边框颜色}.width("100%").height("100%")}
}

效果如下：

设置矩形边框宽度：

@Entry
@Component
struct Index {build() {Stack({alignContent: Alignment.Center}) {Rect({ width: 100, height: 50 }) //矩形的宽高.radius([[0, 0], [60, 60], [0, 0], [60, 60]]) //矩形的圆角.fill("#FF0000")//矩形的填充色.stroke("#000000") //矩形的边框颜色.strokeWidth(6)//矩形的边框宽度}.width("100%").height("100%")}
}

效果如下：

三，作为其他控件背景使用

在安卓中，可以自定义drawable-xml来作为其他组件的背景，在鸿蒙中，可以将Rect作为其他组件的背景使用。

首先自定义Builder：

@Builder bg() {Rect({ width: "100%", height: "100%" }).radius([[17, 17], [17, 17], [17, 17], [17, 17]]).fill("#55000000")}

然后在组件中使用：

@Entry
@Component
struct Index {@Builder bg() {Rect({ width: "100%", height: "100%" }).radius([[17, 17], [17, 17], [17, 17], [17, 17]]).fill("#55000000")}build() {Stack({alignContent: Alignment.Center}) {Image($r('app.media.pic_bed_nurse_in')).width(60).height(60).background(this.bg())//设置背景}.width("100%").height("100%")}
}

运行效果：