绘制类组件能够直接在界面上渲染几何图形，而 Circle 与 Ellipse 作为最常见的圆形与椭圆形组件，继承了前文介绍的 CommonShapeMethod，拥有一整套描边与填充的属性方法。掌握它们的使用，就能快速打造各种圆角按钮、进度指示器、装饰性图案等 UI 元素。

1 Circle

Circle 组件用于绘制一个圆形，其宽度和高度共同决定最终的半径。可以通过各种描边、填充、虚线和拐角样式来丰富视觉效果。

1.1 定义

interface Circle extends CircleAttribute<Circle> {
  new (value?: { width?: string | number, height?: string | number }): Circle;
  (value?: { width?: string | number, height?: string | number }): Circle;
}

declare class CircleAttribute<T> extends CommonShapeMethod<T> {
}

• width：设置圆形的直径宽度；
• height：设置圆形的直径高度；

1.2 样例

TypeScript 版：

@Entry @Component
struct CircleDemo {
  build() {
    Row({ space: 20, justifyContent: FlexAlign.Center }) {
      // 纯红色描边
      Circle()
        .width(80)
        .height(80)
        .strokeWidth(3)
        .stroke(Color.Red);

      // 多种描边样式与灰色半透明填充
      Circle()
        .width(80)
        .height(80)
        .stroke(Color.Red)
        .strokeWidth(3)
        .strokeMiterLimit(5)
        .strokeLineJoin(LineJoinStyle.Miter)
        .strokeLineCap(LineCapStyle.Butt)
        .strokeDashArray([0, 1, 2, 3, 4, 5])
        .fill(Color.Gray)
        .fillOpacity(0.3)
        .antiAlias(true);
    }
    .width('100%')
    .padding(10);
  }
}

JavaScript/C++ 版：

@Entry @Component
class MyView {
  func build() {
    Row(20) {
      Circle()
        .width(80)
        .height(80)
        .strokeWidth(3)
        .stroke(0xff0000);

      Circle()
        .width(80)
        .height(80)
        .stroke(0xff0000)
        .strokeWidth(3)
        .strokeMiterLimit(5)
        .strokeLineJoin(LineJoinStyle.Miter)
        .strokeLineCap(LineCapStyle.Butt)
        .strokeDashArray([0, 1, 2, 3, 4, 5])
        .fill(0xdddddd)
        .fillOpacity(0.3)
        .antiAlias(true);
    }
    .justifyContent(FlexAlign.Center)
    .width(100.percent);
  }
}

运行效果：第一个圆仅有红色描边，第二个圆展示了斜角连接、虚线与半透明填充等多种属性组合。

2 Ellipse

Ellipse 组件用于绘制一个椭圆，它的宽度和高度分别对应椭圆的长轴与短轴。你可以同样使用描边、虚线、填充不透明度等属性来定制样式。

2.1 定义

interface Ellipse extends EllipseAttribute<Ellipse> {
  new(value?: { width?: string | number, height?: string | number }): Ellipse;
  (value?: { width?: string | number, height?: string | number }): Ellipse;
}

declare class EllipseAttribute<T> extends CommonShapeMethod<T> {
}

• width：设置椭圆的水平直径；
• height：设置椭圆的垂直直径；

2.2 样例

TypeScript 版：

@Entry @Component
struct EllipseDemo {
  build() {
    Row({ space: 20, justifyContent: FlexAlign.Center }) {
      // 纯红色描边椭圆
      Ellipse()
        .width(130)
        .height(80)
        .strokeWidth(3)
        .stroke(Color.Red);

      // 多种描边样式与灰色半透明填充椭圆
      Ellipse()
        .width(130)
        .height(80)
        .stroke(Color.Red)
        .strokeWidth(3)
        .strokeMiterLimit(5)
        .strokeLineJoin(LineJoinStyle.Miter)
        .strokeLineCap(LineCapStyle.Butt)
        .strokeDashArray([0, 1, 2, 3, 4, 5])
        .fill(Color.Gray)
        .fillOpacity(0.3)
        .antiAlias(true);
    }
    .width('100%')
    .padding(10);
  }
}

JavaScript/C++ 版：

@Entry @Component
class MyView {
  func build() {
    Row(20) {
      Ellipse()
        .width(130)
        .height(80)
        .strokeWidth(3)
        .stroke(0xff0000);

      Ellipse()
        .width(130)
        .height(80)
        .stroke(0xff0000)
        .strokeWidth(3)
        .strokeMiterLimit(5)
        .strokeLineJoin(LineJoinStyle.Miter)
        .strokeLineCap(LineCapStyle.Butt)
        .strokeDashArray([0, 1, 2, 3, 4, 5])
        .fill(0xdddddd)
        .fillOpacity(0.3)
        .antiAlias(true);
    }
    .justifyContent(FlexAlign.Center)
    .width(100.percent);
  }
}

运行效果：两个椭圆分别演示了纯描边与虚线半透明填充的组合，展示了 Ellipse 与 Circle 在样式上的一致性。

3 小结

本节围绕 Circle 与 Ellipse 两种基础绘制组件，分别介绍了它们的构造接口与继承自 CommonShapeMethod 的多种公共属性，包括描边、虚线、拐角处理、填充以及抗锯齿等。通过灵活运用这些属性，你可以在 ArkUI 中绘制出各类按钮、进度指示、装饰性图形、蒙版等丰富的 UI 效果。建议读者在实际项目或预览器中多加练习，尝试不同参数组合，以便更好地驾驭这些绘制组件的强大能力。