前言
本文基于Api13
几何图形的绘制，很多人都能想到使用Canvas，除了Canvas之外，其实还有着很多的实现方式，比如要实现一个简单的矩形，如果是填充方式，我们就可以使用backgroundColor，设置一定宽高即可，如果是轮廓边框模式，我们就可以使用border，我们可以简单列举一下：
实现一个长100，宽100，背景为红色的实心矩形，这种情况下，我们就可以随意使用一个组件来实现：
Column() { }.width(100) .height(100) .backgroundColor(Color.Red)
效果如下：
当然了，你也可以加上一个borderRadius属性，让其变为一个圆形：
Column() { }.width(100) .height(100) .backgroundColor(Color.Red) .borderRadius(100)
效果如下：
如果你要实现的不是一个实心的，而是一个空心的，那么我们可以使用border来实现：
Column() { }.width(100) .height(100) .border({ width: 1, color: Color.Red })
可以看到，实心已经变成了空心效果：
以上的案例呢，只能说我们是用背景和边框样式实现的，其实除了以上的实现方式之外，鸿蒙中还给我们提供了很多的几何组件，比如圆形，矩形，三角形等等，目前有7种绘制类型，分别为Circle（圆形）、Ellipse（椭圆形）、Line（直线）、Polyline（折线）、Polygon（多边形）、Path（路径）、Rect（矩形），必须使用Shape组件做为父组件。
矩形Rect
Rect主要用于绘制矩形绘制组件。
我们看下源码，参数如下：
new (value?: { width?: number | string; height?: number | string; radius?: number | string | Array<any>; } | { width?: number | string; height?: number | string; radiusWidth?: number | string; radiusHeight?: number | string; }): RectAttribute;
width：宽度，取值范围≥0；height: 高度，取值范围≥0；radius：圆角半径，支持分别设置四个角的圆角度数，取值范围≥0；radiusWidth：圆角宽度，取值范围≥0；radiusHeight：圆角高度，取值范围≥0。
除了属性之外，也支持以下的方法：
方法 |
参数 |
概述 |
radiusWidth |
number/string |
设置圆角的宽度，仅设置宽时宽高一致 |
radiusHeight |
number/string |
设置圆角的高度，仅设置高时宽高一致 |
radius |
number /string / Array<string/ number> |
设置圆角半径大小，取值范围≥0 |
fill |
ResourceColor |
设置填充区域的颜色，异常值按照默认值处理 |
fillOpacity |
number /string/ Resource |
设置填充区域透明度。取值范围是[0.0, 1.0]，若给定值小于0.0，则取值为0.0；若给定值大于1.0，则取值为1.0，其余异常值按1.0处理 |
stroke |
ResourceColor |
设置边框颜色，不设置时，默认没有边框 |
strokeDashArray |
Array<any> |
设置边框间隙。取值范围≥0 |
strokeDashOffset |
number/string |
设置边框绘制起点的偏移量 |
strokeLineCap |
LineCapStyle |
设置边框端点绘制样式 |
strokeLineJoin |
LineJoinStyle |
设置边框拐角绘制样式 |
strokeMiterLimit |
number/string |
设置斜接长度与边框宽度比值的极限值 |
strokeOpacity |
number/string/Resource |
设置边框透明度 |
strokeWidth |
Length |
设置边框宽度 |
antiAlias |
boolean |
设置是否开启抗锯齿效果 |
实心矩形
默认情况下，它就是一个实心的矩形，背景颜色为黑色。
Rect().width(100) .height(100)
效果如下：
通过fill属性设置填充颜色，通过stroke属性设置边框颜色。
设置背景颜色为粉色：
Rect().width(100) .height(100) .fill(Color.Pink)
效果如下：
边框矩形
绘制边框需要注意一点，那就是不能仅设置stroke属性，还要设置fillOpacity属性，否则边框是没有效果的，比如，设置边框为1，颜色为粉色的案例如下：
Rect().width(100) .height(100) .fillOpacity(0) .stroke(Color.Pink) .strokeWidth(1)
效果如下：
圆角矩形
实现一个圆角效果，可以通过radius属性，比如实现一个，圆角度数为10的矩形：
Rect() .width(100) .height(100) .fill(Color.Pink) .radius(10)
效果如下：
当然了，你也可以实现单独的一个角的度数设置，比如设置左上角为10度。
Rect() .width(100) .height(100) .fill(Color.Pink) .radius([[10,10]])
效果如下：
渐变矩形
渐变色，我们可以直接使用通用属性linearGradient来实现，案例如下：
Rect() .width(100) .height(100) .fillOpacity(0) .linearGradient({ direction: GradientDirection.Right, colors: [[Color.Red, 0.0], [Color.Orange, 0.3], [Color.Pink, 1.0]] })
效果如下：
相关总结
几何矩形，在实际的开发中，有多种的实现方式，并非一定需要Rect组件，但是，如果有需要用到矩形的场景，建议还是使用Rect组件，因为Rect组件自身携带了很多样式属性，可以满足我们日常的不同的需求。
