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