1# Line
2
3The **\<Line>** component is used to draw a straight line.
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## Child Components
10
11Not supported
12
13
14## APIs
15
16Line(value?: {width?: string | number, height?: string | number})
17
18**Widget capability**: This API can be used in ArkTS widgets since API version 9.
19
20**Parameters**
21
22| Name| Type| Mandatory| Description|
23| -------- | -------- | -------- | -------- |
24| width | string \| number | No| Width.<br>**NOTE**<br>If the value is invalid or the default value is used, the width required for the content is used.|
25| height | string \| number | No| Height.<br>**NOTE**<br>If the value is invalid or the default value is used, the height required for the content is used.|
26
27## Attributes
28
29In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
30
31### startPoint
32
33startPoint(value: Array&lt;any&gt;)
34
35Sets the coordinates (relative coordinates) of the start point of the line. An invalid value is handled as the default value.
36
37**Widget capability**: This API can be used in ArkTS widgets since API version 9.
38
39**System capability**: SystemCapability.ArkUI.ArkUI.Full
40
41**Parameters**
42
43| Name| Type                                     | Mandatory| Description                                                        |
44| ------ | ----------------------------------------- | ---- | ------------------------------------------------------------ |
45| value  | Array&lt;[Length](ts-types.md#length)&gt; | Yes  | Coordinates (relative coordinates) of the start point of the line, in vp.<br>Default value: **[0, 0]**|
46
47### endPoint
48
49endPoint(value: Array&lt;any&gt;)
50
51Sets the coordinates (relative coordinates) of the end point of the line. An invalid value is handled as the default value.
52
53**Widget capability**: This API can be used in ArkTS widgets since API version 9.
54
55**System capability**: SystemCapability.ArkUI.ArkUI.Full
56
57**Parameters**
58
59| Name| Type                                     | Mandatory| Description                                                        |
60| ------ | ----------------------------------------- | ---- | ------------------------------------------------------------ |
61| value  | Array&lt;[Length](ts-types.md#length)&gt; | Yes  | Coordinates (relative coordinates) of the end point of the line, in vp.<br>Default value: **[0, 0]**|
62
63### fill
64
65fill(value: ResourceColor)
66
67Sets the color of the fill area. This attribute does not take effect because the **\<Line>** component cannot be used to draw a closed shape.
68
69**Widget capability**: This API can be used in ArkTS widgets since API version 9.
70
71**System capability**: SystemCapability.ArkUI.ArkUI.Full
72
73**Parameters**
74
75| Name| Type                                      | Mandatory| Description                                  |
76| ------ | ------------------------------------------ | ---- | -------------------------------------- |
77| value  | [ResourceColor](ts-types.md#resourcecolor) | Yes  | Color of the fill area.<br>Default value: **Color.Black**|
78
79### fillOpacity
80
81fillOpacity(value: number | string | Resource)
82
83Sets the opacity of the fill area. This attribute does not take effect because the **\<Line>** component cannot be used to draw a closed shape.
84
85**Widget capability**: This API can be used in ArkTS widgets since API version 9.
86
87**System capability**: SystemCapability.ArkUI.ArkUI.Full
88
89**Parameters**
90
91| Name| Type                                                        | Mandatory| Description                          |
92| ------ | ------------------------------------------------------------ | ---- | ------------------------------ |
93| value  | number \| string \| [Resource](ts-types.md#resource) | Yes  | Opacity of the fill area.<br>Default value: **1**|
94
95### stroke
96
97stroke(value: ResourceColor)
98
99Sets 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.
100
101**Widget capability**: This API can be used in ArkTS widgets since API version 9.
102
103**System capability**: SystemCapability.ArkUI.ArkUI.Full
104
105**Parameters**
106
107| Name| Type                                      | Mandatory| Description      |
108| ------ | ------------------------------------------ | ---- | ---------- |
109| value  | [ResourceColor](ts-types.md#resourcecolor) | Yes  | Stroke color.|
110
111### strokeDashArray
112
113strokeDashArray(value: Array&lt;any&gt;)
114
115Sets stroke dashes. Line segments may overlap when they intersect. An invalid value is handled as the default value.
116
117**Widget capability**: This API can be used in ArkTS widgets since API version 9.
118
119**System capability**: SystemCapability.ArkUI.ArkUI.Full
120
121**Parameters**
122
123| Name| Type                                     | Mandatory| Description                     |
124| ------ | ----------------------------------------- | ---- | ------------------------- |
125| value  | Array&lt;[Length](ts-types.md#length)&gt; | Yes  | Stroke dashes.<br>Default value: **[]**|
126
127### strokeDashOffset
128
129strokeDashOffset(value: number | string)
130
131Sets the offset of the start point for drawing the stroke.
132
133**Widget capability**: This API can be used in ArkTS widgets since API version 9.
134
135**System capability**: SystemCapability.ArkUI.ArkUI.Full
136
137**Parameters**
138
139| Name| Type                      | Mandatory| Description                                |
140| ------ | -------------------------- | ---- | ------------------------------------ |
141| value  | number \| string | Yes  | Offset of the start point for drawing the stroke.<br>Default value: **0**|
142
143### strokeLineCap
144
145strokeLineCap(value: LineCapStyle)
146
147Sets the cap style of the stroke.
148
149**Widget capability**: This API can be used in ArkTS widgets since API version 9.
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. This attribute does not work for the **\<Line>** component, which does not have corners.
164
165**Widget capability**: This API can be used in ArkTS widgets since API version 9.
166
167**System capability**: SystemCapability.ArkUI.ArkUI.Full
168
169**Parameters**
170
171| Name| Type                                               | Mandatory| Description                                              |
172| ------ | --------------------------------------------------- | ---- | -------------------------------------------------- |
173| value  | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | Yes  | Join style of the stroke.<br>Default value: **LineJoinStyle.Miter**|
174
175### strokeMiterLimit
176
177strokeMiterLimit(value: number | string)
178
179Limit value when the sharp angle is drawn as a miter. This attribute does not take effect because the **\<Line>** component cannot be used to draw a shape with a sharp angle.
180
181**Widget capability**: This API can be used in ArkTS widgets since API version 9.
182
183**System capability**: SystemCapability.ArkUI.ArkUI.Full
184
185**Parameters**
186
187| Name| Type                      | Mandatory| Description                                  |
188| ------ | -------------------------- | ---- | -------------------------------------- |
189| value  | number \| string | Yes  | Limit value when the sharp angle is drawn as a miter.<br>Default value: **4**|
190
191### strokeOpacity
192
193strokeOpacity(value: number | string | Resource)
194
195Sets 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**.
196
197**Widget capability**: This API can be used in ArkTS widgets since API version 9.
198
199**System capability**: SystemCapability.ArkUI.ArkUI.Full
200
201**Parameters**
202
203| Name| Type                                                        | Mandatory| Description                      |
204| ------ | ------------------------------------------------------------ | ---- | -------------------------- |
205| value  | number \| string \| [Resource](ts-types.md#resource) | Yes  | Stroke opacity.<br>Default value: **1**|
206
207### strokeWidth
208
209strokeWidth(value: Length)
210
211Sets the stroke width. If of the string type, this attribute cannot be set in percentage. A percentage is processed as 1px.
212
213**Widget capability**: This API can be used in ArkTS widgets since API version 9.
214
215**System capability**: SystemCapability.ArkUI.ArkUI.Full
216
217**Parameters**
218
219| Name| Type                        | Mandatory| Description                    |
220| ------ | ---------------------------- | ---- | ------------------------ |
221| value  | [Length](ts-types.md#length) | Yes  | Stroke width.<br>Default value: **1**|
222
223### antiAlias
224
225antiAlias(value: boolean)
226
227Specifies whether anti-aliasing is enabled.
228
229**Widget capability**: This API can be used in ArkTS widgets since API version 9.
230
231**System capability**: SystemCapability.ArkUI.ArkUI.Full
232
233**Parameters**
234
235| Name| Type   | Mandatory| Description                                 |
236| ------ | ------- | ---- | ------------------------------------- |
237| value  | boolean | Yes  | Whether anti-aliasing is enabled.<br>Default value: **true**|
238
239## Example
240
241### Example 1
242
243```ts
244// xxx.ets
245@Entry
246@Component
247struct LineExample {
248  build() {
249    Column({ space: 10 }) {
250      // The coordinates of the start and end points of the line are determined relative to the coordinates of the drawing area of the <Line> component.
251      Line()
252        .width(200)
253        .height(150)
254        .startPoint([0, 0])
255        .endPoint([50, 100])
256        .stroke(Color.Black)
257        .backgroundColor('#F5F5F5')
258      Line()
259        .width(200)
260        .height(150)
261        .startPoint([50, 50])
262        .endPoint([150, 150])
263        .strokeWidth(5)
264        .stroke(Color.Orange)
265        .strokeOpacity(0.5)
266        .backgroundColor('#F5F5F5')
267      // strokeDashOffset is used to define the offset when the associated strokeDashArray array is rendered.
268      Line()
269        .width(200)
270        .height(150)
271        .startPoint([0, 0])
272        .endPoint([100, 100])
273        .stroke(Color.Black)
274        .strokeWidth(3)
275        .strokeDashArray([10, 3])
276        .strokeDashOffset(5)
277        .backgroundColor('#F5F5F5')
278      // If the coordinates of a point are beyond the width and height range of the <Line> component, the line will exceed the drawing area.
279      Line()
280        .width(50)
281        .height(50)
282        .startPoint([0, 0])
283        .endPoint([100, 100])
284        .stroke(Color.Black)
285        .strokeWidth(3)
286        .strokeDashArray([10, 3])
287        .backgroundColor('#F5F5F5')
288    }
289  }
290}
291```
292
293![en-us_image_0000001219982725](figures/en-us_image_0000001219982725.png)
294
295### Example 2
296
297```ts
298// xxx.ets
299@Entry
300@Component
301struct LineExample1 {
302  build() {
303    Row({ space: 10 }) {
304      // Set LineCapStyle to Butt.
305      Line()
306        .width(100)
307        .height(200)
308        .startPoint([50, 50])
309        .endPoint([50, 200])
310        .stroke(Color.Black)
311        .strokeWidth(20)
312        .strokeLineCap(LineCapStyle.Butt)
313        .backgroundColor('#F5F5F5').margin(10)
314      // Set LineCapStyle to Round.
315      Line()
316        .width(100)
317        .height(200)
318        .startPoint([50, 50])
319        .endPoint([50, 200])
320        .stroke(Color.Black)
321        .strokeWidth(20)
322        .strokeLineCap(LineCapStyle.Round)
323        .backgroundColor('#F5F5F5')
324      // Set LineCapStyle to Square.
325      Line()
326        .width(100)
327        .height(200)
328        .startPoint([50, 50])
329        .endPoint([50, 200])
330        .stroke(Color.Black)
331        .strokeWidth(20)
332        .strokeLineCap(LineCapStyle.Square)
333        .backgroundColor('#F5F5F5')
334    }
335  }
336}
337```
338
339![en-us_image1_0000001219982725](figures/en-us_image1_0000001219982725.png)
340
341### Example 3
342
343```ts
344// xxx.ets
345@Entry
346@Component
347struct LineExample {
348  build() {
349    Column() {
350      Line()
351        .width(300)
352        .height(30)
353        .startPoint([50, 30])
354        .endPoint([300, 30])
355        .stroke(Color.Black)
356        .strokeWidth(10)
357      // Set the interval for strokeDashArray to 50.
358      Line()
359        .width(300)
360        .height(30)
361        .startPoint([50, 20])
362        .endPoint([300, 20])
363        .stroke(Color.Black)
364        .strokeWidth(10)
365        .strokeDashArray([50])
366      // Set the interval for strokeDashArray to 50, 10.
367      Line()
368        .width(300)
369        .height(30)
370        .startPoint([50, 20])
371        .endPoint([300, 20])
372        .stroke(Color.Black)
373        .strokeWidth(10)
374        .strokeDashArray([50, 10])
375      // Set the interval for strokeDashArray to 50, 10, 20.
376      Line()
377        .width(300)
378        .height(30)
379        .startPoint([50, 20])
380        .endPoint([300, 20])
381        .stroke(Color.Black)
382        .strokeWidth(10)
383        .strokeDashArray([50, 10, 20])
384      // Set the interval for strokeDashArray to 50, 10, 20, 30.
385      Line()
386        .width(300)
387        .height(30)
388        .startPoint([50, 20])
389        .endPoint([300, 20])
390        .stroke(Color.Black)
391        .strokeWidth(10)
392        .strokeDashArray([50, 10, 20, 30])
393
394    }
395  }
396}
397```
398
399![en-us_image2_0000001219982725](figures/en-us_image2_0000001219982725.PNG)
400