鸿蒙开发：使用Rect绘制矩形

前言

本文基于Api13

几何图形的绘制，很多人都能想到使用Canvas，除了Canvas之外，其实还有着很多的实现方式，比如要实现一个简单的矩形，如果是填充方式，我们就可以使用backgroundColor，设置一定宽高即可，如果是轮廓边框模式，我们就可以使用border，我们可以简单列举一下：

实现一个长100，宽100，背景为红色的实心矩形，这种情况下，我们就可以随意使用一个组件来实现：

TypeScript 复制代码

Column() {

      }.width(100)
      .height(100)
      .backgroundColor(Color.Red)

效果如下：

当然了，你也可以加上一个borderRadius属性，让其变为一个圆形：

TypeScript 复制代码

Column() {

      }.width(100)
      .height(100)
      .backgroundColor(Color.Red)
      .borderRadius(100)

效果如下：

如果你要实现的不是一个实心的，而是一个空心的，那么我们可以使用border来实现：

TypeScript 复制代码

Column() {

      }.width(100)
      .height(100)
      .border({ width: 1, color: Color.Red })

可以看到，实心已经变成了空心效果：

以上的案例呢，只能说我们是用背景和边框样式实现的，其实除了以上的实现方式之外，鸿蒙中还给我们提供了很多的几何组件，比如圆形，矩形，三角形等等，目前有7种绘制类型，分别为Circle（圆形）、Ellipse（椭圆形）、Line（直线）、Polyline（折线）、Polygon（多边形）、Path（路径）、Rect（矩形），必须使用Shape组件做为父组件。

矩形Rect

Rect主要用于绘制矩形绘制组件。

我们看下源码，参数如下：

TypeScript 复制代码

    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	设置是否开启抗锯齿效果

实心矩形

默认情况下，它就是一个实心的矩形，背景颜色为黑色。

TypeScript 复制代码

Rect().width(100)
      .height(100)

效果如下：

通过fill属性设置填充颜色，通过stroke属性设置边框颜色。

设置背景颜色为粉色：

TypeScript 复制代码

Rect().width(100)
       .height(100)
      .fill(Color.Pink)

效果如下：

边框矩形

绘制边框需要注意一点，那就是不能仅设置stroke属性，还要设置fillOpacity属性，否则边框是没有效果的，比如，设置边框为1，颜色为粉色的案例如下：

TypeScript 复制代码

Rect().width(100)
      .height(100)
      .fillOpacity(0)
      .stroke(Color.Pink)
      .strokeWidth(1)

效果如下：

圆角矩形

实现一个圆角效果，可以通过radius属性，比如实现一个，圆角度数为10的矩形：

TypeScript 复制代码

 Rect()
        .width(100)
        .height(100)
        .fill(Color.Pink)
        .radius(10)

效果如下：

当然了，你也可以实现单独的一个角的度数设置，比如设置左上角为10度。

TypeScript 复制代码

 Rect()
          .width(100)
          .height(100)
          .fill(Color.Pink)
          .radius([[10,10]])

效果如下：

渐变矩形

渐变色，我们可以直接使用通用属性linearGradient来实现，案例如下：

TypeScript 复制代码

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

实心矩形

边框矩形

圆角矩形

渐变矩形

相关总结