# 8.4：Rect、Shape

Rect 也是线性类绘制组件，它绘制时的坐标参考系是自身。左上角坐标为（0，0），右下角坐标为：（width，height）。 Shape 是绘制类组件的父组件，它定义了所有绘制组件均支持的通用属性。

# 8.4.1：Rect

Rect 用来绘制矩形组件。

# 8.4.1.1：Rect定义介绍

interface Rect extends RectAttribute<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
    }): Rect;
  (value?: {width?: number | string,height?: number | string,radius?: number | string | Array<any> } |
  {
    width?: number | string,height?: number | string,radiusWidth?: number | string,radiusHeight?: number | string}): Rect;
}

1
2
3
4
5
6
7
8
9
10
11

width：绘制矩形的宽度。
height：绘制矩形的高度。
radius：圆角半径，支持分别设置四个角的圆角度数。
radiusWidth：圆角宽度。
radiusHeight：圆角高度。

# 8.4.1.2：Rect定义介绍

declare class RectAttribute extends CommonShapeMethod<RectAttribute> {
  radius(value: number | string | Array<any>): RectAttribute;
  radiusWidth(value: number | string): RectAttribute;
  radiusHeight(value: number | string): RectAttribute;
}

1
2
3
4
5

radius：圆角半径，支持分别设置四个角的圆角度数。
radiusWidth：圆角宽度。
radiusHeight：圆角高度。

简单样例如下所示：

样例运行结果如下图所示：

# 8.4.2：Shape

绘制组件的父组件，父组件中会描述所有绘制组件均支持的通用属性。

1、绘制组件使用 Shape 作为父组件，实现类似 SVG 的效果。

2、绘制组件单独使用，用于在页面上绘制指定的图形。

# 8.4.2.1：Shape定义介绍

interface ShapeInterface {
  new (value?: PixelMap): ShapeAttribute;
  (value?: PixelMap): ShapeAttribute;
}

1
2
3
4

value：设置填充内容，可以接收一个 PixelMap 。

# 8.4.2.2：Shape属性介绍

declare class ShapeAttribute extends CommonMethod<ShapeAttribute> {
  viewPort(value: { x?: number | string; y?: number | string; width?: number | string; height?: number | string }): ShapeAttribute;
  stroke(value: ResourceColor): ShapeAttribute;
  fill(value: ResourceColor): ShapeAttribute;
  strokeDashOffset(value: number | string): ShapeAttribute;
  strokeDashArray(value: Array<any>): ShapeAttribute;
  strokeLineCap(value: LineCapStyle): ShapeAttribute;
  strokeLineJoin(value: LineJoinStyle): ShapeAttribute;
  strokeMiterLimit(value: number | string): ShapeAttribute;
  strokeOpacity(value: number | string | Resource): ShapeAttribute;
  fillOpacity(value: number | string | Resource): ShapeAttribute;
  strokeWidth(value: number | string): ShapeAttribute;
  antiAlias(value: boolean): ShapeAttribute;
  mesh(value: Array<any>, column: number, row: number): ShapeAttribute;
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

viewPort：设置 Shape 的视图窗口。
stroke：设置 Shape 的边框颜色。
fill：设置 Shape 的填充颜色。
strokeDashArray：设置 Shape 的边框间距。
strokeDashOffset：设置 Shape 的边框绘制起点的偏移量。
strokeLineCap：设置 Shape 的边框路径端点绘制样式。
strokeLineJoin：设置 Shape 的边框拐角绘制样式。
strokeMiterLimit：设置 Shape 的边框锐角绘制成斜角的极限值。
strokeOpacity：设置 Shape 的边框不透明度。
strokeWidth：设置 Shape 的边框宽度。
antiAlias：设置 Shape 是否开启抗锯齿。默认开启。

简单样例如下所示：

@Entry @Component struct Index {
  build() {
    Column({ space: 10 }) {
      Shape() {
        Rect()
          .width(300)
          .height(50)
        Ellipse()
          .width(300)
          .height(50)
          .offset({ x: 0, y: 60 })
        Path()
          .width(300)
          .height(10)
          .commands('M0 0 L900 0')
          .offset({ x: 0, y: 120 })
      }
      .viewPort({ x: -2, y: -2, width: 304, height: 130 })
      .fill(0x317Af7)
      .stroke(Color.Black)
      .strokeWidth(4)
      .strokeDashArray([20])
      .strokeDashOffset(10)
      .strokeLineCap(LineCapStyle.Round)
      .strokeLineJoin(LineJoinStyle.Round)
      .antiAlias(true)

      Shape() {
        Rect()
          .width(300)
          .height(50)
      }
      .viewPort({ x: -1, y: -1, width: 302, height: 52 })
      .fill(0x317Af7)
      .stroke(Color.Black)
      .strokeWidth(2)

      Shape() {
        Path()
          .width(300)
          .height(10)
          .commands('M0 0 L900 0')
      }
      .viewPort({ x: 0, y: -5, width: 300, height: 10 })
      .stroke(0xEE8443)
      .strokeWidth(20)
      .strokeDashArray([4])

      Shape() {
        Path()
          .width(300)
          .height(10)
          .commands('M0 0 L900 0')
      }
      .viewPort({ x: 0, y: 0, width: 300, height: 20 })
      .stroke(0xEE8443)
      .strokeWidth(10)
      .strokeOpacity(0.5)

      Shape() {
        Path()
          .width(300)
          .height(10)
          .commands('M0 0 L900 0')
      }
      .viewPort({ x: -5, y: -5, width: 300, height: 10 })
      .stroke(0xEE8443)
      .strokeWidth(10)
      .strokeDashArray([20])
      .strokeLineCap(LineCapStyle.Round)

      Shape() {
        Rect()
          .width(300)
          .height(100)
      }
      .viewPort({ x: -5, y: -5, width: 310, height: 120 })
      .fill(0x317Af7)
      .stroke(0xEE8443)
      .strokeWidth(10)
      .strokeLineJoin(LineJoinStyle.Round)

      Shape() {
        Path()
          .width(300)
          .height(60)
          .commands('M0 0 L400 0 L400 200 Z')
      }
      .viewPort({ x: -80, y: -5, width: 310, height: 100 })
      .fill(0x317Af7)
      .stroke(0xEE8443)
      .strokeWidth(10)
      .strokeLineJoin(LineJoinStyle.Miter)
      .strokeMiterLimit(10)
    }
    .padding(10)
    .size({ width: "100%", height: '100%' })
  }
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99

@Entry @Component class MyView {

