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#polygonoptions18) | No| Options for drawing a polygon.| 30 31## PolygonOptions<sup>18+</sup> 32Describes the options for drawing a polygon. 33 34**Widget capability**: This API can be used in ArkTS widgets since API version 18. 35 36**Atomic service API**: This API can be used in atomic services since API version 18. 37 38**System capability**: SystemCapability.ArkUI.ArkUI.Full 39 40| Name| Type| Mandatory| Description| 41| -------- | -------- | -------- | -------- | 42| width | string \| number | No| Width. The value must be greater than or equal to 0.<br>Default value: **0**.<br>Default unit: vp.<br>An invalid value is handled as the default value.| 43| height | string \| number | No| Height. The value must be greater than or equal to 0.<br>Default value: **0**.<br>Default unit: vp.<br>Invalid values are treated as the default value.| 44 45## Attributes 46 47In addition to the [universal attributes](ts-component-general-attributes.md), the following attributes are supported. 48 49### points 50 51points(value: Array<Point>) 52 53Sets the vertex coordinates of the polygon. Invalid values are treated 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. Invalid values are treated 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 89Opacity of the fill area. 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 value is treated as **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 125Stroke dashes. The value must be greater than or equal to 0. Invalid values are treated 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. Invalid values are treated 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 217Stroke 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 this attribute is of the string type, percentage values are not supported and will be treated 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. The value must be greater than or equal to 0.<br>Default value: **1**.<br>Default unit: vp.<br>Invalid values are treated as the default value.| 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>**true**: Anti-aliasing is enabled.<br>**false**: Anti-aliasing is disabled.<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() 295 .width(100) 296 .height(100) 297 .points([[0, 0], [0, 100], [100, 100], [100, 0]]) 298 .fillOpacity(0) 299 .strokeWidth(5) 300 .stroke(Color.Blue) 301 // 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). 302 Polygon() 303 .width(100) 304 .height(100) 305 .points([[50, 0], [0, 50], [20, 100], [80, 100], [100, 50]]) 306 .fill(Color.Red) 307 .fillOpacity(0.6) 308 }.width('100%').margin({ top: 10 }) 309 } 310} 311``` 312 313 314
