1# Shape
2
3The **Shape** component is the parent component of the drawing components. The attributes described in this topic are universal attributes supported by all the drawing components.
4
51. Drawing components use **Shape** as their parent to implement the effect similar to SVG.
6
72. The **Shape** component is used independently to draw a specific shape.
8
9>  **NOTE**
10>
11>  This component is supported since API version 7. Updates will be marked with a superscript to indicate their earliest API version.
12
13
14## Child Components
15
16The following child components are supported: Rect](ts-drawing-components-rect.md), [Path](ts-drawing-components-path.md), [Circle](ts-drawing-components-circle.md), [Ellipse](ts-drawing-components-ellipse.md), [Polyline](ts-drawing-components-polyline.md), [Polygon](ts-drawing-components-polygon.md), [Image](ts-basic-components-image.md), [Text](ts-basic-components-text.md), [Column](ts-container-column.md), [Row](ts-container-row.md), Shape
17
18
19## APIs
20
21Shape(value?: PixelMap)
22
23Since API version 9, this API is supported in ArkTS widgets, except that **PixelMap** objects are not supported.
24
25**Atomic service API**: This API can be used in atomic services since API version 11.
26
27**System capability**: SystemCapability.ArkUI.ArkUI.Full
28
29**Parameters**
30
31| Name| Type| Mandatory| Description|
32| -------- | -------- | -------- | -------- |
33| value | [PixelMap](../../apis-image-kit/js-apis-image.md#pixelmap7) | No| Shape to draw. You can draw a shape in the specified **PixelMap** object. If no object is specified, the shape is drawn in the current drawing target.|
34
35
36## Attributes
37
38In addition to the [universal attributes](ts-universal-attributes-size.md), the following attributes are supported.
39
40### viewPort
41
42viewPort(value: { x?: number | string; y?: number | string; width?: number | string; height?: number | string })
43
44Sets the viewport of the shape.
45
46**Widget capability**: Since API version 9, this API is supported in ArkTS widgets.
47
48**Atomic service API**: This API can be used in atomic services since API version 11.
49
50**System capability**: SystemCapability.ArkUI.ArkUI.Full
51
52**Parameters**
53
54| Name| Type| Mandatory| Description|
55| -------- | -------- | -------- | -------- |
56| value | {<br>x?: number \| string,<br>y?: number \| string,<br>width?: number \| string,<br>height?: number \| string<br>} | Yes| Viewport of the shape.<br>Default value: **{ x:0, y:0, width:0, height:0 } **|
57
58### fill
59
60fill(value: ResourceColor)
61
62Sets the color of the fill area. An invalid value is handled as the default value.
63
64**Widget capability**: Since API version 9, this API is supported in ArkTS widgets.
65
66**Atomic service API**: This API can be used in atomic services since API version 11.
67
68**System capability**: SystemCapability.ArkUI.ArkUI.Full
69
70**Parameters**
71
72| Name| Type                                      | Mandatory| Description                                  |
73| ------ | ------------------------------------------ | ---- | -------------------------------------- |
74| value  | [ResourceColor](ts-types.md#resourcecolor) | Yes  | Color of the fill area.<br>Default value: **Color.Black**|
75
76### fillOpacity
77
78fillOpacity(value: number | string | Resource)
79
80Sets the opacity of the fill area. 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**.
81
82**Widget capability**: Since API version 9, this API is supported in ArkTS widgets.
83
84**Atomic service API**: This API can be used in atomic services since API version 11.
85
86**System capability**: SystemCapability.ArkUI.ArkUI.Full
87
88**Parameters**
89
90| Name| Type                                                        | Mandatory| Description                          |
91| ------ | ------------------------------------------------------------ | ---- | ------------------------------ |
92| value  | number \| string \| [Resource](ts-types.md#resource) | Yes  | Opacity of the fill area.<br>Default value: **1**|
93
94### stroke
95
96stroke(value: ResourceColor)
97
98Sets 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.
99
100**Widget capability**: Since API version 9, this API is supported in ArkTS widgets.
101
102**Atomic service API**: This API can be used in atomic services since API version 11.
103
104**System capability**: SystemCapability.ArkUI.ArkUI.Full
105
106**Parameters**
107
108| Name| Type                                      | Mandatory| Description      |
109| ------ | ------------------------------------------ | ---- | ---------- |
110| value  | [ResourceColor](ts-types.md#resourcecolor) | Yes  | Stroke color.|
111
112### strokeDashArray
113
114strokeDashArray(value: Array&lt;any&gt;)
115
116Sets the stroke dashes. An invalid value is handled as the default value.
117
118**Widget capability**: Since API version 9, this API is supported in ArkTS widgets.
119
120**Atomic service API**: This API can be used in atomic services since API version 11.
121
122**System capability**: SystemCapability.ArkUI.ArkUI.Full
123
124**Parameters**
125
126| Name| Type            | Mandatory| Description                     |
127| ------ | ---------------- | ---- | ------------------------- |
128| value  | Array&lt;any&gt; | Yes  | Stroke dashes.<br>Default value: **[]**|
129
130### strokeDashOffset
131
132strokeDashOffset(value: number | string)
133
134Sets the offset of the start point for drawing the stroke. An invalid value is handled as the default value.
135
136**Widget capability**: Since API version 9, this API is supported in ArkTS widgets.
137
138**Atomic service API**: This API can be used in atomic services since API version 11.
139
140**System capability**: SystemCapability.ArkUI.ArkUI.Full
141
142**Parameters**
143
144| Name| Type                      | Mandatory| Description                                |
145| ------ | -------------------------- | ---- | ------------------------------------ |
146| value  | number \| string | Yes  | Offset of the start point for drawing the stroke.<br>Default value: **0**|
147
148### strokeLineCap
149
150strokeLineCap(value: LineCapStyle)
151
152Sets the cap style of the stroke.
153
154**Widget capability**: Since API version 9, this API is supported in ArkTS widgets.
155
156**Atomic service API**: This API can be used in atomic services since API version 11.
157
158**System capability**: SystemCapability.ArkUI.ArkUI.Full
159
160**Parameters**
161
162| Name| Type                                             | Mandatory| Description                                            |
163| ------ | ------------------------------------------------- | ---- | ------------------------------------------------ |
164| value  | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | Yes  | Cap style of the stroke.<br>Default value: **LineCapStyle.Butt**|
165
166### strokeLineJoin
167
168strokeLineJoin(value: LineJoinStyle)
169
170Sets the join style of the stroke.
171
172**Widget capability**: Since API version 9, this API is supported in ArkTS widgets.
173
174**Atomic service API**: This API can be used in atomic services since API version 11.
175
176**System capability**: SystemCapability.ArkUI.ArkUI.Full
177
178**Parameters**
179
180| Name| Type                                               | Mandatory| Description                                              |
181| ------ | --------------------------------------------------- | ---- | -------------------------------------------------- |
182| value  | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | Yes  | Join style of the stroke.<br>Default value: **LineJoinStyle.Miter**|
183
184### strokeMiterLimit
185
186strokeMiterLimit(value: number | string)
187
188Sets 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**.
189
190The 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.
191
192**Widget capability**: Since API version 9, this API is supported in ArkTS widgets.
193
194**Atomic service API**: This API can be used in atomic services since API version 11.
195
196**System capability**: SystemCapability.ArkUI.ArkUI.Full
197
198**Parameters**
199
200| Name| Type                      | Mandatory| Description                                          |
201| ------ | -------------------------- | ---- | ---------------------------------------------- |
202| 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**|
203
204### strokeOpacity
205
206strokeOpacity(value: number | string | Resource)
207
208Sets 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**.
209
210**Widget capability**: Since API version 9, this API is supported in ArkTS widgets.
211
212**Atomic service API**: This API can be used in atomic services since API version 11.
213
214**System capability**: SystemCapability.ArkUI.ArkUI.Full
215
216**Parameters**
217
218| Name| Type                                                        | Mandatory| Description                      |
219| ------ | ------------------------------------------------------------ | ---- | -------------------------- |
220| value  | number \| string \| [Resource](ts-types.md#resource) | Yes  | Stroke opacity.<br>Default value: **1**|
221
222### strokeWidth
223
224strokeWidth(value: number | string)
225
226Sets the stroke width. If of the string type, this parameter cannot be set in percentage. A percentage is processed as 1px.
227
228**Widget capability**: Since API version 9, this API is supported in ArkTS widgets.
229
230**Atomic service API**: This API can be used in atomic services since API version 11.
231
232**System capability**: SystemCapability.ArkUI.ArkUI.Full
233
234**Parameters**
235
236| Name| Type                        | Mandatory| Description                    |
237| ------ | ---------------------------- | ---- | ------------------------ |
238| value  | number \| string | Yes  | Stroke width.<br>Default value: **1**|
239
240### antiAlias
241
242antiAlias(value: boolean)
243
244Specifies whether anti-aliasing is enabled.
245
246**Widget capability**: Since API version 9, this API is supported in ArkTS widgets.
247
248**Atomic service API**: This API can be used in atomic services since API version 11.
249
250**System capability**: SystemCapability.ArkUI.ArkUI.Full
251
252**Parameters**
253
254| Name| Type   | Mandatory| Description                                 |
255| ------ | ------- | ---- | ------------------------------------- |
256| value  | boolean | Yes  | Whether anti-aliasing is enabled.<br>Default value: **true**|
257
258### mesh<sup>8+</sup>
259
260mesh(value: Array&lt;number&gt;, column: number, row: number)
261
262Sets the mesh effect.
263
264**Widget capability**: Since API version 9, this API is supported in ArkTS widgets.
265
266**Atomic service API**: This API can be used in atomic services since API version 11.
267
268**System capability**: SystemCapability.ArkUI.ArkUI.Full
269
270**Parameters**
271
272| Name| Type               | Mandatory| Description                                                        |
273| ------ | ------------------- | ---- | ------------------------------------------------------------ |
274| value  | Array&lt;number&gt; | Yes  | An array of lengths (column + 1) * (row + 1) * 2, which records the position of each vertex of the distorted bitmap.|
275| column | number              | Yes  | Number of columns in the mesh matrix.                                              |
276| row    | number              | Yes  | Number of rows in the mesh matrix.                                              |
277
278## Example
279
280```ts
281// xxx.ets
282@Entry
283@Component
284struct ShapeExample {
285  build() {
286    Column({ space: 10 }) {
287      Text('basic').fontSize(11).fontColor(0xCCCCCC).width(320)
288      // Draw a 300 x 50 rectangle with strokes at (-2, -2). The fill color is 0x317AF7, the stroke color is black, the stroke width is 4, the stroke dash is 20, the offset is 10 to the left, the cap style is rounded, the join style is rounded, and anti-aliasing is enabled (default).
289      // Draw a 300 x 50 ellipse with strokes at (-2, 58). The fill color is 0x317AF7, the stroke color is black, the stroke width is 4, the stroke dash is 20, the offset is 10 to the left, the cap style is rounded, the join style is rounded, and anti-aliasing is enabled (default).
290      // Draw a 300 x 10 straight line at (-2, 118). The fill color is 0x317AF7, the stroke color is black, the stroke width is 4, the stroke dash is 20, the offset is 10 to the left, the cap style is rounded, the join style is rounded, and anti-aliasing is enabled (default).
291      Shape() {
292        Rect().width(300).height(50)
293        Ellipse().width(300).height(50).offset({ x: 0, y: 60 })
294        Path().width(300).height(10).commands('M0 0 L900 0').offset({ x: 0, y: 120 })
295      }
296      .width(350)
297      .height(140)
298      .viewPort({ x: -2, y: -2, width: 304, height: 130 })
299      .fill(0x317AF7)
300      .stroke(Color.Black)
301      .strokeWidth(4)
302      .strokeDashArray([20])
303      .strokeDashOffset(10)
304      .strokeLineCap(LineCapStyle.Round)
305      .strokeLineJoin(LineJoinStyle.Round)
306      .antiAlias(true)
307      // Draw a 300 x 50 rectangle with strokes at (0, 0) and (-5, -5). The drawing start point is the midpoint of the stroke width by default. To fully display the strokes, you must set the coordinates of the start position of the viewport to negative values so that the viewport is offset by half the stroke width.
308      Shape() {
309        Rect().width(300).height(50)
310      }
311      .width(350)
312      .height(80)
313      .viewPort({ x: 0, y: 0, width: 320, height: 70 })
314      .fill(0x317AF7)
315      .stroke(Color.Black)
316      .strokeWidth(10)
317
318      Shape() {
319        Rect().width(300).height(50)
320      }
321      .width(350)
322      .height(80)
323      .viewPort({ x: -5, y: -5, width: 320, height: 70 })
324      .fill(0x317AF7)
325      .stroke(Color.Black)
326      .strokeWidth(10)
327
328      Text('path').fontSize(11).fontColor(0xCCCCCC).width(320)
329      // Draw a straight line at (0, -5). The fill color is 0xEE8443, the stroke width is 10, and the stroke dash is 20.
330      Shape() {
331        Path().width(300).height(10).commands('M0 0 L900 0')
332      }
333      .width(350)
334      .height(20)
335      .viewPort({ x: 0, y: -5, width: 300, height: 20 })
336      .stroke(0xEE8443)
337      .strokeWidth(10)
338      .strokeDashArray([20])
339      // Draw a straight line at (0, -5). The fill color is 0xEE8443, the stroke width is 10, the stroke dash is 20, and the offset is 10 to the left.
340      Shape() {
341        Path().width(300).height(10).commands('M0 0 L900 0')
342      }
343      .width(350)
344      .height(20)
345      .viewPort({ x: 0, y: -5, width: 300, height: 20 })
346      .stroke(0xEE8443)
347      .strokeWidth(10)
348      .strokeDashArray([20])
349      .strokeDashOffset(10)
350      // Draw a straight line at (0, -5). The fill color is 0xEE8443, the stroke width is 10, and the stroke opacity is 0.5.
351      Shape() {
352        Path().width(300).height(10).commands('M0 0 L900 0')
353      }
354      .width(350)
355      .height(20)
356      .viewPort({ x: 0, y: -5, width: 300, height: 20 })
357      .stroke(0xEE8443)
358      .strokeWidth(10)
359      .strokeOpacity(0.5)
360      // Draw a straight line at (0, -5). The fill color is 0xEE8443, the stroke width is 10, the stroke dash is 20, and the cap style is rounded.
361      Shape() {
362        Path().width(300).height(10).commands('M0 0 L900 0')
363      }
364      .width(350)
365      .height(20)
366      .viewPort({ x: 0, y: -5, width: 300, height: 20 })
367      .stroke(0xEE8443)
368      .strokeWidth(10)
369      .strokeDashArray([20])
370      .strokeLineCap(LineCapStyle.Round)
371      // Draw a closed path at (-20, -5). The fill color is 0x317AF7, the stroke width is 10, the stroke color is 0xEE8443, and the join style is miter (default value).
372      Shape() {
373        Path().width(200).height(60).commands('M0 0 L400 0 L400 150 Z')
374      }
375      .width(300)
376      .height(200)
377      .viewPort({ x: -20, y: -5, width: 310, height: 90 })
378      .fill(0x317AF7)
379      .stroke(0xEE8443)
380      .strokeWidth(10)
381      .strokeLineJoin(LineJoinStyle.Miter)
382      .strokeMiterLimit(5)
383    }.width('100%').margin({ top: 15 })
384  }
385}
386```
387
388![en-us_image_0000001184628104](figures/en-us_image_0000001184628104.png)
389
390