绘制类组件（如 Circle、Rect、Path 等）都继承自 CommonShapeMethod，它定义了一组专用于控制图形描边与填充的公共属性。合理运用这些属性，能够轻松绘制出各种边框样式、虚线、半透明填充以及抗锯齿效果，为 UI 增添丰富的视觉表现力。

1 CommonShapeMethod 定义

export declare class CommonShapeMethod<T> extends CommonMethod<T> {
  stroke(value: Color | number | string | Resource): T;
  strokeWidth(value: number | string | Resource): T;
  strokeDashArray(value: Array<any>): T;
  strokeDashOffset(value: number | string): T;
  strokeLineCap(value: LineCapStyle): T;
  strokeLineJoin(value: LineJoinStyle): T;
  strokeMiterLimit(value: number | string): T;
  strokeOpacity(value: number | string | Resource): T;
  fill(value: Color | number | string | Resource): T;
  fillOpacity(value: number | string | Resource): T;
  antiAlias(value: boolean): T;
}

• stroke：设置描边颜色；
• strokeWidth：设置描边宽度；
• strokeDashArray：设置虚线段长与间隔；
• strokeDashOffset：设置虚线起始偏移；
• strokeLineCap / strokeLineJoin / strokeMiterLimit：分别控制线帽样式、拐角样式和锐角斜切限制；
• strokeOpacity / fillOpacity：分别控制描边与填充的不透明度；
• fill：设置填充色；
• antiAlias：开启或关闭抗锯齿，默认为 true。

2 样例演示

以下示例展示如何结合这些属性绘制不同风格的圆形与矩形。

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

      // 2. 半透明虚线描边并灰色填充
      Circle()
        .width(80)
        .height(80)
        .stroke(Color.Red)
        .strokeWidth(3)
        .strokeDashArray([5, 3])
        .strokeDashOffset(4)
        .strokeOpacity(0.5)
        .fill(Color.Gray)
        .fillOpacity(0.3)
        .antiAlias(true);

      // 3. 虚线矩形示例
      Rect()
        .width(150)
        .height(80)
        .stroke(Color.Blue)
        .strokeWidth(4)
        .strokeDashArray([10, 5])
        .strokeLineCap(LineCapStyle.Round)
        .strokeLineJoin(LineJoinStyle.Round)
        .fill(Color.LightYellow)
        .fillOpacity(0.2);
    }
    .width('100%')
    .padding(10);
  }
}

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

      Circle()
        .width(80)
        .height(80)
        .stroke(0xff0000)
        .strokeWidth(3)
        .strokeDashArray([5, 3])
        .strokeDashOffset(4)
        .strokeOpacity(0.5)
        .fill(0xcccccc)
        .fillOpacity(0.3)
        .antiAlias(true);

      Rect()
        .width(150)
        .height(80)
        .stroke(0x0000ff)
        .strokeWidth(4)
        .strokeDashArray([10, 5])
        .strokeLineCap(LineCapStyle.Round)
        .strokeLineJoin(LineJoinStyle.Round)
        .fill(0xffffe0)
        .fillOpacity(0.2);
    }
    .justifyContent(FlexAlign.Center)
    .width(100.percent);
  }
}

运行效果会依次展示纯描边、半透明虚线描边加填充，以及虚线圆角矩形三种样式，充分演示了 CommonShapeMethod 的强大能力。

3 小结

CommonShapeMethod 中的这些公共属性，是所有绘制类组件（如 Circle、Rect、Path、Polygon、ImageShape 等）所共用的。通过调整描边颜色、虚线参数、拐角样式和填充透明度，并开启或关闭抗锯齿，您可以打造出丰富多样的自定义图形效果，用于按钮装饰、数据可视化、动画蒙版等场景。建议读者在项目中多加尝试，结合不同属性产生意想不到的视觉惊喜。