1# Shape 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @zjsxstar--> 5<!--Designer: @sunbees--> 6<!--Tester: @liuli0427--> 7<!--Adviser: @HelloCrease--> 8 9绘制组件的父组件，父组件中会描述所有绘制组件均支持的通用属性。 10 111、绘制组件使用Shape作为父组件，实现类似SVG的效果。 12 132、绘制组件单独使用，用于在页面上绘制指定的图形。 14 15> **说明：** 16> 17> 该组件从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 18> 19> 该组件从API version 20开始支持使用[AttributeUpdater](../js-apis-arkui-AttributeUpdater.md)类的[updateConstructorParams](../js-apis-arkui-AttributeUpdater.md#updateconstructorparams)接口更新构造参数。 20 21 22## 子组件 23 24包含[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子组件。 25 26 27## 接口 28 29Shape(value?: PixelMap) 30 31从API version 9开始，该接口支持在ArkTS卡片中使用，卡片中不支持使用PixelMap对象。 32 33**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 34 35**系统能力：** SystemCapability.ArkUI.ArkUI.Full 36 37**参数：** 38 39| 参数名 | 类型 | 必填 | 说明 | 40| -------- | -------- | -------- | -------- | 41| value | [PixelMap](../../apis-image-kit/arkts-apis-image-PixelMap.md) | 否 | 绘制目标，可将图形绘制在指定的PixelMap对象中，若未设置，则在当前绘制目标中进行绘制。 | 42 43 44## ViewportRect<sup>18+</sup>对象说明 45 46用于描述Viewport的绘制属性。 47 48> **说明：** 49> 50> 为规范匿名对象的定义，API 18版本修改了此处的元素定义。其中，保留了历史匿名对象的起始版本信息，会出现外层元素@since版本号高于内层元素版本号的情况，但这不影响接口的使用。 51 52**卡片能力：** 从API version 18开始，该接口支持在ArkTS卡片中使用。 53 54**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 55 56**系统能力：** SystemCapability.ArkUI.ArkUI.Full 57 58| 名称 | 类型 | 只读 | 可选 | 说明 | 59| -------- | -------- | -------- | -------- | -------- | 60| x<sup>7+</sup> | [Length](ts-types.md#length) | 否 | 是 | 形状视口起始点的水平坐标。<br/>默认值：0<br/>默认单位：vp<br/>异常值按照默认值处理。<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 61| y<sup>7+</sup> | [Length](ts-types.md#length) | 否 | 是 | 形状视口起始点的垂直坐标。<br/>默认值：0<br/>默认单位：vp<br/>异常值按照默认值处理。<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 62| width<sup>7+</sup> | [Length](ts-types.md#length) | 否 | 是 | 形状视口的宽度，取值范围≥0。<br/>默认值：0<br/>默认单位：vp<br/>异常值按照默认值处理。<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 63| height<sup>7+</sup> | [Length](ts-types.md#length) | 否 | 是 | 形状视口的高度，取值范围≥0。<br/>默认值：0<br/>默认单位：vp<br/>异常值按照默认值处理。<br/>**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 64 65 66## 属性 67 68除支持[通用属性](ts-component-general-attributes.md)外，还支持以下属性： 69 70### viewPort 71 72viewPort(value: ViewportRect) 73 74设置形状的视口。 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 | [ViewportRect](ts-drawing-components-shape.md#viewportrect18对象说明) | 是 | Viewport绘制属性。 | 87 88### fill 89 90fill(value: ResourceColor) 91 92设置填充区域的颜色，支持[attributeModifier](ts-universal-attributes-attribute-modifier.md#attributemodifier)动态设置属性方法，异常值按照默认值处理。与通用属性foregroundColor同时设置时，后设置的属性生效。 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 | [ResourceColor](ts-types.md#resourcecolor) | 是 | 填充区域颜色。<br/>默认值：Color.Black | 105 106### fillOpacity 107 108fillOpacity(value: number | string | Resource) 109 110设置填充区域透明度，支持[attributeModifier](ts-universal-attributes-attribute-modifier.md#attributemodifier)动态设置属性方法。 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 | number \| string \| [Resource](ts-types.md#resource) | 是 | 填充区域透明度。<br/>**说明：**<br/>number格式取值范围是[0.0, 1.0]，若给定值小于0.0，则取值为0.0；若给定值大于1.0，则取值为1.0，其余异常值按1.0处理。<br/>string格式支持number格式取值的字符串形式，取值范围与number格式相同。<br/>Resource格式支持系统资源或者应用资源中的字符串，取值范围和number格式相同。<br/>默认值：1 | 123 124### stroke 125 126stroke(value: ResourceColor) 127 128设置边框颜色，支持[attributeModifier](ts-universal-attributes-attribute-modifier.md#attributemodifier)动态设置属性方法，不设置时，默认边框透明度为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 | [ResourceColor](ts-types.md#resourcecolor) | 是 | 边框颜色。 | 141 142### strokeDashArray 143 144strokeDashArray(value: Array<any>) 145 146设置边框间隙，支持[attributeModifier](ts-universal-attributes-attribute-modifier.md#attributemodifier)动态设置属性方法。取值范围为≥0，异常值按照默认值处理。 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 | Array<any> | 是 | 边框间隙。<br/>默认值：[]（空数组）<br/>默认单位：vp | 159 160### strokeDashOffset 161 162strokeDashOffset(value: Length) 163 164设置边框绘制起点的偏移量，支持[attributeModifier](ts-universal-attributes-attribute-modifier.md#attributemodifier)动态设置属性方法。异常值按照默认值处理。 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 | [Length](ts-types.md#length) | 是 | 边框绘制起点的偏移量。<br/>默认值：0<br/>默认单位：vp | 177 178### strokeLineCap 179 180strokeLineCap(value: LineCapStyle) 181 182设置边框端点绘制样式，支持[attributeModifier](ts-universal-attributes-attribute-modifier.md#attributemodifier)动态设置属性方法。 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 | [LineCapStyle](ts-appendix-enums.md#linecapstyle) | 是 | 边框端点绘制样式。<br/>默认值：LineCapStyle.Butt | 195 196### strokeLineJoin 197 198strokeLineJoin(value: LineJoinStyle) 199 200设置边框拐角绘制样式，支持[attributeModifier](ts-universal-attributes-attribute-modifier.md#attributemodifier)动态设置属性方法。 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 | [LineJoinStyle](ts-appendix-enums.md#linejoinstyle) | 是 | 边框拐角绘制样式。<br/>默认值：LineJoinStyle.Miter | 213 214### strokeMiterLimit 215 216strokeMiterLimit(value: Length) 217 218设置斜接长度与边框宽度比值的极限值，支持[attributeModifier](ts-universal-attributes-attribute-modifier.md#attributemodifier)动态设置属性方法。斜接长度表示外边框外边交点到内边交点的距离，边框宽度即strokeWidth属性的值。该属性取值需在strokeLineJoin属性取值LineJoinStyle.Miter时生效。 219 220该属性的合法值范围应当大于等于1.0，当取值范围在[0,1)时按1.0处理，其余异常值按默认值处理。 221 222**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 223 224**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 225 226**系统能力：** SystemCapability.ArkUI.ArkUI.Full 227 228**参数：** 229 230| 参数名 | 类型 | 必填 | 说明 | 231| ------ | -------------------------- | ---- | ---------------------------------------------- | 232| value | [Length](ts-types.md#length) | 是 | 斜接长度与边框宽度比值的极限值。<br/>默认值：4 | 233 234### strokeOpacity 235 236strokeOpacity(value: number | string | Resource) 237 238设置边框透明度，支持[attributeModifier](ts-universal-attributes-attribute-modifier.md#attributemodifier)动态设置属性方法。该属性的取值范围是[0.0, 1.0]，若给定值小于0.0，则取值为0.0；若给定值大于1.0，则取值为1.0，其余异常值按1.0处理 。 239 240**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 241 242**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 243 244**系统能力：** SystemCapability.ArkUI.ArkUI.Full 245 246**参数：** 247 248| 参数名 | 类型 | 必填 | 说明 | 249| ------ | ------------------------------------------------------------ | ---- | -------------------------- | 250| value | number \| string \| [Resource](ts-types.md#resource) | 是 | 边框透明度。<br/>默认值：[stroke](#stroke)接口设置的透明度。 | 251 252### strokeWidth 253 254strokeWidth(value: Length) 255 256设置边框宽度，支持[attributeModifier](ts-universal-attributes-attribute-modifier.md#attributemodifier)动态设置属性方法。该属性若为string类型，暂不支持百分比，百分比按照1px处理。 257 258**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 259 260**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 261 262**系统能力：** SystemCapability.ArkUI.ArkUI.Full 263 264**参数：** 265 266| 参数名 | 类型 | 必填 | 说明 | 267| ------ | ---------------------------- | ---- | ------------------------ | 268| value | [Length](ts-types.md#length) | 是 | 边框宽度，取值范围≥0。<br/>默认值：1<br/>默认单位：vp<br/>异常值按照默认值处理。 | 269 270### antiAlias 271 272antiAlias(value: boolean) 273 274设置是否开启抗锯齿效果，支持[attributeModifier](ts-universal-attributes-attribute-modifier.md#attributemodifier)动态设置属性方法。 275 276**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 277 278**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 279 280**系统能力：** SystemCapability.ArkUI.ArkUI.Full 281 282**参数：** 283 284| 参数名 | 类型 | 必填 | 说明 | 285| ------ | ------- | ---- | ------------------------------------- | 286| value | boolean | 是 | 是否开启抗锯齿效果。<br/>true：开启抗锯齿；false：关闭抗锯齿。<br/>默认值：true | 287 288### mesh<sup>8+</sup> 289 290mesh(value: Array<any>, column: number, row: number) 291 292设置网格效果。将图像分割为（row + 1）* (column + 1)的网格，每个网格交点坐标存储在数组中（每两个元素表示一个交点的x、y坐标）。通过数组value中的坐标值，重新定位网格顶点位置，实现图像局部扭曲。支持[attributeModifier](ts-universal-attributes-attribute-modifier.md#attributemodifier)动态设置属性方法。 293 294> **说明：** 295> 296> mesh只对shape传入pixelMap时生效，且效果作用于传入的pixelMap。与[绘制模块](../../../reference/apis-arkgraphics2d/arkts-apis-graphics-drawing.md)的[drawPixelMapMesh<sup>12+</sup>](../../../reference/apis-arkgraphics2d/arkts-apis-graphics-drawing-Canvas.md#drawpixelmapmesh12)效果一致，建议使用drawPixelMapMesh。 297 298**卡片能力：** 从API version 9开始，该接口支持在ArkTS卡片中使用。 299 300**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 301 302**系统能力：** SystemCapability.ArkUI.ArkUI.Full 303 304**参数：** 305 306| 参数名 | 类型 | 必填 | 说明 | 307| ------ | ------------------- | ---- | ------------------------------------------------------------ | 308| value | Array<any> | 是 | 长度（row + 1）* （column + 1）* 2的数组，记录扭曲后的位图各个顶点位置。 | 309| column | number | 是 | mesh矩阵列数。 | 310| row | number | 是 | mesh矩阵行数。 | 311 312## 示例 313 314### 示例1（组件属性绘制） 315 316通过Shape组件绘制矩形、椭圆和直线路径。 317 318```ts 319// xxx.ets 320@Entry 321@Component 322struct ShapeExample { 323 build() { 324 Column({ space: 10 }) { 325 Text('basic').fontSize(11).fontColor(0xCCCCCC).width(320) 326 // 在Shape的(-2, -2)点绘制一个 300 * 50 带边框的矩形,颜色0x317AF7,边框颜色黑色,边框宽度4,边框间隙20,向左偏移10,线条两端样式为半圆,拐角样式圆角,抗锯齿(默认开启) 327 // 在Shape的(-2, 58)点绘制一个 300 * 50 带边框的椭圆,颜色0x317AF7,边框颜色黑色,边框宽度4,边框间隙20,向左偏移10,线条两端样式为半圆,拐角样式圆角,抗锯齿(默认开启) 328 // 在Shape的(-2, 118)点绘制一个 300 * 10 直线路径,颜色0x317AF7,边框颜色黑色,宽度4,间隙20,向左偏移10,线条两端样式为半圆,拐角样式圆角,抗锯齿(默认开启) 329 Shape() { 330 Rect().width(300).height(50) 331 Ellipse().width(300).height(50).offset({ x: 0, y: 60 }) 332 Path().width(300).height(10).commands('M0 0 L900 0').offset({ x: 0, y: 120 }) 333 } 334 .width(350) 335 .height(140) 336 .viewPort({ 337 x: -2, 338 y: -2, 339 width: 304, 340 height: 130 341 }) 342 .fill(0x317AF7) 343 .stroke(Color.Black) 344 .strokeWidth(4) 345 .strokeDashArray([20]) 346 .strokeDashOffset(10) 347 .strokeLineCap(LineCapStyle.Round) 348 .strokeLineJoin(LineJoinStyle.Round) 349 .antiAlias(true) 350 351 // 分别在Shape的(0, 0)、(-5, -5)点绘制一个 300 * 50 带边框的矩形,可以看出之所以将视口的起始位置坐标设为负值是因为绘制的起点默认为线宽的中点位置，因此要让边框完全显示则需要让视口偏移半个线宽 352 Shape() { 353 Rect().width(300).height(50) 354 } 355 .width(350) 356 .height(80) 357 .viewPort({ 358 x: 0, 359 y: 0, 360 width: 320, 361 height: 70 362 }) 363 .fill(0x317AF7) 364 .stroke(Color.Black) 365 .strokeWidth(10) 366 367 Shape() { 368 Rect().width(300).height(50) 369 } 370 .width(350) 371 .height(80) 372 .viewPort({ 373 x: -5, 374 y: -5, 375 width: 320, 376 height: 70 377 }) 378 .fill(0x317AF7) 379 .stroke(Color.Black) 380 .strokeWidth(10) 381 382 Text('path').fontSize(11).fontColor(0xCCCCCC).width(320) 383 // 在Shape的(0, -5)点绘制一条直线路径,颜色0xEE8443,线条宽度10,线条间隙20 384 Shape() { 385 Path().width(300).height(10).commands('M0 0 L900 0') 386 } 387 .width(350) 388 .height(20) 389 .viewPort({ 390 x: 0, 391 y: -5, 392 width: 300, 393 height: 20 394 }) 395 .stroke(0xEE8443) 396 .strokeWidth(10) 397 .strokeDashArray([20]) 398 399 // 在Shape的(0, -5)点绘制一条直线路径,颜色0xEE8443,线条宽度10,线条间隙20,向左偏移10 400 Shape() { 401 Path().width(300).height(10).commands('M0 0 L900 0') 402 } 403 .width(350) 404 .height(20) 405 .viewPort({ 406 x: 0, 407 y: -5, 408 width: 300, 409 height: 20 410 }) 411 .stroke(0xEE8443) 412 .strokeWidth(10) 413 .strokeDashArray([20]) 414 .strokeDashOffset(10) 415 416 // 在Shape的(0, -5)点绘制一条直线路径,颜色0xEE8443,线条宽度10,透明度0.5 417 Shape() { 418 Path().width(300).height(10).commands('M0 0 L900 0') 419 } 420 .width(350) 421 .height(20) 422 .viewPort({ 423 x: 0, 424 y: -5, 425 width: 300, 426 height: 20 427 }) 428 .stroke(0xEE8443) 429 .strokeWidth(10) 430 .strokeOpacity(0.5) 431 432 // 在Shape的(0, -5)点绘制一条直线路径,颜色0xEE8443,线条宽度10,线条间隙20,线条两端样式为半圆 433 Shape() { 434 Path().width(300).height(10).commands('M0 0 L900 0') 435 } 436 .width(350) 437 .height(20) 438 .viewPort({ 439 x: 0, 440 y: -5, 441 width: 300, 442 height: 20 443 }) 444 .stroke(0xEE8443) 445 .strokeWidth(10) 446 .strokeDashArray([20]) 447 .strokeLineCap(LineCapStyle.Round) 448 449 // 在Shape的(-20, -5)点绘制一个封闭路径,颜色0x317AF7,线条宽度10,边框颜色0xEE8443,拐角样式锐角（默认值） 450 Shape() { 451 Path().width(200).height(60).commands('M0 0 L400 0 L400 150 Z') 452 } 453 .width(300) 454 .height(200) 455 .viewPort({ 456 x: -20, 457 y: -5, 458 width: 310, 459 height: 90 460 }) 461 .fill(0x317AF7) 462 .stroke(0xEE8443) 463 .strokeWidth(10) 464 .strokeLineJoin(LineJoinStyle.Miter) 465 .strokeMiterLimit(5) 466 }.width('100%').margin({ top: 15 }) 467 } 468} 469``` 470 471 472 473### 示例2（使用不同参数类型绘制图形） 474 475各属性通过不同的长度类型绘制图形。 476 477```ts 478// xxx.ets 479@Entry 480@Component 481struct ShapeTypeExample { 482 build() { 483 Column({ space: 10 }) { 484 // 在Shape的(-2, -2)点绘制一个 300 * 50 带边框的矩形,颜色0x317AF7,边框颜色黑色,边框宽度4,边框间隙20,向左偏移10,线条两端样式为半圆,拐角样式圆角,抗锯齿(默认开启) 485 // 在Shape的(-2, 58)点绘制一个 300 * 50 带边框的椭圆,颜色0x317AF7,边框颜色黑色,边框宽度4,边框间隙20,向左偏移10,线条两端样式为半圆,拐角样式圆角,抗锯齿(默认开启) 486 // 在Shape的(-2, 118)点绘制一个 300 * 10 直线路径,颜色0x317AF7,边框颜色黑色,宽度4,间隙20,向左偏移10,线条两端样式为半圆,拐角样式圆角,抗锯齿(默认开启) 487 Shape() { 488 Rect().width('300').height('50') 489 Ellipse().width(300).height(50).offset({ x: 0, y: 60 }) 490 Path().width(300).height(10).commands('M0 0 L900 0').offset({ x: 0, y: 120 }) 491 } 492 .width(350) 493 .height(140) 494 .viewPort({ 495 x: '-2', // 使用string类型 496 y: '-2', 497 width: $r('app.string.ViewportRectWidth'), // 使用Resource类型，需用户自定义 498 height: $r('app.string.ViewportRectHeight') 499 }) 500 .fill(Color.Orange) 501 .stroke(Color.Black) 502 .strokeWidth(4) 503 .strokeDashArray([20]) 504 .strokeDashOffset(10) //使用number类型 505 .strokeLineCap(LineCapStyle.Round) 506 .strokeLineJoin(LineJoinStyle.Round) 507 .strokeMiterLimit(5) 508 .antiAlias(true) 509 }.width('100%').margin({ top: 15 }) 510 } 511} 512``` 513 514 515 516### 示例3（使用attributeModifier动态设置Shape组件的属性） 517 518以下示例展示了如何使用attributeModifier动态设置Shape组件的fill、fillOpacity、stroke、strokeDashArray、strokeDashOffset、strokeLineCap、strokeLineJoin、strokeMiterLimit、strokeOpacity、strokeWidth和antiAlias属性。 519 520```ts 521// xxx.ets 522class MyShapeModifier implements AttributeModifier<ShapeAttribute> { 523 applyNormalAttribute(instance: ShapeAttribute): void { 524 // 填充颜色#707070，填充透明度0.5，边框颜色#2787D9，边框间隙[20, 15]，向左偏移15，线条两端样式为半圆，拐角样式使用尖角连接路径段，斜接长度与边框宽度比值的极限值为5，边框透明度0.5，边框宽度10，抗锯齿开启 525 instance.fill("#707070") 526 instance.fillOpacity(0.5) 527 instance.stroke("#2787D9") 528 instance.strokeDashArray([20, 15]) 529 instance.strokeDashOffset("15") 530 instance.strokeLineCap(LineCapStyle.Round) 531 instance.strokeLineJoin(LineJoinStyle.Miter) 532 instance.strokeMiterLimit(5) 533 instance.strokeOpacity(0.5) 534 instance.strokeWidth(10) 535 instance.antiAlias(true) 536 } 537} 538 539@Entry 540@Component 541struct ShapeModifierDemo { 542 @State modifier: MyShapeModifier = new MyShapeModifier() 543 544 build() { 545 Column() { 546 Shape() { 547 Rect().width(200).height(50).offset({ x: 20, y: 20 }) 548 Ellipse().width(200).height(50).offset({ x: 20, y: 80 }) 549 Path().width(200).height(10).commands('M0 0 L900 0').offset({ x: 20, y: 160 }) 550 } 551 .width(250).height(200) 552 .attributeModifier(this.modifier) 553 } 554 } 555} 556``` 557 558 559
