1# Path
2
3The **Path** component is used to define a closed shape.
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## APIs
15
16Path(value?: { width?: number | string; height?: number | string; commands?: string })
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?: number \| string; height?: number \| string; [commands](ts-drawing-components-path.md#commands)?: string } | No  | **width**: width of the rectangle where the path is located.<br>If the value is invalid or the default value is used, the width required for the content is used.<br>**height**: height of the rectangle where the path is located.<br>If the value is invalid or the default value is used, the height required for the content is used.<br> **commands**: command string for drawing the path. Default value: **''**<br>An invalid value is handled as the default value.|
29
30## Attributes
31
32In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
33
34### commands
35
36commands(value: string)
37
38Sets the command string for path drawing. The unit is px. For details about how to convert pixel units, see [Pixel Units](ts-pixel-units.md).
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  | string | Yes  | Path for drawing a line.<br>Default value: **''**|
51
52### fill
53
54fill(value: ResourceColor)
55
56Sets the color of the fill area. 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  | [ResourceColor](ts-types.md#resourcecolor) | Yes  | Color of the fill area.<br>Default value: **Color.Black**|
69
70### fillOpacity
71
72fillOpacity(value: number | string | Resource)
73
74Sets the opacity of the fill area. The value range is [0.0, 1.0]. If the value passed in is less than **0.0**, the opacity is set to **0.0**. If the value passed in is greater than **1.0**, the opacity is set to **1.0**. Any other value is regarded as **1.0**.
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  | number \| string \| [Resource](ts-types.md#resource) | Yes  | Opacity of the fill area.<br>Default value: **1**|
87
88### stroke
89
90stroke(value: ResourceColor)
91
92Sets 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.
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  | [ResourceColor](ts-types.md#resourcecolor) | Yes  | Stroke color.|
105
106### strokeDashArray
107
108strokeDashArray(value: Array&lt;any&gt;)
109
110Sets the stroke dashes. Line segments may overlap when they intersect. An invalid value is handled as the default value.
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  | Array&lt;any&gt; | Yes  | Stroke dashes.<br>Default value: **[]**|
123
124### strokeDashOffset
125
126strokeDashOffset(value: number | string)
127
128Sets the line dash offset. 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  | number \| string | Yes  | Line dash offset.<br>Default value: **0**|
141
142### strokeLineCap
143
144strokeLineCap(value: LineCapStyle)
145
146Sets the style of end points of lines.
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  | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | Yes  | Style of the end points of lines.<br>Default value: **LineCapStyle.Butt**|
159
160### strokeLineJoin
161
162strokeLineJoin(value: LineJoinStyle)
163
164Sets the join style of lines.
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  | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | Yes  | Join style of lines.<br>Default value: **LineJoinStyle.Miter**|
177
178### strokeMiterLimit
179
180strokeMiterLimit(value: number | string)
181
182Sets 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**.
183
184The 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.
185
186**Widget capability**: This API can be used in ArkTS widgets since API version 9.
187
188**Atomic service API**: This API can be used in atomic services since API version 11.
189
190**System capability**: SystemCapability.ArkUI.ArkUI.Full
191
192**Parameters**
193
194| Name| Type                      | Mandatory| Description                                          |
195| ------ | -------------------------- | ---- | ---------------------------------------------- |
196| 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**|
197
198### strokeOpacity
199
200strokeOpacity(value: number | string | Resource)
201
202Sets the stroke opacity. The value range is [0.0, 1.0]. If the value passed in is less than **0.0**, the opacity is set to **0.0**. If the value passed in is greater than **1.0**, the opacity is set to **1.0**. Any other value is regarded as **1.0**.
203
204**Widget capability**: This API can be used in ArkTS widgets since API version 9.
205
206**Atomic service API**: This API can be used in atomic services since API version 11.
207
208**System capability**: SystemCapability.ArkUI.ArkUI.Full
209
210**Parameters**
211
212| Name| Type                                                        | Mandatory| Description                      |
213| ------ | ------------------------------------------------------------ | ---- | -------------------------- |
214| value  | number \| string \| [Resource](ts-types.md#resource) | Yes  | Stroke opacity.<br>Default value: **1**|
215
216### strokeWidth
217
218strokeWidth(value: Length)
219
220Sets the stroke width. If of the string type, this attribute cannot be set in percentage. A percentage is processed as 1 px.
221
222**Widget capability**: This API can be used in ArkTS widgets since API version 9.
223
224**Atomic service API**: This API can be used in atomic services since API version 11.
225
226**System capability**: SystemCapability.ArkUI.ArkUI.Full
227
228**Parameters**
229
230| Name| Type                        | Mandatory| Description                    |
231| ------ | ---------------------------- | ---- | ------------------------ |
232| value  | [Length](ts-types.md#length) | Yes  | Stroke width.<br>Default value: **1**|
233
234### antiAlias
235
236antiAlias(value: boolean)
237
238Specifies whether anti-aliasing is enabled.
239
240**Widget capability**: This API can be used in ArkTS widgets since API version 9.
241
242**Atomic service API**: This API can be used in atomic services since API version 11.
243
244**System capability**: SystemCapability.ArkUI.ArkUI.Full
245
246**Parameters**
247
248| Name| Type   | Mandatory| Description                                 |
249| ------ | ------- | ---- | ------------------------------------- |
250| value  | boolean | Yes  | Whether anti-aliasing is enabled.<br>Default value: **true**|
251
252## Commands
253
254The supported commands are as follows:
255
256| Command  | Name                              | Parameter                                      | Description                                      |
257| ---- | -------------------------------- | ---------------------------------------- | ---------------------------------------- |
258| M    | moveto                           | (x y)                                   | Starts a new subpath at the point specified by the given (x, y) coordinates. For example, `M 0 0` starts a new subpath at point (0, 0).|
259| L    | lineto                           | (x y)                                   | Draws a line from the current point to the point specified by the given (x, y) coordinates. The specified point becomes the start point of the new subpath. For example, `L 50 50` draws a line from the current point to point (50, 50), which is the start point of the new subpath.|
260| H    | horizontal lineto                | x                                        | Draws a horizontal line from the current point. This command is equivalent to the **L** command where the y-coordinate is 0. For example, `H 50 ` draws a line from the current point to point (50, 0), which is the start point of the new subpath.|
261| V    | vertical lineto                  | y                                        | Draws a vertical line from the current point. This command is equivalent to the **L** command where the x-coordinate is 0. For example, `V 50 ` draws a line from the current point to point (0, 50), which is the start point of the new subpath.|
262| C    | curveto                          | (x1 y1 x2 y2 x y)                        | Draws a cubic Bezier curve from the current point to the point specified by the given (x, y) coordinates, with (x1, y1) as the control point of the curve start point and (x2, y2) as the control point of the curve end point. For example, `C100 100 250 100 250 200 ` draws a cubic Bezier curve from the current point to point (250, 200), which is the start point of the new subpath.|
263| S    | smooth curveto                   | (x2 y2 x y)                              | Draws a cubic Bezier curve from the current point to the point specified by the given (x, y) coordinates, with (x2, y2) as the control point of the curve end point. If the previous command is **C** or **S**, the control point of the curve start point is the mapping of the control point of the curve end point in the previous command relative to the start point. For example, in `C100 100 250 100 250 200 S400 300 400 200`, the second segment of the cubic Bezier curve uses point (250, 300) as the control point of the curve start point. If there is no previous command or the previous command is not **C** or **S**, the control point of the curve start point coincides with the current point.|
264| Q    | quadratic Belzier curve          | (x1 y1 x y)                              | Draws a quadratic Bezier curve from the current point to the point specified by the given (x, y) coordinates, with (x1, y1) as the control point. For example, `Q400 50 600 300` draws a quadratic Bezier curve from the current point to point (600, 300), which is the start point of the new subpath.|
265| T    | smooth quadratic Belzier curveto | (x y)                                    | Draws a quadratic Bezier curve from the current point to the point specified by the given (x, y) coordinates. If the previous command is **Q** or **T**, the control point is the mapping of the control point of the curve end point in the previous command relative to the start point. For example, in `Q400 50 600 300 T1000 300`, the second segment of the quadratic Bezier curve uses point (800, 350) as the control point. If there is no previous command or the previous command is not **Q** or **T**, the control point of the curve start point coincides with the current point.|
266| A    | elliptical Arc                   | (rx ry x-axis-rotation large-arc-flag sweep-flag x y) | Draws an elliptical arc from the current point to the point specified by the given (x, y) coordinates. **(rx, ry)** and **x-axis-rotation** define the size and direction of the arc, indicating how the arc rotates relative to the current coordinate system (in degrees). **large-arc-flag** and **sweep-flag** define how the arc is drawn.|
267| Z    | closepath                        | none                                     | Closes the current subpath by connecting the current path back to the initial point of the current subpath.            |
268
269For example, **commands('M0 20 L50 50 L50 100 Z')** defines a triangle that starts from position (0, 20), by drawing a line from point (0, 20) to point (50, 50), then a line from point (50, 50) to point (50, 100), and finally a line from point (50, 100) to point (0, 20).
270
271## Example
272
273```ts
274// xxx.ets
275@Entry
276@Component
277struct PathExample {
278  build() {
279    Column({ space: 10 }) {
280      Text('Straight line')
281        .fontSize(11)
282        .fontColor(0xCCCCCC)
283        .width('90%')
284      // Draw a straight line whose length is 600 px and width is 3 vp.
285      Path()
286        .width('600px')
287        .height('10px')
288        .commands('M0 0 L600 0')
289        .stroke(Color.Black)
290        .strokeWidth(3)
291
292      Text('Straight line graph')
293        .fontSize(11)
294        .fontColor(0xCCCCCC)
295        .width('90%')
296      // Draw a straight line.
297      Flex({ justifyContent: FlexAlign.SpaceBetween }) {
298        Path()
299          .width('210px')
300          .height('310px')
301          .commands('M100 0 L200 240 L0 240 Z')
302          .fillOpacity(0)
303          .stroke(Color.Black)
304          .strokeWidth(3)
305        Path()
306          .width('210px')
307          .height('310px')
308          .commands('M0 0 H200 V200 H0 Z')
309          .fillOpacity(0)
310          .stroke(Color.Black)
311          .strokeWidth(3)
312        Path()
313          .width('210px')
314          .height('310px')
315          .commands('M100 0 L0 100 L50 200 L150 200 L200 100 Z')
316          .fillOpacity(0)
317          .stroke(Color.Black)
318          .strokeWidth(3)
319      }.width('95%')
320
321      Text('Curve graphics').fontSize(11).fontColor(0xCCCCCC).width('90%')
322      // Draw an arc.
323      Flex({ justifyContent: FlexAlign.SpaceBetween }) {
324        Path()
325          .width('250px')
326          .height('310px')
327          .commands("M0 300 S100 0 240 300 Z")
328          .fillOpacity(0)
329          .stroke(Color.Black)
330          .strokeWidth(3)
331        Path()
332          .width('210px')
333          .height('310px')
334          .commands('M0 150 C0 100 140 0 200 150 L100 300 Z')
335          .fillOpacity(0)
336          .stroke(Color.Black)
337          .strokeWidth(3)
338        Path()
339          .width('210px')
340          .height('310px')
341          .commands('M0 100 A30 20 20 0 0 200 100 Z')
342          .fillOpacity(0)
343          .stroke(Color.Black)
344          .strokeWidth(3)
345      }.width('95%')
346    }.width('100%')
347    .margin({ top: 5 })
348  }
349}
350```
351
352![en-us_image_0000001219744193](figures/en-us_image_0000001219744193.png)
353