1# Circle 2 3 用于绘制圆形的组件。 4 5> **说明：** 6> 7> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8 9 10## 子组件 11 12无 13 14 15## 接口 16 17Circle(value?: CircleOptions) 18 19**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 20 21**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 22 23**系统能力：** SystemCapability.ArkUI.ArkUI.Full 24 25**参数：** 26 27| 参数名 | 类型 | 必填 | 说明 | 28| -------- | -------- | -------- | -------- | 29| value | [CircleOptions](#circleoptions对象说明) | 否 | 设置圆形尺寸 | 30 31## CircleOptions对象说明 32 33**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 34 35**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 36 37**系统能力：** SystemCapability.ArkUI.ArkUI.Full 38 39| 名称 | 类型 | 必填 | 说明 | 40| -------- | -------- | -------- | -------- | 41| width | string \| number| 否 | 宽度。<br/>默认值：0<br/>默认单位：vp<br/>异常值按照默认值处理。 | 42| height | string \| number| 否 | 高度。<br/>默认值：0<br/>默认单位：vp<br/>异常值按照默认值处理。 | 43 44## 属性 45 46除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性： 47 48### fill 49 50fill(value: ResourceColor) 51 52设置填充区域的颜色，异常值按照默认值处理。与通用属性foregroundColor同时设置时，后设置的属性生效。 53 54**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 55 56**系统能力：** SystemCapability.ArkUI.ArkUI.Full 57 58**参数：** 59 60| 参数名 | 类型 | 必填 | 说明 | 61| ------ | ------------------------------------------ | ---- | -------------------------------------- | 62| value | [ResourceColor](ts-types.md#resourcecolor) | 是 | 填充区域颜色。<br/>默认值：Color.Black | 63 64### fillOpacity 65 66fillOpacity(value: number | string | Resource) 67 68设置填充区域透明度。取值范围是[0.0, 1.0]，若给定值小于0.0，则取值为0.0；若给定值大于1.0，则取值为1.0，其余异常值按1.0处理。 69 70**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 71 72**系统能力：** SystemCapability.ArkUI.ArkUI.Full 73 74**参数：** 75 76| 参数名 | 类型 | 必填 | 说明 | 77| ------ | ------------------------------------------------------------ | ---- | ------------------------------ | 78| value | number \| string \| [Resource](ts-types.md#resource) | 是 | 填充区域透明度。<br/>默认值：1 | 79 80### stroke 81 82stroke(value: ResourceColor) 83 84设置边框颜色，不设置时，默认没有边框。异常值不会绘制边框。 85 86**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 87 88**系统能力：** SystemCapability.ArkUI.ArkUI.Full 89 90**参数：** 91 92| 参数名 | 类型 | 必填 | 说明 | 93| ------ | ------------------------------------------ | ---- | ---------- | 94| value | [ResourceColor](ts-types.md#resourcecolor) | 是 | 边框颜色。 | 95 96### strokeDashArray 97 98strokeDashArray(value: Array<any>) 99 100设置边框间隙。异常值按照默认值处理。 101 102**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 103 104**系统能力：** SystemCapability.ArkUI.ArkUI.Full 105 106**参数：** 107 108| 参数名 | 类型 | 必填 | 说明 | 109| ------ | ---------------- | ---- | ------------------------- | 110| value | Array<any> | 是 | 边框间隙。<br/>默认值：[]<br/>默认单位：vp | 111 112### strokeDashOffset 113 114strokeDashOffset(value: number | string) 115 116设置边框绘制起点的偏移量。异常值按照默认值处理。 117 118**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 119 120**系统能力：** SystemCapability.ArkUI.ArkUI.Full 121 122**参数：** 123 124| 参数名 | 类型 | 必填 | 说明 | 125| ------ | -------------------------- | ---- | ------------------------------------ | 126| value | number \| string | 是 | 边框绘制起点的偏移量。<br/>默认值：0<br/>默认单位：vp | 127 128### strokeLineCap 129 130strokeLineCap(value: LineCapStyle) 131 132设置边框端点绘制样式。 133 134**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 135 136**系统能力：** SystemCapability.ArkUI.ArkUI.Full 137 138**参数：** 139 140| 参数名 | 类型 | 必填 | 说明 | 141| ------ | ------------------------------------------------- | ---- | ------------------------------------------------ | 142| value | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | 是 | 边框端点绘制样式。<br/>默认值：LineCapStyle.Butt | 143 144### strokeLineJoin 145 146strokeLineJoin(value: LineJoinStyle) 147 148设置边框拐角绘制样式。Circle组件无法形成拐角，该属性设置无效。 149 150**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 151 152**系统能力：** SystemCapability.ArkUI.ArkUI.Full 153 154**参数：** 155 156| 参数名 | 类型 | 必填 | 说明 | 157| ------ | --------------------------------------------------- | ---- | -------------------------------------------------- | 158| value | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | 是 | 边框拐角绘制样式。<br/>默认值：LineJoinStyle.Miter | 159 160### strokeMiterLimit 161 162strokeMiterLimit(value: number | string) 163 164设置斜接长度与边框宽度比值的极限值。Circle组件无法设置尖角图形，该属性设置无效。 165 166**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 167 168**系统能力：** SystemCapability.ArkUI.ArkUI.Full 169 170**参数：** 171 172| 参数名 | 类型 | 必填 | 说明 | 173| ------ | -------------------------- | ---- | ---------------------------------------------- | 174| value | number \| string | 是 | 斜接长度与边框宽度比值的极限值。<br/>默认值：4 | 175 176### strokeOpacity 177 178strokeOpacity(value: number | string | Resource) 179 180设置边框透明度。该属性的取值范围是[0.0, 1.0]，若给定值小于0.0，则取值为0.0；若给定值大于1.0，则取值为1.0，其余异常值按1.0处理 。 181 182**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 183 184**系统能力：** SystemCapability.ArkUI.ArkUI.Full 185 186**参数：** 187 188| 参数名 | 类型 | 必填 | 说明 | 189| ------ | ------------------------------------------------------------ | ---- | -------------------------- | 190| value | number \| string \| [Resource](ts-types.md#resource) | 是 | 边框透明度。<br/>默认值：1 | 191 192### strokeWidth 193 194strokeWidth(value: Length) 195 196设置边框宽度。该属性若为string类型, 暂不支持百分比，百分比按照1px处理。 197 198**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 199 200**系统能力：** SystemCapability.ArkUI.ArkUI.Full 201 202**参数：** 203 204| 参数名 | 类型 | 必填 | 说明 | 205| ------ | ---------------------------- | ---- | ------------------------ | 206| value | [Length](ts-types.md#length) | 是 | 边框宽度。<br/>默认值：1<br/>默认单位：vp | 207 208### antiAlias 209 210antiAlias(value: boolean) 211 212设置是否开启抗锯齿效果。 213 214**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 215 216**系统能力：** SystemCapability.ArkUI.ArkUI.Full 217 218**参数：** 219 220| 参数名 | 类型 | 必填 | 说明 | 221| ------ | ------- | ---- | ------------------------------------- | 222| value | boolean | 是 | 是否开启抗锯齿效果。<br/>默认值：true | 223 224## 示例 225 226使用fillOpacity、stroke、strokeDashArray分别绘制圆的透明度、边框颜色、边框间隙。 227 228```ts 229// xxx.ets 230@Entry 231@Component 232struct CircleExample { 233 build() { 234 Column({ space: 10 }) { 235 // 绘制一个直径为150的圆 236 Circle({ width: 150, height: 150 }) 237 // 绘制一个直径为150、线条为红色虚线的圆环（宽高设置不一致时以短边为直径） 238 Circle() 239 .width(150) 240 .height(200) 241 .fillOpacity(0) 242 .strokeWidth(3) 243 .stroke(Color.Red) 244 .strokeDashArray([1, 2]) 245 }.width('100%') 246 } 247} 248``` 249 250 251
