• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Line
2
3直线绘制组件。
4
5>  **说明：**
6>
7> 该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
8
9## 子组件
10
11无
12
13
14## 接口
15
16Line(value?: {width?: string | number, height?: string | number})
17
18**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。
19
20**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
21
22**系统能力：** SystemCapability.ArkUI.ArkUI.Full
23
24**参数：**
25
26| 参数名 | 类型 | 必填 | 说明
27| -------- | -------- | -------- | -------- |
28| value | {width?: string \| number, height?: string \| number} | 否 | width：宽度，取值范围≥0。<br/>值为异常值或缺省时按照自身内容需要的宽度处理。<br/>默认单位：vp<br/>height：高度，取值范围≥0。<br/>值为异常值或缺省时按照自身内容需要的高度处理。<br/>默认单位：vp |
29
30## 属性
31
32除支持[通用属性](ts-component-general-attributes.md)外，还支持以下属性：
33
34### startPoint
35
36startPoint(value: Array&lt;any&gt;)
37
38设置直线起点坐标点（相对坐标），异常值按照默认值处理。
39
40**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。
41
42**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
43
44**系统能力：** SystemCapability.ArkUI.ArkUI.Full
45
46**参数：**
47
48| 参数名 | 类型                                      | 必填 | 说明                                                         |
49| ------ | ----------------------------------------- | ---- | ------------------------------------------------------------ |
50| value  | Array&lt;[Length](ts-types.md#length)&gt; | 是   | 直线起点坐标点（相对坐标），单位vp。<br/>默认值：[0,&nbsp;0] |
51
52### endPoint
53
54endPoint(value: Array&lt;any&gt;)
55
56设置直线终点坐标点（相对坐标），异常值按照默认值处理。
57
58**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。
59
60**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
61
62**系统能力：** SystemCapability.ArkUI.ArkUI.Full
63
64**参数：**
65
66| 参数名 | 类型                                      | 必填 | 说明                                                         |
67| ------ | ----------------------------------------- | ---- | ------------------------------------------------------------ |
68| value  | Array&lt;[Length](ts-types.md#length)&gt; | 是   | 直线终点坐标点（相对坐标），单位vp。<br/>默认值：[0,&nbsp;0] |
69
70### fill
71
72fill(value: ResourceColor)
73
74设置填充区域颜色。Line组件无法形成闭合区域，该属性设置无效。
75
76**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。
77
78**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
79
80**系统能力：** SystemCapability.ArkUI.ArkUI.Full
81
82**参数：**
83
84| 参数名 | 类型                                       | 必填 | 说明                                   |
85| ------ | ------------------------------------------ | ---- | -------------------------------------- |
86| value  | [ResourceColor](ts-types.md#resourcecolor) | 是   | 填充区域颜色。<br/>默认值：Color.Black |
87
88### fillOpacity
89
90fillOpacity(value: number | string | Resource)
91
92设置填充区域透明度。Line组件无法形成闭合区域，该属性设置无效。
93
94**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。
95
96**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
97
98**系统能力：** SystemCapability.ArkUI.ArkUI.Full
99
100**参数：**
101
102| 参数名 | 类型                                                         | 必填 | 说明                           |
103| ------ | ------------------------------------------------------------ | ---- | ------------------------------ |
104| value  | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 是   | 填充区域透明度。<br/>默认值：1 |
105
106### stroke
107
108stroke(value: ResourceColor)
109
110设置边框颜色，不设置时，默认没有边框。异常值不会绘制边框线条。
111
112**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。
113
114**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
115
116**系统能力：** SystemCapability.ArkUI.ArkUI.Full
117
118**参数：**
119
120| 参数名 | 类型                                       | 必填 | 说明       |
121| ------ | ------------------------------------------ | ---- | ---------- |
122| value  | [ResourceColor](ts-types.md#resourcecolor) | 是   | 边框颜色。 |
123
124### strokeDashArray
125
126strokeDashArray(value: Array&lt;any&gt;)
127
128设置边框间隙。线段相交时可能会出现重叠现象。取值范围≥0，异常值按照默认值处理。
129
130**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。
131
132**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
133
134**系统能力：** SystemCapability.ArkUI.ArkUI.Full
135
136**参数：**
137
138| 参数名 | 类型                                      | 必填 | 说明                      |
139| ------ | ----------------------------------------- | ---- | ------------------------- |
140| value  | Array&lt;[Length](ts-types.md#length)&gt; | 是   | 边框间隙。<br/>默认值：[]<br/>默认单位：vp |
141
142### strokeDashOffset
143
144strokeDashOffset(value: number | string)
145
146设置边框绘制起点的偏移量。
147
148**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。
149
150**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
151
152**系统能力：** SystemCapability.ArkUI.ArkUI.Full
153
154**参数：**
155
156| 参数名 | 类型                       | 必填 | 说明                                 |
157| ------ | -------------------------- | ---- | ------------------------------------ |
158| value  | number&nbsp;\|&nbsp;string | 是   | 边框绘制起点的偏移量。<br/>默认值：0<br/>默认单位：vp |
159
160### strokeLineCap
161
162strokeLineCap(value: LineCapStyle)
163
164设置边框端点绘制样式。
165
166**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。
167
168**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
169
170**系统能力：** SystemCapability.ArkUI.ArkUI.Full
171
172**参数：**
173
174| 参数名 | 类型                                              | 必填 | 说明                                             |
175| ------ | ------------------------------------------------- | ---- | ------------------------------------------------ |
176| value  | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | 是   | 边框端点绘制样式。<br/>默认值：LineCapStyle.Butt |
177
178### strokeLineJoin
179
180strokeLineJoin(value: LineJoinStyle)
181
182设置边框拐角绘制样式。Line组件无法形成拐角，该属性设置无效。
183
184**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。
185
186**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
187
188**系统能力：** SystemCapability.ArkUI.ArkUI.Full
189
190**参数：**
191
192| 参数名 | 类型                                                | 必填 | 说明                                               |
193| ------ | --------------------------------------------------- | ---- | -------------------------------------------------- |
194| value  | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | 是   | 边框拐角绘制样式。<br/>默认值：LineJoinStyle.Miter |
195
196### strokeMiterLimit
197
198strokeMiterLimit(value: number | string)
199
200设置锐角绘制成斜角的极限值。Line组件无法设置锐角图形，该属性设置无效。
201
202**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。
203
204**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
205
206**系统能力：** SystemCapability.ArkUI.ArkUI.Full
207
208**参数：**
209
210| 参数名 | 类型                       | 必填 | 说明                                   |
211| ------ | -------------------------- | ---- | -------------------------------------- |
212| value  | number&nbsp;\|&nbsp;string | 是   | 锐角绘制成斜角的极限值。<br/>默认值：4 |
213
214### strokeOpacity
215
216strokeOpacity(value: number | string | Resource)
217
218设置边框透明度。该属性的取值范围是[0.0, 1.0]，若给定值小于0.0，则取值为0.0；若给定值大于1.0，则取值为1.0，其余异常值按1.0处理。
219
220**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。
221
222**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
223
224**系统能力：** SystemCapability.ArkUI.ArkUI.Full
225
226**参数：**
227
228| 参数名 | 类型                                                         | 必填 | 说明                       |
229| ------ | ------------------------------------------------------------ | ---- | -------------------------- |
230| value  | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 是   | 边框透明度。<br/>默认值：1 |
231
232### strokeWidth
233
234strokeWidth(value: Length)
235
236设置边框宽度。该属性若为string类型, 暂不支持百分比，百分比按照1px处理。
237
238**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。
239
240**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
241
242**系统能力：** SystemCapability.ArkUI.ArkUI.Full
243
244**参数：**
245
246| 参数名 | 类型                         | 必填 | 说明                     |
247| ------ | ---------------------------- | ---- | ------------------------ |
248| value  | [Length](ts-types.md#length) | 是   | 边框宽度，取值范围≥0。<br/>默认值：1<br/>默认单位：vp<br/>异常值按照默认值处理。 |
249
250### antiAlias
251
252antiAlias(value: boolean)
253
254设置是否开启抗锯齿效果。
255
256**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。
257
258**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
259
260**系统能力：** SystemCapability.ArkUI.ArkUI.Full
261
262**参数：**
263
264| 参数名 | 类型    | 必填 | 说明                                  |
265| ------ | ------- | ---- | ------------------------------------- |
266| value  | boolean | 是   | 是否开启抗锯齿效果。<br/>默认值：true |
267
268## 示例
269
270### 示例1（组件属性绘制）
271
272使用startPoint、endPoint、fillOpacity、stroke、strokeDashArray、strokeDashOffset属性分别绘制直线的起始点、结束点、透明度、直线颜色、边框间隙、绘制起点。
273
274```ts
275// xxx.ets
276@Entry
277@Component
278struct LineExample {
279  build() {
280    Column({ space: 10 }) {
281      // 线条绘制的起止点坐标均是相对于Line组件本身绘制区域的坐标
282      Line()
283        .width(200)
284        .height(150)
285        .startPoint([0, 0])
286        .endPoint([50, 100])
287        .stroke(Color.Black)
288        .backgroundColor('#F5F5F5')
289      Line()
290        .width(200)
291        .height(150)
292        .startPoint([50, 50])
293        .endPoint([150, 150])
294        .strokeWidth(5)
295        .stroke(Color.Orange)
296        .strokeOpacity(0.5)
297        .backgroundColor('#F5F5F5')
298      // strokeDashOffset用于定义关联虚线strokeDashArray数组渲染时的偏移
299      Line()
300        .width(200)
301        .height(150)
302        .startPoint([0, 0])
303        .endPoint([100, 100])
304        .stroke(Color.Black)
305        .strokeWidth(3)
306        .strokeDashArray([10, 3])
307        .strokeDashOffset(5)
308        .backgroundColor('#F5F5F5')
309      // 当坐标点设置的值超出Line组件的宽高范围时，线条会画出组件绘制区域
310      Line()
311        .width(50)
312        .height(50)
313        .startPoint([0, 0])
314        .endPoint([100, 100])
315        .stroke(Color.Black)
316        .strokeWidth(3)
317        .strokeDashArray([10, 3])
318        .backgroundColor('#F5F5F5')
319    }
320  }
321}
322```
323
324![zh-cn_image_0000001219982725](figures/zh-cn_image_0000001219982725.png)
325
326### 示例2（边框端点绘制）
327
328使用strokeLineCap绘制直线的边框端点样式。
329
330```ts
331// xxx.ets
332@Entry
333@Component
334struct LineExample1 {
335  build() {
336    Row({ space: 10 }) {
337      // 当LineCapStyle值为Butt时
338      Line()
339        .width(100)
340        .height(200)
341        .startPoint([50, 50])
342        .endPoint([50, 200])
343        .stroke(Color.Black)
344        .strokeWidth(20)
345        .strokeLineCap(LineCapStyle.Butt)
346        .backgroundColor('#F5F5F5')
347        .margin(10)
348      // 当LineCapStyle值为Round时
349      Line()
350        .width(100)
351        .height(200)
352        .startPoint([50, 50])
353        .endPoint([50, 200])
354        .stroke(Color.Black)
355        .strokeWidth(20)
356        .strokeLineCap(LineCapStyle.Round)
357        .backgroundColor('#F5F5F5')
358      // 当LineCapStyle值为Square时
359      Line()
360        .width(100)
361        .height(200)
362        .startPoint([50, 50])
363        .endPoint([50, 200])
364        .stroke(Color.Black)
365        .strokeWidth(20)
366        .strokeLineCap(LineCapStyle.Square)
367        .backgroundColor('#F5F5F5')
368    }
369  }
370}
371```
372
373![zh-cn_image1_0000001219982725](figures/zh-cn_image1_0000001219982725.png)
374
375### 示例3（边框间隙绘制）
376
377使用strokeDashArray绘制直线的边框间隙。
378
379```ts
380// xxx.ets
381@Entry
382@Component
383struct LineExample {
384  build() {
385    Column() {
386      Line()
387        .width(300)
388        .height(30)
389        .startPoint([50, 30])
390        .endPoint([300, 30])
391        .stroke(Color.Black)
392        .strokeWidth(10)
393      // 设置strokeDashArray的数组间隔为 50
394      Line()
395        .width(300)
396        .height(30)
397        .startPoint([50, 20])
398        .endPoint([300, 20])
399        .stroke(Color.Black)
400        .strokeWidth(10)
401        .strokeDashArray([50])
402      // 设置strokeDashArray的数组间隔为 50, 10
403      Line()
404        .width(300)
405        .height(30)
406        .startPoint([50, 20])
407        .endPoint([300, 20])
408        .stroke(Color.Black)
409        .strokeWidth(10)
410        .strokeDashArray([50, 10])
411      // 设置strokeDashArray的数组间隔为 50, 10, 20
412      Line()
413        .width(300)
414        .height(30)
415        .startPoint([50, 20])
416        .endPoint([300, 20])
417        .stroke(Color.Black)
418        .strokeWidth(10)
419        .strokeDashArray([50, 10, 20])
420      // 设置strokeDashArray的数组间隔为 50, 10, 20, 30
421      Line()
422        .width(300)
423        .height(30)
424        .startPoint([50, 20])
425        .endPoint([300, 20])
426        .stroke(Color.Black)
427        .strokeWidth(10)
428        .strokeDashArray([50, 10, 20, 30])
429    }
430  }
431}
432```
433
434![zh-cn_image2_0000001219982725](figures/zh-cn_image2_0000001219982725.PNG)
435