    func build() {
      Column(10) {
        Shape() {
          Rect()
            .width(300)
            .height(50)
          Ellipse()
            .width(300)
            .height(50)
            .offset(x: 0, y: 60)
          Path()
            .width(300)
            .height(10)
            .commands('M0 0 L900 0')
            .offset(x: 0, y: 120)
        }
        .viewPort(x: -2, y: -2, width: 304, height: 130)
        .fill(0x317Af7)
        .stroke(0x000000)
        .strokeWidth(4)
        .strokeDashArray([20])
        .strokeDashOffset(10)
        .strokeLineCap(LineCapStyle.Round)
        .strokeLineJoin(LineJoinStyle.Round)
        .antiAlias(true)

        Shape() {
          Rect()
            .width(300)
            .height(50)
        }
        .viewPort(x: -1, y: -1, width: 302, height: 52)
        .fill(0x317Af7)
        .stroke(0x000000)
        .strokeWidth(2)

        Shape() {
          Path()
            .width(300)
            .height(10)
            .commands('M0 0 L900 0')
        }
        .viewPort(x: 0, y: -5, width: 300, height: 10)
        .stroke(0xEE8443)
        .strokeWidth(20)
        .strokeDashArray([4])

        Shape() {
          Path()
            .width(300)
            .height(10)
            .commands('M0 0 L900 0')
        }
        .viewPort(x: 0, y: 0, width: 300, height: 20)
        .stroke(0xEE8443)
        .strokeWidth(10)
        .strokeOpacity(0.5)

        Shape() {
          Path()
            .width(300)
            .height(10)
            .commands('M0 0 L900 0')
        }
        .viewPort(x: -5, y: -5, width: 300, height: 10)
        .stroke(0xEE8443)
        .strokeWidth(10)
        .strokeDashArray([20])
        .strokeLineCap(LineCapStyle.Round)

        Shape() {
          Rect()
            .width(300)
            .height(100)
        }
        .viewPort(x: -5, y: -5, width: 310, height: 120)
        .fill(0x317Af7)
        .stroke(0xEE8443)
        .strokeWidth(10)
        .strokeLineJoin(LineJoinStyle.Round)

        Shape() {
          Path()
            .width(300)
            .height(60)
            .commands('M0 0 L400 0 L400 200 Z')
        }
        .viewPort(x: -80, y: -5, width: 310, height: 100)
        .fill(0x317Af7)
        .stroke(0xEE8443)
        .strokeWidth(10)
        .strokeLineJoin(LineJoinStyle.Miter)
        .strokeMiterLimit(10)
      }
      .padding(10)
      .size(width: 100.percent, height: 100.percent)
    }
}

样例运行结果如下图所示：

← 8.3：Line、Path 8.5：Canvas画布组件 →

请作者喝杯咖啡

欢迎加入鸿蒙技术交流群：695438501

津公网安备 12011402001367号

津ICP备2020008934号-2

中央网信办互联网违法和不良信息举报中心

天津市互联网违法和不良信息举报中心