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