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