1# Polygon 2 3The **Polygon** component is used to draw a polygon. 4 5> **NOTE** 6> 7> This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version. 8 9 10## Child Components 11 12Not supported 13 14 15## APIs 16 17Polygon(options?: PolygonOptions) 18 19**Widget capability**: This API can be used in ArkTS widgets since API version 9. 20 21**Atomic service API**: This API can be used in atomic services since API version 11. 22 23**System capability**: SystemCapability.ArkUI.ArkUI.Full 24 25**Parameters** 26 27| Name| Type| Mandatory| Description| 28| -------- | -------- | -------- | -------- | 29| options | [PolygonOptions](ts-drawing-components-polygon.md#polygonoptions14) | No| Options for drawing a polygon.| 30 31## PolygonOptions<sup>14+</sup> 32Describes the options for drawing a polygon. 33 34**Widget capability**: This API can be used in ArkTS widgets since API version 14. 35 36**Atomic service API**: This API can be used in atomic services since API version 14. 37 38**System capability**: SystemCapability.ArkUI.ArkUI.Full 39 40| Name| Type| Mandatory| Description| 41| -------- | -------- | -------- | -------- | 42| width | string \| number | No| Width.<br>Default value: **0**<br>Default unit: vp<br>An invalid value is handled as the default value.| 43| height | string \| number | No| Height.<br>Default value: **0**<br>Default unit: vp<br>An invalid value is handled as the default value.| 44 45## Attributes 46 47In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. 48 49### points 50 51points(value: Array<Point>) 52 53Sets the vertex coordinates of the polygon. An invalid value is handled as the default value. 54 55**Widget capability**: This API can be used in ArkTS widgets since API version 9. 56 57**Atomic service API**: This API can be used in atomic services since API version 11. 58 59**System capability**: SystemCapability.ArkUI.ArkUI.Full 60 61**Parameters** 62 63| Name| Type | Mandatory| Description | 64| ------ | ------------------------------------------------------------ | ---- | ------------------------------------- | 65| value | Array<[Point](ts-drawing-components-polyline.md#point)> | Yes | Vertex coordinates of the polygon.<br>Default value: **[]**<br>Default unit: vp| 66 67### fill 68 69fill(value: ResourceColor) 70 71Sets the color of the fill area. An invalid value is handled as the default value. If this attribute and the universal attribute **foregroundColor** are both set, whichever is set later takes effect. 72 73**Widget capability**: This API can be used in ArkTS widgets since API version 9. 74 75**Atomic service API**: This API can be used in atomic services since API version 11. 76 77**System capability**: SystemCapability.ArkUI.ArkUI.Full 78 79**Parameters** 80 81| Name| Type | Mandatory| Description | 82| ------ | ------------------------------------------ | ---- | -------------------------------------- | 83| value | [ResourceColor](ts-types.md#resourcecolor) | Yes | Color of the fill area.<br>Default value: **Color.Black**| 84 85### fillOpacity 86 87fillOpacity(value: number | string | Resource) 88 89Sets the opacity of the fill area. The value range is [0.0, 1.0]. A value less than 0.0 evaluates to the value **0.0**. A value greater than 1.0 evaluates to the value **1.0**. Any other value evaluates to the value **1.0**. 90 91**Widget capability**: This API can be used in ArkTS widgets since API version 9. 92 93**Atomic service API**: This API can be used in atomic services since API version 11. 94 95**System capability**: SystemCapability.ArkUI.ArkUI.Full 96 97**Parameters** 98 99| Name| Type | Mandatory| Description | 100| ------ | ------------------------------------------------------------ | ---- | ------------------------------ | 101| value | number \| string \| [Resource](ts-types.md#resource) | Yes | Opacity of the fill area.<br>Default value: **1**| 102 103### stroke 104 105stroke(value: ResourceColor) 106 107Sets the stroke color. If this attribute is not set, the component does not have any stroke. If the value is invalid, no stroke will be drawn. 108 109**Widget capability**: This API can be used in ArkTS widgets since API version 9. 110 111**Atomic service API**: This API can be used in atomic services since API version 11. 112 113**System capability**: SystemCapability.ArkUI.ArkUI.Full 114 115**Parameters** 116 117| Name| Type | Mandatory| Description | 118| ------ | ------------------------------------------ | ---- | ---------- | 119| value | [ResourceColor](ts-types.md#resourcecolor) | Yes | Stroke color.| 120 121### strokeDashArray 122 123strokeDashArray(value: Array<any>) 124 125Sets the stroke dashes. An invalid value is handled as the default value. 126 127**Widget capability**: This API can be used in ArkTS widgets since API version 9. 128 129**Atomic service API**: This API can be used in atomic services since API version 11. 130 131**System capability**: SystemCapability.ArkUI.ArkUI.Full 132 133**Parameters** 134 135| Name| Type | Mandatory| Description | 136| ------ | ---------------- | ---- | ------------------------- | 137| value | Array<any> | Yes | Stroke dashes.<br>Default value: **[]**<br>Default unit: vp| 138 139### strokeDashOffset 140 141strokeDashOffset(value: number | string) 142 143Sets the offset of the start point for drawing the stroke. An invalid value is handled as the default value. 144 145**Widget capability**: This API can be used in ArkTS widgets since API version 9. 146 147**Atomic service API**: This API can be used in atomic services since API version 11. 148 149**System capability**: SystemCapability.ArkUI.ArkUI.Full 150 151**Parameters** 152 153| Name| Type | Mandatory| Description | 154| ------ | -------------------------- | ---- | ------------------------------------ | 155| value | number \| string | Yes | Offset of the start point for drawing the stroke.<br>Default value: **0**<br>Default unit: vp| 156 157### strokeLineCap 158 159strokeLineCap(value: LineCapStyle) 160 161Sets the cap style of the stroke. 162 163**Widget capability**: This API can be used in ArkTS widgets since API version 9. 164 165**Atomic service API**: This API can be used in atomic services since API version 11. 166 167**System capability**: SystemCapability.ArkUI.ArkUI.Full 168 169**Parameters** 170 171| Name| Type | Mandatory| Description | 172| ------ | ------------------------------------------------- | ---- | ------------------------------------------------ | 173| value | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | Yes | Cap style of the stroke.<br>Default value: **LineCapStyle.Butt**| 174 175### strokeLineJoin 176 177strokeLineJoin(value: LineJoinStyle) 178 179Sets the join style of the stroke. 180 181**Widget capability**: This API can be used in ArkTS widgets since API version 9. 182 183**Atomic service API**: This API can be used in atomic services since API version 11. 184 185**System capability**: SystemCapability.ArkUI.ArkUI.Full 186 187**Parameters** 188 189| Name| Type | Mandatory| Description | 190| ------ | --------------------------------------------------- | ---- | -------------------------------------------------- | 191| value | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | Yes | Join style of the stroke.<br>Default value: **LineJoinStyle.Miter**| 192 193### strokeMiterLimit 194 195strokeMiterLimit(value: number | string) 196 197Sets the limit on the ratio of the miter length to the value of **strokeWidth** used to draw a miter join. The miter length indicates the distance from the outer tip to the inner corner of the miter. This attribute works only when **strokeLineJoin** is set to **LineJoinStyle.Miter**. 198 199The value must be greater than or equal to 1.0. If the value is in the [0, 1) range, the value **1.0** will be used. In other cases, the default value will be used. 200 201**Widget capability**: This API can be used in ArkTS widgets since API version 9. 202 203**Atomic service API**: This API can be used in atomic services since API version 11. 204 205**System capability**: SystemCapability.ArkUI.ArkUI.Full 206 207**Parameters** 208 209| Name| Type | Mandatory| Description | 210| ------ | -------------------------- | ---- | ---------------------------------------------- | 211| value | number \| string | Yes | Limit on the ratio of the miter length to the value of **strokeWidth** used to draw a miter join.<br>Default value: **4**| 212 213### strokeOpacity 214 215strokeOpacity(value: number | string | Resource) 216 217Sets the stroke opacity. The value range is [0.0, 1.0]. A value less than 0.0 evaluates to the value **0.0**. A value greater than 1.0 evaluates to the value **1.0**. Any other value evaluates to the value **1.0**. 218 219**Widget capability**: This API can be used in ArkTS widgets since API version 9. 220 221**Atomic service API**: This API can be used in atomic services since API version 11. 222 223**System capability**: SystemCapability.ArkUI.ArkUI.Full 224 225**Parameters** 226 227| Name| Type | Mandatory| Description | 228| ------ | ------------------------------------------------------------ | ---- | -------------------------- | 229| value | number \| string \| [Resource](ts-types.md#resource) | Yes | Stroke opacity.<br>Default value: **1**| 230 231### strokeWidth 232 233strokeWidth(value: Length) 234 235Sets the stroke width. If of the string type, this attribute cannot be set in percentage. A percentage is processed as 1 px. 236 237**Widget capability**: This API can be used in ArkTS widgets since API version 9. 238 239**Atomic service API**: This API can be used in atomic services since API version 11. 240 241**System capability**: SystemCapability.ArkUI.ArkUI.Full 242 243**Parameters** 244 245| Name| Type | Mandatory| Description | 246| ------ | ---------------------------- | ---- | ------------------------ | 247| value | [Length](ts-types.md#length) | Yes | Stroke width.<br>Default value: **1**<br>Default unit: vp| 248 249### antiAlias 250 251antiAlias(value: boolean) 252 253Specifies whether anti-aliasing is enabled. 254 255**Widget capability**: This API can be used in ArkTS widgets since API version 9. 256 257**Atomic service API**: This API can be used in atomic services since API version 11. 258 259**System capability**: SystemCapability.ArkUI.ArkUI.Full 260 261**Parameters** 262 263| Name| Type | Mandatory| Description | 264| ------ | ------- | ---- | ------------------------------------- | 265| value | boolean | Yes | Whether anti-aliasing is enabled.<br>Default value: **true**| 266 267## Point 268 269Describes the coordinates of a point. 270 271**Widget capability**: This API can be used in ArkTS widgets since API version 9. 272 273| Name | Type | Description | 274| --------- | -------------------- | ------------------------------------------------------------ | 275| Point | [number, number] | Coordinates of a point. The first parameter is the x-coordinate, and the second parameter is the y-coordinate (relative coordinate).| 276 277 278## Example 279 280This example demonstrates how to use **points**, **fill**, **fillOpacity**, and **stroke** to draw polygons with specific coordinates, fill colors, opacity, and stroke colors. 281 282```ts 283// xxx.ets 284@Entry 285@Component 286struct PolygonExample { 287 build() { 288 Column({ space: 10 }) { 289 // Draw a triangle in a 100 x 100 rectangle. The start point is (0, 0), the end point is (100, 0), and the passing point is (50, 100). 290 Polygon({ width: 100, height: 100 }) 291 .points([[0, 0], [50, 100], [100, 0]]) 292 .fill(Color.Green) 293 // Draw a quadrilateral in a 100 x 100 rectangle. The start point is (0, 0), the end point is (100, 0), and the passing points are (0, 100) and (100, 100). 294 Polygon().width(100).height(100) 295 .points([[0, 0], [0, 100], [100, 100], [100, 0]]) 296 .fillOpacity(0) 297 .strokeWidth(5) 298 .stroke(Color.Blue) 299 // Draw a pentagon in a 100 x 100 rectangle. The start point is (50, 0), the end point is (100, 50), and the passing points are (0, 50), (20, 100), and (80, 100). 300 Polygon().width(100).height(100) 301 .points([[50, 0], [0, 50], [20, 100], [80, 100], [100, 50]]) 302 .fill(Color.Red) 303 .fillOpacity(0.6) 304 }.width('100%').margin({ top: 10 }) 305 } 306} 307``` 308 309 310
