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(value?: {width?: string | number, height?: string | number})
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| width | string \| number | No| Width.<br>Default value: **0**<br>An invalid value is handled as the default value.|
30| height | string \| number | No| Height.<br>Default value: **0**<br>An invalid value is handled as the default value.|
31
32## Attributes
33
34In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
35
36### points
37
38points(value: Array&lt;Point&gt;)
39
40Sets the vertex coordinates of the polygon. An invalid value is handled as the default value.
41
42**Widget capability**: This API can be used in ArkTS widgets since API version 9.
43
44**Atomic service API**: This API can be used in atomic services since API version 11.
45
46**System capability**: SystemCapability.ArkUI.ArkUI.Full
47
48**Parameters**
49
50| Name| Type                                                        | Mandatory| Description                                 |
51| ------ | ------------------------------------------------------------ | ---- | ------------------------------------- |
52| value  | Array&lt;[Point](ts-drawing-components-polyline.md#point)&gt; | Yes  | Vertex coordinates of the polygon.<br>Default value: **[]**|
53
54### fill
55
56fill(value: ResourceColor)
57
58Sets the color of the fill area. An invalid value is handled as the default value.
59
60**Widget capability**: This API can be used in ArkTS widgets since API version 9.
61
62**Atomic service API**: This API can be used in atomic services since API version 11.
63
64**System capability**: SystemCapability.ArkUI.ArkUI.Full
65
66**Parameters**
67
68| Name| Type                                      | Mandatory| Description                                  |
69| ------ | ------------------------------------------ | ---- | -------------------------------------- |
70| value  | [ResourceColor](ts-types.md#resourcecolor) | Yes  | Color of the fill area.<br>Default value: **Color.Black**|
71
72### fillOpacity
73
74fillOpacity(value: number | string | Resource)
75
76Sets 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**.
77
78**Widget capability**: This API can be used in ArkTS widgets since API version 9.
79
80**Atomic service API**: This API can be used in atomic services since API version 11.
81
82**System capability**: SystemCapability.ArkUI.ArkUI.Full
83
84**Parameters**
85
86| Name| Type                                                        | Mandatory| Description                          |
87| ------ | ------------------------------------------------------------ | ---- | ------------------------------ |
88| value  | number \| string \| [Resource](ts-types.md#resource) | Yes  | Opacity of the fill area.<br>Default value: **1**|
89
90### stroke
91
92stroke(value: ResourceColor)
93
94Sets 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.
95
96**Widget capability**: This API can be used in ArkTS widgets since API version 9.
97
98**Atomic service API**: This API can be used in atomic services since API version 11.
99
100**System capability**: SystemCapability.ArkUI.ArkUI.Full
101
102**Parameters**
103
104| Name| Type                                      | Mandatory| Description      |
105| ------ | ------------------------------------------ | ---- | ---------- |
106| value  | [ResourceColor](ts-types.md#resourcecolor) | Yes  | Stroke color.|
107
108### strokeDashArray
109
110strokeDashArray(value: Array&lt;any&gt;)
111
112Sets the stroke dashes. An invalid value is handled as the default value.
113
114**Widget capability**: This API can be used in ArkTS widgets since API version 9.
115
116**Atomic service API**: This API can be used in atomic services since API version 11.
117
118**System capability**: SystemCapability.ArkUI.ArkUI.Full
119
120**Parameters**
121
122| Name| Type            | Mandatory| Description                     |
123| ------ | ---------------- | ---- | ------------------------- |
124| value  | Array&lt;any&gt; | Yes  | Stroke dashes.<br>Default value: **[]**|
125
126### strokeDashOffset
127
128strokeDashOffset(value: number | string)
129
130Sets the offset of the start point for drawing the stroke. An invalid value is handled as the default value.
131
132**Widget capability**: This API can be used in ArkTS widgets since API version 9.
133
134**Atomic service API**: This API can be used in atomic services since API version 11.
135
136**System capability**: SystemCapability.ArkUI.ArkUI.Full
137
138**Parameters**
139
140| Name| Type                      | Mandatory| Description                                |
141| ------ | -------------------------- | ---- | ------------------------------------ |
142| value  | number \| string | Yes  | Offset of the start point for drawing the stroke.<br>Default value: **0**|
143
144### strokeLineCap
145
146strokeLineCap(value: LineCapStyle)
147
148Sets the cap style of the stroke.
149
150**Widget capability**: This API can be used in ArkTS widgets since API version 9.
151
152**Atomic service API**: This API can be used in atomic services since API version 11.
153
154**System capability**: SystemCapability.ArkUI.ArkUI.Full
155
156**Parameters**
157
158| Name| Type                                             | Mandatory| Description                                            |
159| ------ | ------------------------------------------------- | ---- | ------------------------------------------------ |
160| value  | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | Yes  | Cap style of the stroke.<br>Default value: **LineCapStyle.Butt**|
161
162### strokeLineJoin
163
164strokeLineJoin(value: LineJoinStyle)
165
166Sets the join style of the stroke.
167
168**Widget capability**: This API can be used in ArkTS widgets since API version 9.
169
170**Atomic service API**: This API can be used in atomic services since API version 11.
171
172**System capability**: SystemCapability.ArkUI.ArkUI.Full
173
174**Parameters**
175
176| Name| Type                                               | Mandatory| Description                                              |
177| ------ | --------------------------------------------------- | ---- | -------------------------------------------------- |
178| value  | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | Yes  | Join style of the stroke.<br>Default value: **LineJoinStyle.Miter**|
179
180### strokeMiterLimit
181
182strokeMiterLimit(value: number | string)
183
184Sets 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**.
185
186The 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.
187
188**Widget capability**: This API can be used in ArkTS widgets since API version 9.
189
190**Atomic service API**: This API can be used in atomic services since API version 11.
191
192**System capability**: SystemCapability.ArkUI.ArkUI.Full
193
194**Parameters**
195
196| Name| Type                      | Mandatory| Description                                          |
197| ------ | -------------------------- | ---- | ---------------------------------------------- |
198| 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**|
199
200### strokeOpacity
201
202strokeOpacity(value: number | string | Resource)
203
204Sets 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**.
205
206**Widget capability**: This API can be used in ArkTS widgets since API version 9.
207
208**Atomic service API**: This API can be used in atomic services since API version 11.
209
210**System capability**: SystemCapability.ArkUI.ArkUI.Full
211
212**Parameters**
213
214| Name| Type                                                        | Mandatory| Description                      |
215| ------ | ------------------------------------------------------------ | ---- | -------------------------- |
216| value  | number \| string \| [Resource](ts-types.md#resource) | Yes  | Stroke opacity.<br>Default value: **1**|
217
218### strokeWidth
219
220strokeWidth(value: Length)
221
222Sets the stroke width. If of the string type, this attribute cannot be set in percentage. A percentage is processed as 1 px.
223
224**Widget capability**: This API can be used in ArkTS widgets since API version 9.
225
226**Atomic service API**: This API can be used in atomic services since API version 11.
227
228**System capability**: SystemCapability.ArkUI.ArkUI.Full
229
230**Parameters**
231
232| Name| Type                        | Mandatory| Description                    |
233| ------ | ---------------------------- | ---- | ------------------------ |
234| value  | [Length](ts-types.md#length) | Yes  | Stroke width.<br>Default value: **1**|
235
236### antiAlias
237
238antiAlias(value: boolean)
239
240Specifies whether anti-aliasing is enabled.
241
242**Widget capability**: This API can be used in ArkTS widgets since API version 9.
243
244**Atomic service API**: This API can be used in atomic services since API version 11.
245
246**System capability**: SystemCapability.ArkUI.ArkUI.Full
247
248**Parameters**
249
250| Name| Type   | Mandatory| Description                                 |
251| ------ | ------- | ---- | ------------------------------------- |
252| value  | boolean | Yes  | Whether anti-aliasing is enabled.<br>Default value: **true**|
253
254## Point
255
256Describes the coordinates of a point.
257
258**Widget capability**: This API can be used in ArkTS widgets since API version 9.
259
260| Name     | Type            | Description                                                        |
261| --------- | -------------------- | ------------------------------------------------------------ |
262| Point | [number, number] | Coordinates of a point. The first parameter is the x-coordinate, and the second parameter is the y-coordinate (relative coordinate).|
263
264
265## Example
266
267```ts
268// xxx.ets
269@Entry
270@Component
271struct PolygonExample {
272  build() {
273    Column({ space: 10 }) {
274      // 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).
275      Polygon({ width: 100, height: 100 })
276        .points([[0, 0], [50, 100], [100, 0]])
277        .fill(Color.Green)
278      // 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).
279      Polygon().width(100).height(100)
280        .points([[0, 0], [0, 100], [100, 100], [100, 0]])
281        .fillOpacity(0)
282        .strokeWidth(5)
283        .stroke(Color.Blue)
284      // 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).
285      Polygon().width(100).height(100)
286        .points([[50, 0], [0, 50], [20, 100], [80, 100], [100, 50]])
287        .fill(Color.Red)
288        .fillOpacity(0.6)
289    }.width('100%').margin({ top: 10 })
290  }
291}
292```
293
294![en-us_image_0000001174582856](figures/en-us_image_0000001174582856.png)
295