ArkUI 中的图形绘制 Rect 组件详解

在 ArkUI 框架中，Rect 组件是一个用于绘制矩形的 UI 组件，支持设置宽度、高度、圆角、填充颜色、边框等属性，并可在 ArkTS 卡片和原子化服务中使用。通过配置相关属性，可以实现不同样式的矩形效果，如普通矩形、带圆角矩形及渐变色矩形等。本文将详细介绍 ArkUI 中的 Rect 组件，包括其接口、属性、示例以及在实际开发中的应用。

1. Rect 组件概述

Rect 组件是 ArkUI 框架中用于绘制矩形的基本组件。它提供了丰富的属性和方法，使得开发者可以灵活地创建各种样式的矩形。Rect 组件从 API Version 7 开始支持，并在后续版本中不断扩展其功能。

1.1 Rect 组件的用途

Rect 组件主要用于绘制矩形、圆角矩形等基本图形。通过设置不同的属性，可以实现以下效果：

• 普通矩形
• 带圆角的矩形
• 渐变色矩形
• 带边框的矩形
• 带填充颜色的矩形

1.2 Rect 组件的接口

Rect 组件的接口定义如下：

Rect(value?: {width?: string | number,height?: string | number,radius?: string | number | Array<string | number>} |{width?: string | number,height?: string | number,radiusWidth?: string | number,radiusHeight?: string | number}) 

参数说明

参数名	类型	必填	说明
value	{width?: string | number,height?: string | number,radius?: string | number | Array<string | number>} | {width?: string | number,height?: string | number,radiusWidth?: string | number,radiusHeight?: string | number}	否	width：宽度，取值范围≥0。 默认值：0 默认单位：vp 异常值按照默认值处理。 height: 高度，取值范围≥0。 默认值：0 默认单位：vp 异常值按照默认值处理。 radius：圆角半径，支持分别设置四个角的圆角度数，取值范围≥0。 该属性和radiusWidth/radiusHeight属性效果类似，在组合使用时优先于radiusWidth/radiusHeight生效 默认值：0 默认单位：vp 异常值按照默认值处理。 radiusWidth：圆角宽度，取值范围≥0。 默认值：0 默认单位：vp 异常值按照默认值处理。 radiusHeight：圆角高度，取值范围≥0。 默认值：0 默认单位：vp 异常值按照默认值处理。

2. Rect 组件的属性

Rect 组件除了支持通用属性外，还支持以下特定属性：

2.1 radiusWidth

radiusWidth(value: number | string) 

设置圆角的宽度，仅设置宽时宽高一致。 异常值按照默认值处理。

参数说明

参数名	类型	必填	说明
value	number | string	是	圆角的宽度，取值范围≥0。 默认值：0 默认单位：vp

2.2 radiusHeight

radiusHeight(value: number | string) 

设置圆角的高度，仅设置高时宽高一致。 异常值按照默认值处理。

参数说明

参数名	类型	必填	说明
value	number | string	是	圆角的高度，取值范围≥0。 默认值：0 默认单位：vp

2.3 stroke

stroke(value: ResourceColor) 

设置边框颜色，不设置时，默认没有边框。异常值不会绘制边框。

参数说明

参数名	类型	必填	说明
value	ResourceColor	是	边框颜色。

2.4 strokeDashArray

strokeDashArray(value: Array<any>) 

设置边框间隙。取值范围≥0，异常值按照默认值处理。

参数说明

参数名	类型	必填	说明
value	Array<any>	是	边框间隙。 默认值：[] 默认单位：vp

2.5 strokeDashOffset

strokeDashOffset(value: number | string) 

设置边框绘制起点的偏移量。异常值按照默认值处理。

参数说明

参数名	类型	必填	说明
value	number | string	是	边框绘制起点的偏移量。 默认值：0 默认单位：vp

2.6 strokeLineCap

strokeLineCap(value: LineCapStyle) 

设置边框端点绘制样式。

参数说明

参数名	类型	必填	说明
value	LineCapStyle	是	边框端点绘制样式。 默认值：LineCapStyle.Butt

2.7 strokeLineJoin

strokeLineJoin(value: LineJoinStyle) 

设置边框拐角绘制样式。

参数说明

参数名	类型	必填	说明
value	LineJoinStyle	是	边框拐角绘制样式。 默认值：LineJoinStyle.Miter

2.8 strokeMiterLimit

strokeMiterLimit(value: number | string) 

设置边框斜接限制。取值范围≥0，异常值按照默认值处理。

参数说明

参数名	类型	必填	说明
value	number | string	是	斜接长度与边框宽度比值的极限值。 默认值：4

