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