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