2.9 strokeWidth

strokeWidth(value: Length) 

设置边框宽度。该属性若为string类型, 暂不支持百分比，百分比按照1px处理。

参数说明

参数名	类型	必填	说明
value	Length	是	边框宽度，取值范围≥0。 默认值：1 默认单位：vp 异常值按照默认值处理。

2.10 antiAlias

antiAlias(value: boolean) 

设置是否开启抗锯齿效果。

参数说明

参数名	类型	必填	说明
value	boolean	是	是否开启抗锯齿效果。 true：开启抗锯齿；false：关闭抗锯齿。 默认值：true

3. Rect 组件的示例

下面通过几个示例展示如何使用 Rect 组件绘制不同样式的矩形。

3.1 示例 1：绘制普通矩形

@Entry
@Component
struct RectExample {
  build() {
    Column({ space: 10 }) {
      Text('normal')
        .fontSize(11)
        .fontColor(0xCCCCCC)
        .width('90%')
      // 绘制90% * 50的矩形 
      Column({ space: 5 }) {
        Text('normal').fontSize(9).fontColor(0xCCCCCC).width('90%')
        // 绘制90% * 50矩形 
        Rect({ width: '90%', height: 50 }).fill(Color.Pink)
      }.width('100%').margin({ top: 10 })
    }
  }
} 

 

3.2 示例 2：绘制带圆角的矩形

@Entry
@Component
struct RoundedRectangleExample {
  build() {
    Column({ space: 10 }) {
      Text('with rounded corners').fontSize(11).fontColor(0xCCCCCC).width('90%')
      // 绘制90% * 80的矩形, 圆角宽高分别为40、20
      Rect({ width: '90%', height: 80 }).radiusHeight(20).radiusWidth(40).fill(Color.Pink)
      // 绘制90% * 80的矩形, 圆角宽高为20
      Rect({ width: '90%', height: 80 }).radius(20).fill(Color.Pink).stroke(Color.Transparent)
    }.width('100%').margin({ top: 10 })
  }
} 

 

3.3 示例 3：绘制带边框的矩形

@Entry
@Component
struct BorderedRectExample {
  build() {
    Column({ space: 10 }) {
      Text('with border').fontSize(11).fontColor(0xCCCCCC).width('90%')
      // 绘制90% * 50的矩形框
      Rect()
        .width('90%')
        .height(50)
        .fillOpacity(0)
        .stroke(Color.Red)
        .strokeWidth(3)
    }.width('100%').margin({ top: 10 })
  }
} 

 

4. Rect 组件在实际开发中的应用

Rect 组件在 ArkUI 框架中有着广泛的应用，特别是在需要绘制基本图形和自定义 UI 元素的场景中。以下是一些常见的应用场景：

4.1 绘制自定义 UI 元素

通过 Rect 组件，开发者可以绘制各种自定义的 UI 元素，如按钮、卡片、面板等。通过设置不同的属性，可以实现丰富的视觉效果。

@Entry
@Component
struct CustomButton {
  build() {
    Row() {
      Rect({ width: 100, height: 50 }).fill(Color.Blue).radius(10).onClick(() => {
        console.log('Button clicked');
      })
    }.width('100%').height('100%')
  }
}

 

4.2 绘制图表和图形

Rect 组件可以用于绘制各种图表和图形，如柱状图、饼图、折线图等。通过组合多个 Rect 组件，可以实现复杂的图形效果。

@Entry
@Component
struct BarChart {
  build() {
    Column() {
      Rect({ width: 50, height: 100 }).fill(Color.Green)
      Rect({ width: 50, height: 80 }).fill(Color.Yellow)
      Rect({ width: 50, height: 60 }).fill(Color.Red)
    }.width('100%').height('100%')
  }
} 

 

4.3 绘制背景和边框

Rect 组件可以用于绘制背景和边框，增强界面的视觉效果。通过设置不同的填充颜色和边框样式，可以实现丰富的背景和边框效果。

@Entry
@Component
struct BackgroundWithBorder {
  build() {
    Column() {
      Rect({ width: '50%', height: '50%' }).fill(Color.White).border({ width: 2, color: Color.Black })
    }.width('100%').height('100%')
  }
}

5. 总结

Rect 组件是 ArkUI 框架中一个非常强大和灵活的组件，通过设置不同的属性，可以实现各种样式的矩形绘制。无论是绘制自定义 UI 元素、图表和图形，还是绘制背景和边框，Rect 组件都能提供强大的支持。希望本文的介绍能够帮助开发者更好地理解和使用 ArkUI 中的 Rect 组件，提升应用的用户体验和视觉效果。

----

以上