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 19Since API version 9, this API is supported in ArkTS widgets. 20 21**Parameters** 22 23| Name| Type| Mandatory| Default Value| Description| 24| -------- | -------- | -------- | -------- | -------- | 25| width | string \| number | No| 0 | Width.| 26| height | string \| number | No| 0 | Height.| 27 28 29## Attributes 30 31In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported. 32 33| Name| Type| Default Value| Description| 34| -------- | -------- | -------- | -------- | 35| points | Array<Point> | [] | List of coordinates that the polyline passes through.<br>Since API version 9, this API is supported in ArkTS widgets.| 36| fill | [ResourceColor](ts-types.md) | Color.Black | Color of the fill area.<br>Since API version 9, this API is supported in ArkTS widgets.| 37| fillOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Opacity of the fill area.<br>Since API version 9, this API is supported in ArkTS widgets.| 38| stroke | [ResourceColor](ts-types.md) | - | Stroke color. If this attribute is not set, the component does not have any stroke.<br>Since API version 9, this API is supported in ArkTS widgets.| 39| strokeDashArray | Array<Length> | [] | Stroke dashes.<br>Since API version 9, this API is supported in ArkTS widgets.| 40| strokeDashOffset | number \| string | 0 | Offset of the start point for drawing the stroke.<br>Since API version 9, this API is supported in ArkTS widgets.| 41| strokeLineCap | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | LineCapStyle.Butt | Cap style of the stroke.<br>Since API version 9, this API is supported in ArkTS widgets.| 42| strokeLineJoin | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | LineJoinStyle.Miter | Join style of the stroke.<br>Since API version 9, this API is supported in ArkTS widgets.| 43| strokeMiterLimit | number \| string | 4 | 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.<br>**NOTE**<br>This attribute must be set to a value greater than or equal to 1 and takes effect when **strokeLineJoin** is set to **LineJoinStyle.Miter**.<br>Since API version 9, this API is supported in ArkTS widgets.| 44| strokeOpacity | number \| string \| [Resource](ts-types.md#resource)| 1 | Stroke opacity.<br>**NOTE**<br>The value range is [0.0, 1.0]. If the set value is less than 0.0, **0.0** will be used. If the set value is greater than 1.0, **1.0** will be used.<br>Since API version 9, this API is supported in ArkTS widgets.| 45| strokeWidth | Length | 1 | Stroke width.<br>Since API version 9, this API is supported in ArkTS widgets.| 46| antiAlias | boolean | true | Whether anti-aliasing is enabled.<br>Since API version 9, this API is supported in ArkTS widgets.| 47 48## Point 49 50Describes the coordinates of a point. 51 52Since API version 9, this API is supported in ArkTS widgets. 53 54| Name | Type | Description | 55| --------- | -------------------- | ------------------------------------------------------------ | 56| Point | [number, number] | Coordinates of a point. The first parameter is the x-coordinate, and the second parameter is the y-coordinate (relative coordinate).| 57 58## Example 59 60```ts 61// xxx.ets 62@Entry 63@Component 64struct PolylineExample { 65 build() { 66 Column({ space: 10 }) { 67 // 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). 68 Polyline({ width: 100, height: 100 }) 69 .points([[0, 0], [20, 60], [100, 100]]) 70 .fillOpacity(0) 71 .stroke(Color.Blue) 72 .strokeWidth(3) 73 // 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). 74 Polyline() 75 .width(100) 76 .height(100) 77 .fillOpacity(0) 78 .stroke(Color.Red) 79 .strokeWidth(8) 80 .points([[20, 0], [0, 100], [100, 90]]) 81 // Set the join style of the stroke to a round corner. 82 .strokeLineJoin(LineJoinStyle.Round) 83 // Set the cap style of the stroke to a half circle. 84 .strokeLineCap(LineCapStyle.Round) 85 }.width('100%') 86 } 87} 88``` 89 90 91
