Name	Type	Mandatory	Description
value	CircleOptions	No	Options of the circle. The undefined and null values are treated as invalid and will not take effect.

Name	Type	Read-Only	Optional	Description
width	Length	No	Yes	Width. The value must be greater than or equal to 0. Default value: 0 Default unit: vp The undefined, null, NaN, and Infinity values are invalid and treated as the default value.
height	Length	No	Yes	Height. The value must be greater than or equal to 0. Default value: 0 Default unit: vp The undefined, null, NaN, and Infinity values are invalid and treated as the default value.

Name	Type	Mandatory	Description
value	ResourceColor	Yes	Color of the fill area. Default value: Color.Black The undefined, null, NaN, and Infinity values are invalid and treated as the default value.

Name	Type	Mandatory	Description
value	number \| string \| Resource	Yes	Opacity of the fill area. NOTE For the number type, the value range is [0.0, 1.0]. A value less than 0.0 is treated as 0.0. A value greater than 1.0 is treated as 1.0. Any other invalid value is treated as 1.0. For the string type, the value is a character string of the number type. The value range is the same as that of the number type. For the Resource type, the value is a character string from the system resource or application resource. The value range is the same as that of the number type. Invalid value NaN is treated as 0.0, while invalid values undefined, null, and Infinity are treated as 1.0. Default value: 1.0

Name	Type	Mandatory	Description
value	ResourceColor	Yes	Stroke color. Default value: Color.Transparent Invalid values undefined and null values are treated as the default value, and invalid values NaN and Infinity are treated as Color.Black.

Name	Type	Mandatory	Description
value	Array<any>	Yes	Array defining the dash pattern for the circle outline. Elements alternate between dash length and gap length. Default value: [] (empty array) Default unit: vp The undefined and null values are invalid and treated as the default value. NOTE Empty array: solid line Even-numbered array: Elements cycle sequentially, for example, [a, b, c, d] represents: dash a -> gap b -> dash c -> gap d -> dash a -> ... Odd-numbered array: Elements are duplicated to create an even-numbered array, for example, [a, b, c] becomes [a, b, c, a, b, c], representing: dash a -> gap b -> dash c -> gap a -> dash b -> gap c -> dash a -> ...

Name	Type	Mandatory	Description
value	number \| string	Yes	Offset of the start point for drawing the stroke. Default value: 0 Default unit: vp Invalid values undefined and null are treated as the default value. If set to NaN or Infinity, strokeDashArray has no effect.

Name	Type	Mandatory	Description
value	LineCapStyle	Yes	Cap style of the stroke. Default value: LineCapStyle.Butt The undefined, null, NaN, and Infinity values are invalid and treated as the default value.

Name	Type	Mandatory	Description
value	LineJoinStyle	Yes	Join style of the stroke. Default value: LineJoinStyle.Miter The undefined, null, NaN, and Infinity values are invalid and treated as the default value.

Name	Type	Mandatory	Description
value	number \| string	Yes	Limit on the ratio of the miter length to the value of strokeWidth used to draw a miter join. Default value: 4 The undefined, null, and NaN values are invalid and treated as the default value. If set to Infinity, stroke has no effect.

Name	Type	Mandatory	Description
value	number \| string \| Resource	Yes	Stroke opacity. The value range is [0.0, 1.0]. If the set value is less than 0.0, 0.0 will be used. If the set value is greater than 1.0, 1.0 will be used. Default value: opacity set by the stroke API Invalid value NaN is treated as 0.0, while invalid values undefined, null, and Infinity are treated as 1.0.

Name	Type	Mandatory	Description
value	Length	Yes	Stroke width. The value must be greater than or equal to 0. Default value: 1 Default unit: vp Invalid values undefined, null, and NaN are treated as the default value, and invalid value Infinity is treated as 0.

Name	Type	Mandatory	Description
value	boolean	Yes	Whether to enable anti-aliasing. - true: enable - false: disable Default value: true Invalid values undefined and null are treated as false.

// xxx.ets
@Entry
@Component
struct CircleExample {
  build() {
    Column({ space: 10 }) {
      // Draw a circle with a diameter of 150.
      Circle({ width: 150, height: 150 })
      // Draw a circle with a diameter of 150 and a red-dashed stroke. (If the width and height values are different, the smaller value will be used as the diameter.)
      Circle()
        .width(150)
        .height(200)
        .fillOpacity(0)
        .strokeWidth(3)
        .stroke(Color.Red)
        .strokeDashArray([1, 2])
    }.width('100%')
  }
}

[h2]Example 2: Drawing a Circle with Different Parameter Types for Width and Height

This example demonstrates how to draw a circle using different length types of the width and height attributes.

// xxx.ets
@Entry
@Component
struct CircleTypeExample {
  build() {
    Column({ space: 10 }) {
      // Draw a circle with a diameter of 50.
      Circle({ width: '50', height: '50' }) // Use the string type.
      // Draw a circle with a diameter of 100.
      Circle({ width: 100, height: 100 }) // Use the number type.
      // Draw a circle with a diameter of 150.
      Circle({ width: $r('app.string.CircleWidth'), height: $r('app.string.CircleHeight') }) // Use the Resource type, which needs to be customized.
    }.width('100%')
  }
}

[h2]Example 3: Dynamically Setting Attributes of the Circle Component Using attributeModifier

This example shows how to use attributeModifier to dynamically set the fill, fillOpacity, stroke, strokeDashArray, strokeDashOffset, strokeLineCap, strokeOpacity, strokeWidth, and antiAlias attributes of the Circle component.

// xxx.ets
class MyCircleModifier implements AttributeModifier<CircleAttribute> {
  applyNormalAttribute(instance: CircleAttribute): void {
    // Fill color: #707070; fill opacity: 0.5; stroke color: #2787D9; stroke dash array: [20]; offset to left: 15; cap style: semi-circle; stroke opacity: 0.5; stroke width: 10; anti-aliasing enabled.
    instance.fill("#707070")
    instance.fillOpacity(0.5)
    instance.stroke("#2787D9")
    instance.strokeDashArray([20])
    instance.strokeDashOffset("15")
    instance.strokeLineCap(LineCapStyle.Round)
    instance.strokeOpacity(0.5)
    instance.strokeWidth(10)
    instance.antiAlias(true)
  }
}

@Entry
@Component
struct CircleModifierDemo {
  @State modifier: MyCircleModifier = new MyCircleModifier()

  build() {
    Column() {
      Circle({ width: 150, height: 150 })
        .attributeModifier(this.modifier)
        .offset({ x: 20, y: 20 })
    }
  }
}

目录

Circle

Child Components

APIs

CircleOptions

Attributes

[h2]fill

[h2]fillOpacity

[h2]stroke

[h2]strokeDashArray

[h2]strokeDashOffset

[h2]strokeLineCap

[h2]strokeLineJoin

[h2]strokeMiterLimit

[h2]strokeOpacity

[h2]strokeWidth

[h2]antiAlias

Examples

[h2]Example 1: Drawing a Circle

[h2]Example 2: Drawing a Circle with Different Parameter Types for Width and Height

[h2]Example 3: Dynamically Setting Attributes of the Circle Component Using attributeModifier