1# Shape
2
3绘制组件的父组件，父组件中会描述所有绘制组件均支持的通用属性。
4
51、绘制组件使用Shape作为父组件，实现类似SVG的效果。
6
72、绘制组件单独使用，用于在页面上绘制指定的图形。
8
9>  **说明：**
10>
11>  该组件从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
12
13
14## 子组件
15
16包含[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## 接口
20
21Shape(value?: PixelMap)
22
23从API version 9开始，该接口支持在ArkTS卡片中使用，卡片中不支持使用PixelMap对象。
24
25**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
26
27**系统能力：** SystemCapability.ArkUI.ArkUI.Full
28
29**参数：**
30
31| 参数名 | 类型 | 必填 | 说明 |
32| -------- | -------- | -------- | -------- |
33| value | [PixelMap](../../apis-image-kit/js-apis-image.md#pixelmap7) | 否 | 绘制目标，可将图形绘制在指定的PixelMap对象中，若未设置，则在当前绘制目标中进行绘制。 |
34
35
36## 属性
37
38除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
39
40### viewPort
41
42viewPort(value: { x?: number | string; y?: number | string; width?: number | string; height?: number | string })
43
44设置形状的视口。 
45
46**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。
47
48**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
49
50**系统能力：** SystemCapability.ArkUI.ArkUI.Full
51
52**参数：** 
53
54| 参数名 | 类型 | 必填 | 说明 |
55| -------- | -------- | -------- | -------- |
56| value | {<br/>x?:&nbsp;number \| string,<br/>y?:&nbsp;number \| string,<br/>width?:&nbsp;number \| string,<br/>height?:&nbsp;number \| string<br/>} | 是 | 形状的视口。 <br/>默认值：{ x:0, y:0, width:0, height:0 } |
57
58### fill
59
60fill(value: ResourceColor)
61
62设置填充区域颜色。异常值按照默认值处理。
63
64**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。
65
66**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
67
68**系统能力：** SystemCapability.ArkUI.ArkUI.Full
69
70**参数：** 
71
72| 参数名 | 类型                                       | 必填 | 说明                                   |
73| ------ | ------------------------------------------ | ---- | -------------------------------------- |
74| value  | [ResourceColor](ts-types.md#resourcecolor) | 是   | 填充区域颜色。<br/>默认值：Color.Black |
75
76### fillOpacity
77
78fillOpacity(value: number | string | Resource)
79
80设置填充区域透明度。取值范围是[0.0, 1.0]，若给定值小于0.0，则取值为0.0；若给定值大于1.0，则取值为1.0，其余异常值按1.0处理。
81
82**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。
83
84**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
85
86**系统能力：** SystemCapability.ArkUI.ArkUI.Full
87
88**参数：** 
89
90| 参数名 | 类型                                                         | 必填 | 说明                           |
91| ------ | ------------------------------------------------------------ | ---- | ------------------------------ |
92| value  | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 是   | 填充区域透明度。<br/>默认值：1 |
93
94### stroke
95
96stroke(value: ResourceColor)
97
98设置边框颜色，不设置时，默认没有边框。异常值不会绘制边框。
99
100**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。
101
102**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
103
104**系统能力：** SystemCapability.ArkUI.ArkUI.Full
105
106**参数：** 
107
108| 参数名 | 类型                                       | 必填 | 说明       |
109| ------ | ------------------------------------------ | ---- | ---------- |
110| value  | [ResourceColor](ts-types.md#resourcecolor) | 是   | 边框颜色。 |
111
112### strokeDashArray
113
114strokeDashArray(value: Array&lt;any&gt;)
115
116设置边框间隙。异常值按照默认值处理。
117
118**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。
119
120**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
121
122**系统能力：** SystemCapability.ArkUI.ArkUI.Full
123
124**参数：** 
125
126| 参数名 | 类型             | 必填 | 说明                      |
127| ------ | ---------------- | ---- | ------------------------- |
128| value  | Array&lt;any&gt; | 是   | 边框间隙。<br/>默认值：[] |
129
130### strokeDashOffset
131
132strokeDashOffset(value: number | string)
133
134设置边框绘制起点的偏移量。异常值按照默认值处理。
135
136**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。
137
138**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
139
140**系统能力：** SystemCapability.ArkUI.ArkUI.Full
141
142**参数：** 
143
144| 参数名 | 类型                       | 必填 | 说明                                 |
145| ------ | -------------------------- | ---- | ------------------------------------ |
146| value  | number&nbsp;\|&nbsp;string | 是   | 边框绘制起点的偏移量。<br/>默认值：0 |
147
148### strokeLineCap
149
150strokeLineCap(value: LineCapStyle)
151
152设置边框端点绘制样式。
153
154**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。
155
156**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
157
158**系统能力：** SystemCapability.ArkUI.ArkUI.Full
159
160**参数：** 
161
162| 参数名 | 类型                                              | 必填 | 说明                                             |
163| ------ | ------------------------------------------------- | ---- | ------------------------------------------------ |
164| value  | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | 是   | 边框端点绘制样式。<br/>默认值：LineCapStyle.Butt |
165
166### strokeLineJoin
167
168strokeLineJoin(value: LineJoinStyle)
169
170设置边框拐角绘制样式。
171
172**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。
173
174**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
175
176**系统能力：** SystemCapability.ArkUI.ArkUI.Full
177
178**参数：** 
179
180| 参数名 | 类型                                                | 必填 | 说明                                               |
181| ------ | --------------------------------------------------- | ---- | -------------------------------------------------- |
182| value  | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | 是   | 边框拐角绘制样式。<br/>默认值：LineJoinStyle.Miter |
183
184### strokeMiterLimit
185
186strokeMiterLimit(value: number | string)
187
188设置斜接长度与边框宽度比值的极限值。斜接长度表示外边框外边交点到内边交点的距离，边框宽度即strokeWidth属性的值。该属性取值需在strokeLineJoin属性取值LineJoinStyle.Miter时生效。 
189
190该属性的合法值范围应当大于等于1.0，当取值范围在[0,1)时按1.0处理，其余异常值按默认值处理。
191
192**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。
193
194**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
195
196**系统能力：** SystemCapability.ArkUI.ArkUI.Full
197
198**参数：** 
199
200| 参数名 | 类型                       | 必填 | 说明                                           |
201| ------ | -------------------------- | ---- | ---------------------------------------------- |
202| value  | number&nbsp;\|&nbsp;string | 是   | 斜接长度与边框宽度比值的极限值。<br/>默认值：4 |
203
204### strokeOpacity
205
206strokeOpacity(value: number | string | Resource)
207
208设置边框透明度。该属性的取值范围是[0.0, 1.0]，若给定值小于0.0，则取值为0.0；若给定值大于1.0，则取值为1.0，其余异常值按1.0处理 。
209
210**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。
211
212**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
213
214**系统能力：** SystemCapability.ArkUI.ArkUI.Full
215
216**参数：** 
217
218| 参数名 | 类型                                                         | 必填 | 说明                       |
219| ------ | ------------------------------------------------------------ | ---- | -------------------------- |
220| value  | number&nbsp;\|&nbsp;string&nbsp;\|&nbsp;[Resource](ts-types.md#resource) | 是   | 边框透明度。<br/>默认值：1 |
221
222### strokeWidth
223
224strokeWidth(value: number | string)
225
226设置边框宽度。该属性若为string类型, 暂不支持百分比，百分比按照1px处理。
227
228**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。
229
230**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
231
232**系统能力：** SystemCapability.ArkUI.ArkUI.Full
233
234**参数：** 
235
236| 参数名 | 类型                         | 必填 | 说明                     |
237| ------ | ---------------------------- | ---- | ------------------------ |
238| value  | number&nbsp;\|&nbsp;string | 是   | 边框宽度。<br/>默认值：1 |
239
240### antiAlias
241
242antiAlias(value: boolean)
243
244设置是否开启抗锯齿效果。
245
246**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。
247
248**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
249
250**系统能力：** SystemCapability.ArkUI.ArkUI.Full
251
252**参数：** 
253
254| 参数名 | 类型    | 必填 | 说明                                  |
255| ------ | ------- | ---- | ------------------------------------- |
256| value  | boolean | 是   | 是否开启抗锯齿效果。<br/>默认值：true |
257
258### mesh<sup>8+</sup>
259
260mesh(value: Array&lt;number&gt;, column: number, row: number)
261
262设置mesh效果。
263
264**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。
265
266**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
267
268**系统能力：** SystemCapability.ArkUI.ArkUI.Full
269
270**参数：** 
271
272| 参数名 | 类型                | 必填 | 说明                                                         |
273| ------ | ------------------- | ---- | ------------------------------------------------------------ |
274| value  | Array&lt;number&gt; | 是   | 长度（column + 1）* （row + 1）* 2的数组，它记录了扭曲后的位图各个顶点位置。 |
275| column | number              | 是   | mesh矩阵列数。                                               |
276| row    | number              | 是   | mesh矩阵行数。                                               |
277
278## 示例
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      // 在Shape的(-2, -2)点绘制一个 300 * 50 带边框的矩形,颜色0x317AF7,边框颜色黑色,边框宽度4,边框间隙20,向左偏移10,线条两端样式为半圆,拐角样式圆角,抗锯齿(默认开启)
289      // 在Shape的(-2, 58)点绘制一个 300 * 50 带边框的椭圆,颜色0x317AF7,边框颜色黑色,边框宽度4,边框间隙20,向左偏移10,线条两端样式为半圆,拐角样式圆角,抗锯齿(默认开启)
290      // 在Shape的(-2, 118)点绘制一个 300 * 10 直线路径,颜色0x317AF7,边框颜色黑色,宽度4,间隙20,向左偏移10,线条两端样式为半圆,拐角样式圆角,抗锯齿(默认开启)
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      // 分别在Shape的(0, 0)、(-5, -5)点绘制一个 300 * 50 带边框的矩形,可以看出之所以将视口的起始位置坐标设为负值是因为绘制的起点默认为线宽的中点位置，因此要让边框完全显示则需要让视口偏移半个线宽
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      // 在Shape的(0, -5)点绘制一条直线路径,颜色0xEE8443,线条宽度10,线条间隙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      // 在Shape的(0, -5)点绘制一条直线路径,颜色0xEE8443,线条宽度10,线条间隙20,向左偏移10
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      // 在Shape的(0, -5)点绘制一条直线路径,颜色0xEE8443,线条宽度10,透明度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      // 在Shape的(0, -5)点绘制一条直线路径,颜色0xEE8443,线条宽度10,线条间隙20,线条两端样式为半圆
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      // 在Shape的(-20, -5)点绘制一个封闭路径,颜色0x317AF7,线条宽度10,边框颜色0xEE8443,拐角样式锐角（默认值）
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![zh-cn_image_0000001184628104](figures/zh-cn_image_0000001184628104.png)
389、