1# Graphics 2 3The **Graphics** module provides APIs for defining attributes of a custom node. 4 5> **NOTE** 6> 7> The initial APIs of this module are supported since API version 11. Newly added APIs will be marked with a superscript to indicate their earliest API version. 8 9## Modules to Import 10 11```ts 12import { DrawContext, Size, Offset, Position, Pivot, Scale, Translation, Matrix4, Rotation, Frame, LengthMetricsUnit } from "@kit.ArkUI"; 13``` 14 15## Size 16 17Returns the width and height of the component. The default unit is vp, but APIs that use the Size type may specify a different unit, in which case the unit specified by the API takes precedence. 18 19**Atomic service API**: This API can be used in atomic services since API version 12. 20 21**System capability**: SystemCapability.ArkUI.ArkUI.Full 22 23| Name | Type | Readable| Writable| Description | 24| ------ | ------ | ---- | ---- | ---------------------- | 25| width | number | Yes | Yes | Width of the component.<br>Unit: vp| 26| height | number | Yes | Yes | Height of the component.<br>Unit: vp| 27 28## Position 29 30type Position = Vector2 31 32Sets or returns the position of the component. 33 34**Atomic service API**: This API can be used in atomic services since API version 12. 35 36**System capability**: SystemCapability.ArkUI.ArkUI.Full 37 38| Type | Description | 39| ------------------- | ----------------------------------- | 40| [Vector2](#vector2) | A vector that contains two values: x and y.<br>Unit: vp| 41 42## PositionT<sup>12+</sup> 43 44type PositionT\<T> = Vector2T\<T> 45 46Sets or returns the position of the component. 47 48**Atomic service API**: This API can be used in atomic services since API version 12. 49 50**System capability**: SystemCapability.ArkUI.ArkUI.Full 51 52| Type | Description | 53| ---------------------------- | ----------------------------------- | 54| [Vector2T\<T>](#vector2tt12) | A vector that contains two values: x and y.<br>Unit: vp| 55 56## Frame 57 58Sets or returns the layout size and position of the component. 59 60**Atomic service API**: This API can be used in atomic services since API version 12. 61 62**System capability**: SystemCapability.ArkUI.ArkUI.Full 63 64| Name | Type | Read Only| Optional| Description | 65| ------ | ------ | ---- | ---- | --------------------------- | 66| x | number | Yes | Yes | Horizontal position.<br>Unit: vp| 67| y | number | Yes | Yes | Vertical position.<br>Unit: vp| 68| width | number | Yes | Yes | Component width.<br>Unit: vp | 69| height | number | Yes | Yes | Component height.<br>Unit: vp | 70 71## Pivot 72 73type Pivot = Vector2 74 75Sets the pivot of the component. As the rotation or scaling center of the component, the pivot affects the rotation and scaling effects. 76 77**Atomic service API**: This API can be used in atomic services since API version 12. 78 79**System capability**: SystemCapability.ArkUI.ArkUI.Full 80 81| Type | Description | 82| ------------------- | ------------------------------------------------------------ | 83| [Vector2](#vector2) | X and Y coordinates of the pivot. The value is a floating point number in the range [0.0, 1.0], and the default value is **0.5**.| 84 85## Scale 86 87type Scale = Vector2 88 89Sets the scale factor of the component. 90 91**Atomic service API**: This API can be used in atomic services since API version 12. 92 93**System capability**: SystemCapability.ArkUI.ArkUI.Full 94 95| Type | Description | 96| ------------------- | ----------------------------------------------- | 97| [Vector2](#vector2) | Scale factor along the x- and y-axis. The value is a floating point number, and the default value is **1.0**.| 98 99## Translation 100 101type Translation = Vector2 102 103Sets the translation amount of the component. 104 105**Atomic service API**: This API can be used in atomic services since API version 12. 106 107**System capability**: SystemCapability.ArkUI.ArkUI.Full 108 109| Type | Description | 110| ------------------- | ----------------------------- | 111| [Vector2](#vector2) | Translation amount along the x- and y-axis.<br>Unit: px| 112 113## Rotation 114 115type Rotation = Vector3 116 117Sets the rotation angle of the component. 118 119**Atomic service API**: This API can be used in atomic services since API version 12. 120 121**System capability**: SystemCapability.ArkUI.ArkUI.Full 122 123| Type | Description | 124| ------------------- | -------------------------------------- | 125| [Vector3](#vector3) | Rotation angle along the x- and y-axis.<br>Unit: vp| 126 127## Offset 128 129type Offset = Vector2 130 131Sets the offset of the component or effect. 132 133**Atomic service API**: This API can be used in atomic services since API version 12. 134 135**System capability**: SystemCapability.ArkUI.ArkUI.Full 136 137| Type | Description | 138| ------------------- | --------------------------------- | 139| [Vector2](#vector2) | Offset along the x- and y-axis.<br>Unit: vp| 140 141## Matrix4 142 143Sets the transformation information of the component, which is a 4 x 4 matrix represented by a 16-bit number[]. For example: 144```ts 145const transform: Matrix4 = [ 146 1, 0, 45, 0, 147 0, 1, 0, 0, 148 0, 0, 1, 0, 149 0, 0, 0, 1 150] 151``` 152 153**Atomic service API**: This API can be used in atomic services since API version 12. 154 155**System capability**: SystemCapability.ArkUI.ArkUI.Full 156 157## Vector2 158 159Defines a vector that contains the x and y coordinate values. 160 161**Atomic service API**: This API can be used in atomic services since API version 12. 162 163**System capability**: SystemCapability.ArkUI.ArkUI.Full 164 165| Name| Type | Read Only| Optional| Description | 166| ---- | ------ | ---- | ---- | ----------------- | 167| x | number | No | No | X coordinate value of the vector.| 168| y | number | No | No | Y coordinate value of the vector.| 169 170## Vector3 171 172Represents a vector including three values: x, y, and z. 173 174**Atomic service API**: This API can be used in atomic services since API version 12. 175 176**System capability**: SystemCapability.ArkUI.ArkUI.Full 177 178| Name| Type | Read Only| Optional| Description | 179| ---- | ------ | ---- | ---- | ------------------- | 180| x | number | No | No | Rotation angle along the x-axis.| 181| y | number | No | No | Rotation angle along the y-axis.| 182| z | number | No | No | Rotation angle along the z-axis.| 183 184## Vector2T\<T><sup>12+</sup> 185 186Represents a vector of the T type that contains two values: x and y. 187 188**Atomic service API**: This API can be used in atomic services since API version 12. 189 190**System capability**: SystemCapability.ArkUI.ArkUI.Full 191 192| Name| Type | Read Only| Optional| Description | 193| ---- | ------ | ---- | ---- | ----------------- | 194| x | T | No | No | X coordinate value of the vector.| 195| y | T | No | No | Y coordinate value of the vector.| 196 197## DrawContext 198 199Graphics drawing context, which provides the canvas width and height required for drawing. 200 201### size 202 203get size(): Size 204 205Obtains the width and height of the canvas. 206 207**Atomic service API**: This API can be used in atomic services since API version 12. 208 209**System capability**: SystemCapability.ArkUI.ArkUI.Full 210 211**Return value** 212 213| Type | Description | 214| ------------- | ---------------- | 215| [Size](#size) | Width and height of the canvas.| 216 217### sizeInPixel<sup>12+</sup> 218 219get sizeInPixel(): Size 220 221Obtains the width and height of the canvas in px. 222 223**Atomic service API**: This API can be used in atomic services since API version 12. 224 225**System capability**: SystemCapability.ArkUI.ArkUI.Full 226 227**Return value** 228 229| Type | Description | 230| ------------- | ---------------- | 231| [Size](#size) | Width and height of the canvas, in px.| 232 233### canvas 234 235get canvas(): drawing.Canvas 236 237Obtains the canvas used for drawing. 238 239**Atomic service API**: This API can be used in atomic services since API version 12. 240 241**System capability**: SystemCapability.ArkUI.ArkUI.Full 242 243**Return value** 244 245| Type | Description | 246| ------------- | ---------------- | 247| [drawing.Canvas](../apis-arkgraphics2d/js-apis-graphics-drawing.md#canvas) | Canvas for drawing.| 248 249**Example** 250 251```ts 252import { RenderNode, FrameNode, NodeController, DrawContext } from "@kit.ArkUI"; 253 254class MyRenderNode extends RenderNode { 255 flag: boolean = false; 256 257 draw(context: DrawContext) { 258 const size = context.size; 259 const canvas = context.canvas; 260 const sizeInPixel = context.sizeInPixel; 261 } 262} 263 264const renderNode = new MyRenderNode(); 265renderNode.frame = { x: 0, y: 0, width: 100, height: 100 }; 266renderNode.backgroundColor = 0xffff0000; 267 268class MyNodeController extends NodeController { 269 private rootNode: FrameNode | null = null; 270 271 makeNode(uiContext: UIContext): FrameNode | null { 272 this.rootNode = new FrameNode(uiContext); 273 274 const rootRenderNode = this.rootNode.getRenderNode(); 275 if (rootRenderNode !== null) { 276 rootRenderNode.appendChild(renderNode); 277 } 278 279 return this.rootNode; 280 } 281} 282 283@Entry 284@Component 285struct Index { 286 private myNodeController: MyNodeController = new MyNodeController(); 287 288 build() { 289 Row() { 290 NodeContainer(this.myNodeController) 291 } 292 } 293} 294``` 295 296## Edges\<T><sup>12+</sup> 297 298Describes the edges. 299 300**Atomic service API**: This API can be used in atomic services since API version 12. 301 302**System capability**: SystemCapability.ArkUI.ArkUI.Full 303 304| Name | Type| Readable| Writable| Description | 305| ------ | ---- | ---- | ---- | ---------------- | 306| left | T | Yes | Yes | Left edge.| 307| top | T | Yes | Yes | Top edge.| 308| right | T | Yes | Yes | Right edge.| 309| bottom | T | Yes | Yes | Bottom edge.| 310 311## LengthUnit<sup>12+</sup> 312 313Enumerates length units. 314 315**Atomic service API**: This API can be used in atomic services since API version 12. 316 317**System capability**: SystemCapability.ArkUI.ArkUI.Full 318 319| Name| Value| Description| 320| -------- | -------- | -------- | 321| [PX](arkui-ts/ts-types.md#px10) | 0 | Length in px.| 322| [VP](arkui-ts/ts-types.md#vp10) | 1 | Length in vp.| 323| [FP](arkui-ts/ts-types.md#fp10) | 2 | Length in fp.| 324| [PERCENT](arkui-ts/ts-types.md#percentage10) | 3 | Length in percentage.| 325| [LPX](arkui-ts/ts-types.md#lpx10) | 4 | Length in lpx.| 326 327## SizeT\<T><sup>12+</sup> 328 329Sets the width and height attributes. 330 331**Atomic service API**: This API can be used in atomic services since API version 12. 332 333**System capability**: SystemCapability.ArkUI.ArkUI.Full 334 335| Name | Type| Readable| Writable| Description | 336| ------ | ---- | ---- | ---- | ---------------- | 337| width | T | Yes | Yes | Width.| 338| height | T | Yes | Yes | Height.| 339 340## LengthMetricsUnit<sup>12+</sup> 341 342Enumerates length units. 343 344**Atomic service API**: This API can be used in atomic services since API version 12. 345 346**System capability**: SystemCapability.ArkUI.ArkUI.Full 347 348| Name| Value| Description| 349| -------- | -------- | -------- | 350| DEFAULT | 0 | Length in vp.| 351| PX | 1 | Length in px.| 352 353## LengthMetrics<sup>12+</sup> 354 355Sets the metrics of length. When the length unit is [PERCENT](arkui-ts/ts-types.md#percentage10), the value **1** indicates 100%. 356 357### Properties 358 359**Atomic service API**: This API can be used in atomic services since API version 12. 360 361**System capability**: SystemCapability.ArkUI.ArkUI.Full 362 363| Name | Type| Readable| Writable| Description | 364| ------------ | ---------------------------------------- | ---- | ---- | ------ | 365| value | number | Yes | Yes | Value of the length attribute. | 366| unit | [LengthUnit](#lengthunit12) | Yes | Yes | Unit of the length attribute. The default value is vp.| 367 368### constructor<sup>12+</sup> 369 370constructor(value: number, unit?: LengthUnit) 371 372Constructor used to create a **LengthMetrics** instance. If the **unit** parameter is not set or is set to **undefined**, the default unit VP is used. If the **unit** parameter is set to a value that is not of the LengthUnit type, the default value 0 VP is used. 373 374**Atomic service API**: This API can be used in atomic services since API version 12. 375 376**System capability**: SystemCapability.ArkUI.ArkUI.Full 377 378**Parameters** 379 380| Name| Type | Mandatory| Description | 381| ------ | ------------- | ---- | ------------ | 382| value | number | Yes | Value of the length attribute.| 383| unit | [LengthUnit](#lengthunit12) | No | Unit of the length attribute.| 384 385### px<sup>12+</sup> 386 387static px(value: number): LengthMetrics 388 389Creates a length attribute in px. 390 391**Atomic service API**: This API can be used in atomic services since API version 12. 392 393**System capability**: SystemCapability.ArkUI.ArkUI.Full 394 395**Parameters** 396 397| Name| Type | Mandatory| Description | 398| ------ | ------------- | ---- | ------------ | 399| value | number | Yes | Value of the length attribute.| 400 401**Return value** 402 403| Type | Description | 404| ------------- | ---------------- | 405| [LengthMetrics](#lengthmetrics12) | Instance of the **LengthMetrics** class.| 406 407### vp<sup>12+</sup> 408 409static vp(value: number): LengthMetrics 410 411Creates a length attribute in vp. 412 413**Atomic service API**: This API can be used in atomic services since API version 12. 414 415**System capability**: SystemCapability.ArkUI.ArkUI.Full 416 417**Parameters** 418 419| Name| Type | Mandatory| Description | 420| ------ | ------------- | ---- | ------------ | 421| value | number | Yes | Value of the length attribute.| 422 423**Return value** 424 425| Type | Description | 426| ------------- | ---------------- | 427| [LengthMetrics](#lengthmetrics12) | Instance of the **LengthMetrics** class.| 428 429### fp<sup>12+</sup> 430 431static fp(value: number): LengthMetrics 432 433Creates a length attribute in fp. 434 435**Atomic service API**: This API can be used in atomic services since API version 12. 436 437**System capability**: SystemCapability.ArkUI.ArkUI.Full 438 439**Parameters** 440 441| Name| Type | Mandatory| Description | 442| ------ | ------------- | ---- | ------------ | 443| value | number | Yes | Value of the length attribute.| 444 445**Return value** 446 447| Type | Description | 448| ------------- | ---------------- | 449| [LengthMetrics](#lengthmetrics12) | Instance of the **LengthMetrics** class.| 450 451### percent<sup>12+</sup> 452 453static percent(value: number): LengthMetrics 454 455Creates a length attribute in percentage. 456 457**Atomic service API**: This API can be used in atomic services since API version 12. 458 459**System capability**: SystemCapability.ArkUI.ArkUI.Full 460 461**Parameters** 462 463| Name| Type | Mandatory| Description | 464| ------ | ------------- | ---- | ------------ | 465| value | number | Yes | Value of the length attribute.| 466 467**Return value** 468 469| Type | Description | 470| ------------- | ---------------- | 471| [LengthMetrics](#lengthmetrics12) | Instance of the **LengthMetrics** class.| 472 473### lpx<sup>12+</sup> 474 475static lpx(value: number): LengthMetrics 476 477Creates a length attribute in lpx. 478 479**Atomic service API**: This API can be used in atomic services since API version 12. 480 481**System capability**: SystemCapability.ArkUI.ArkUI.Full 482 483**Parameters** 484 485| Name| Type | Mandatory| Description | 486| ------ | ------------- | ---- | ------------ | 487| value | number | Yes | Value of the length attribute.| 488 489**Return value** 490 491| Type | Description | 492| ------------- | ---------------- | 493| [LengthMetrics](#lengthmetrics12) | Instance of the **LengthMetrics** class.| 494 495### resource<sup>12+</sup> 496 497static resource(value: Resource): LengthMetrics 498 499Represents the length of a resource of the Resource type. 500 501**Atomic service API**: This API can be used in atomic services since API version 12. 502 503**System capability**: SystemCapability.ArkUI.ArkUI.Full 504 505**Parameters** 506 507| Name| Type | Mandatory| Description | 508| ------ | ------------- | ---- | ------------ | 509| value | Resource | Yes | Value of the length attribute.| 510 511**Return value** 512 513| Type | Description | 514| ------------- | ---------------- | 515| [LengthMetrics](#lengthmetrics12) | Instance of the **LengthMetrics** class.| 516 517**Error codes** 518 519For details about the error codes, see [Universal Error Codes](../errorcode-universal.md) and [System Resource Error Codes](errorcode-system-resource.md). 520 521| ID| Error Message | 522| -------- | ------------------------------------------ | 523| 180001 | System resources does not exist. | 524| 180002 | The type of system resources is incorrect. | 525 526## ColorMetrics<sup>12+</sup> 527 528Used to mix colors. 529 530**System capability**: SystemCapability.ArkUI.ArkUI.Full 531 532### numeric<sup>12+</sup> 533 534static numeric(value: number): ColorMetrics 535 536Instantiates the **ColorMetrics** class using colors in HEX format. 537 538**Atomic service API**: This API can be used in atomic services since API version 12. 539 540**System capability**: SystemCapability.ArkUI.ArkUI.Full 541 542**Parameters** 543 544| Name| Type | Mandatory| Description | 545| ------ | ------------- | ---- | ------------ | 546| value | number | Yes | Color in hexadecimal notation. RGB and ARGB are supported.| 547 548**Return value** 549 550| Type | Description | 551| ------------- | ---------------- | 552| [ColorMetrics](#colormetrics12) | Instance of the **ColorMetrics** class.| 553 554### rgba<sup>12+</sup> 555 556static rgba(red: number, green: number, blue: number, alpha?: number): ColorMetrics 557 558Instantiates the **ColorMetrics** class using colors in RGB or RGBA format. 559 560**Atomic service API**: This API can be used in atomic services since API version 12. 561 562**System capability**: SystemCapability.ArkUI.ArkUI.Full 563 564**Parameters** 565 566| Name| Type | Mandatory| Description | 567| ------ | ------------- | ---- | ------------ | 568| red | number | Yes | Red component of the color. The value is an integer ranging from 0 to 255.| 569| green | number | Yes | Green component of the color. The value is an integer ranging from 0 to 255.| 570| blue | number | Yes | Blue component of the color. The value is an integer ranging from 0 to 255.| 571| alpha | number | No | Alpha component of the color. The value is a floating point number ranging from 0 to 1.0.| 572 573**Return value** 574 575| Type | Description | 576| ------------- | ---------------- | 577| [ColorMetrics](#colormetrics12) | Instance of the **ColorMetrics** class.| 578 579### resourceColor<sup>12+</sup> 580 581static resourceColor(color: ResourceColor): ColorMetrics 582 583Instantiates the **ColorMetrics** class using a resource format color. 584 585**Atomic service API**: This API can be used in atomic services since API version 12. 586 587**System capability**: SystemCapability.ArkUI.ArkUI.Full 588 589**Parameters** 590 591| Name| Type | Mandatory| Description | 592| ------ | ------------- | ---- | ------------ | 593| color | [ResourceColor](arkui-ts/ts-types.md#resourcecolor) | Yes| Resource format color.| 594 595**Return value** 596 597| Type | Description | 598| ------------- | ---------------- | 599| [ColorMetrics](#colormetrics12) | Instance of the **ColorMetrics** class.| 600 601**Error codes** 602 603For details about the error codes, see [Universal Error Codes](../errorcode-universal.md) and [System Resource Error Codes](errorcode-system-resource.md). 604 605| ID| Error Message| 606| -------- | ---------------------------------------- | 607| 401 | Parameter error. Possible cause:1.The type of the input color parameter is not ResourceColor;2.The format of the input color string is not RGB or RGBA. | 608| 180003 | Failed to obtain the color resource. | 609 610### blendColor<sup>12+</sup> 611 612blendColor(overlayColor: ColorMetrics): ColorMetrics 613 614Blends colors. 615 616**Atomic service API**: This API can be used in atomic services since API version 12. 617 618**System capability**: SystemCapability.ArkUI.ArkUI.Full 619 620**Parameters** 621 622| Name| Type | Mandatory| Description | 623| ------ | ------------- | ---- | ------------ | 624| overlayColor | [ColorMetrics](#colormetrics12) | Yes| Instance of the **ColorMetrics** class for overlaying colors.| 625 626**Return value** 627 628| Type | Description | 629| ------------- | ---------------- | 630| [ColorMetrics](#colormetrics12) | Instance of the **ColorMetrics** class after color blending.| 631 632**Error codes** 633 634For details about the error codes, see [Universal Error Codes](../errorcode-universal.md). 635 636| ID| Error Message| 637| -------- | ---------------------------------------- | 638| 401 | Parameter error. The type of the input parameter is not ColorMetrics. | 639 640### color<sup>12+</sup> 641 642get color(): string 643 644Obtains the color of **ColorMetrics**. The return value is a string indicating an RGBA color value. 645 646**Atomic service API**: This API can be used in atomic services since API version 12. 647 648**System capability**: SystemCapability.ArkUI.ArkUI.Full 649 650**Return value** 651 652| Type | Description | 653| ------------- | ---------------- | 654| string | String indicating an RGBA color value. Example: **'rgba(255, 100, 255, 0.5)'**| 655 656### red<sup>12+</sup> 657 658get red(): number 659 660Obtains the red component of the ColorMetrics color. 661 662**Atomic service API**: This API can be used in atomic services since API version 12. 663 664**System capability**: SystemCapability.ArkUI.ArkUI.Full 665 666**Return value** 667 668| Type | Description | 669| ------------- | ---------------- | 670| number | Red component of the color. The value is an integer ranging from 0 to 255.| 671 672### green<sup>12+</sup> 673 674get green(): number 675 676Obtains the green component of the ColorMetrics color. 677 678**Atomic service API**: This API can be used in atomic services since API version 12. 679 680**System capability**: SystemCapability.ArkUI.ArkUI.Full 681 682**Return value** 683 684| Type | Description | 685| ------------- | ---------------- | 686| number | Green component of the color. The value is an integer ranging from 0 to 255.| 687 688### blue<sup>12+</sup> 689 690get blue(): number 691 692Obtains the blue component of the ColorMetrics color. 693 694**Atomic service API**: This API can be used in atomic services since API version 12. 695 696**System capability**: SystemCapability.ArkUI.ArkUI.Full 697 698**Return value** 699 700| Type | Description | 701| ------------- | ---------------- | 702| number | Blue component of the color. The value is an integer ranging from 0 to 255.| 703 704### alpha<sup>12+</sup> 705 706get alpha(): number 707 708Obtains the alpha component of the ColorMetrics color. 709 710**Atomic service API**: This API can be used in atomic services since API version 12. 711 712**System capability**: SystemCapability.ArkUI.ArkUI.Full 713 714**Return value** 715 716| Type | Description | 717| ------------- | ---------------- | 718| number | Alpha component of the color. The value is an integer ranging from 0 to 255.| 719 720**Example** 721 722```ts 723import { ColorMetrics } from '@kit.ArkUI'; 724import { BusinessError } from '@kit.BasicServicesKit'; 725 726function getBlendColor(baseColor: ResourceColor):ColorMetrics { 727 let sourceColor:ColorMetrics; 728 try { 729 // When resourceColor and blendColor of ColorMetrics are used, add exception handling. 730 // Error codes 401 and 180003 of the ArkUI subsystem may be returned. 731 sourceColor = ColorMetrics.resourceColor(baseColor).blendColor(ColorMetrics.resourceColor("#19000000")); 732 } catch (error) { 733 console.log("getBlendColor failed, code = " + (error as BusinessError).code + ", message = " + (error as BusinessError).message); 734 sourceColor = ColorMetrics.resourceColor("#19000000"); 735 } 736 return sourceColor; 737} 738 739@Entry 740@Component 741struct ColorMetricsSample { 742 build() { 743 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 744 Button("ColorMetrics") 745 .width('80%') 746 .align(Alignment.Center) 747 .height(50) 748 .backgroundColor(getBlendColor($r("app.color.background_red")).color) 749 } 750 .width('100%') 751 .height('100%') 752 } 753} 754``` 755## Corners\<T><sup>12+</sup> 756 757Describes the four corners. 758 759**Atomic service API**: This API can be used in atomic services since API version 12. 760 761**System capability**: SystemCapability.ArkUI.ArkUI.Full 762 763| Name | Type| Readable| Writable| Description | 764| ----------- | ---- | ---- | ---- | ---------------------- | 765| topLeft | T | Yes | Yes | Radius of the upper left corner. | 766| topRight | T | Yes | Yes | Radius of the upper right corner.| 767| bottomLeft | T | Yes | Yes | Radius of the lower left corner. | 768| bottomRight | T | Yes | Yes | Radius of the lower right corner. | 769 770## CornerRadius<sup>12+</sup> 771 772type CornerRadius = Corners\<Vector2> 773 774Sets the radius for the four corners. 775 776**Atomic service API**: This API can be used in atomic services since API version 12. 777 778**System capability**: SystemCapability.ArkUI.ArkUI.Full 779 780| Type | Description | 781| -------------------------------------------- | ------------------ | 782| [Corners](#cornerst12)[\<Vector2>](#vector2) | Radius of the four corners.| 783 784## BorderRadiuses<sup>12+</sup> 785 786type BorderRadiuses = Corners\<number> 787 788Sets the radius for the four border corners. 789 790**Atomic service API**: This API can be used in atomic services since API version 12. 791 792**System capability**: SystemCapability.ArkUI.ArkUI.Full 793 794| Type | Description | 795| ------------------------------- | ------------------ | 796| [Corners\<number>](#cornerst12) | Radius of the four border corners.| 797 798## Rect<sup>12+</sup> 799 800type Rect = common2D.Rect 801 802Describes a rectangle. 803 804**Atomic service API**: This API can be used in atomic services since API version 12. 805 806**System capability**: SystemCapability.ArkUI.ArkUI.Full 807 808| Type | Description | 809| ------------------------------------------------------------ | ---------- | 810| [common2D.Rect](../apis-arkgraphics2d/js-apis-graphics-common2D.md#rect) | Rectangle.| 811 812## RoundRect<sup>12+</sup> 813 814Describes a rectangle with rounded corners. 815 816**Atomic service API**: This API can be used in atomic services since API version 12. 817 818**System capability**: SystemCapability.ArkUI.ArkUI.Full 819 820| Name | Type | Readable| Writable| Description | 821| ------- | ----------------------------- | ---- | ---- | ---------------- | 822| rect | [Rect](#rect12) | Yes | Yes | Attributes of the rectangle.| 823| corners | [CornerRadius](#cornerradius12) | Yes | Yes | Attributes of rounded corners.| 824 825## Circle<sup>12+</sup> 826 827Describes a circle. 828 829**Atomic service API**: This API can be used in atomic services since API version 12. 830 831**System capability**: SystemCapability.ArkUI.ArkUI.Full 832 833| Name | Type | Readable| Writable| Description | 834| ------- | ------ | ---- | ---- | ------------------------- | 835| centerX | number | Yes | Yes | X coordinate of the center of the circle, in px.| 836| centerY | number | Yes | Yes | Y coordinate of the center of the circle, in px.| 837| radius | number | Yes | Yes | Radius of the circle, in px. | 838 839## CommandPath<sup>12+</sup> 840 841Describes the command for drawing a path. 842 843**Atomic service API**: This API can be used in atomic services since API version 12. 844 845**System capability**: SystemCapability.ArkUI.ArkUI.Full 846 847| Name | Type | Readable| Writable| Description | 848| ------------------------------------------------------------ | ------ | ---- | ---- | ------------------------------------------------------------ | 849| [commands](./arkui-ts/ts-drawing-components-path.md#commands-1) | string | Yes | Yes | Commands for drawing a path. For details about how to convert the pixel unit, see [Pixel Unit Conversion](./arkui-ts/ts-pixel-units.md#pixel-unit-conversion).<br>Unit: px| 850 851## ShapeMask<sup>12+</sup> 852 853Describes the shape mask. 854 855### constructor<sup>12+</sup> 856 857constructor() 858 859A constructor used to create a **ShapeMask** instance. 860 861**Atomic service API**: This API can be used in atomic services since API version 12. 862 863**System capability**: SystemCapability.ArkUI.ArkUI.Full 864 865### setRectShape<sup>12+</sup> 866 867setRectShape(rect: Rect): void 868 869Sets a rectangle mask. 870 871**Atomic service API**: This API can be used in atomic services since API version 12. 872 873**System capability**: SystemCapability.ArkUI.ArkUI.Full 874 875**Parameters** 876 877| Name| Type | Mandatory| Description | 878| ------ | ------------- | ---- | ------------ | 879| rect | [Rect](#rect12) | Yes | Shape of the rectangle.| 880 881**Example** 882 883```ts 884import { RenderNode, FrameNode, NodeController, ShapeMask } from '@kit.ArkUI'; 885 886const mask = new ShapeMask(); 887mask.setRectShape({ left: 0, right: vp2px(150), top: 0, bottom: vp2px(150) }); 888mask.fillColor = 0X55FF0000; 889 890const renderNode = new RenderNode(); 891renderNode.frame = { x: 0, y: 0, width: 150, height: 150 }; 892renderNode.backgroundColor = 0XFF00FF00; 893renderNode.shapeMask = mask; 894 895 896class MyNodeController extends NodeController { 897 private rootNode: FrameNode | null = null; 898 899 makeNode(uiContext: UIContext): FrameNode | null { 900 this.rootNode = new FrameNode(uiContext); 901 902 const rootRenderNode = this.rootNode.getRenderNode(); 903 if (rootRenderNode !== null) { 904 rootRenderNode.appendChild(renderNode); 905 } 906 907 return this.rootNode; 908 } 909} 910 911@Entry 912@Component 913struct Index { 914 private myNodeController: MyNodeController = new MyNodeController(); 915 916 build() { 917 Row() { 918 NodeContainer(this.myNodeController) 919 } 920 } 921} 922``` 923 924### setRoundRectShape<sup>12+</sup> 925 926setRoundRectShape(roundRect: RoundRect): void 927 928Sets the mask in the shape of a rectangle with rounded corners. 929 930**Atomic service API**: This API can be used in atomic services since API version 12. 931 932**System capability**: SystemCapability.ArkUI.ArkUI.Full 933 934**Parameters** 935 936| Name | Type | Mandatory| Description | 937| --------- | ----------------------- | ---- | ---------------- | 938| roundRect | [RoundRect](#roundrect12) | Yes | Shape of the rectangle with rounded corners.| 939 940**Example** 941 942```ts 943import { RenderNode, FrameNode, NodeController, ShapeMask,RoundRect} from '@kit.ArkUI'; 944 945const mask = new ShapeMask(); 946const roundRect: RoundRect = { 947 rect: { left: 0, top: 0, right: vp2px(150), bottom: vp2px(150) }, 948 corners: { 949 topLeft: { x: 32, y: 32 }, 950 topRight: { x: 32, y: 32 }, 951 bottomLeft: { x: 32, y: 32 }, 952 bottomRight: { x: 32, y: 32 } 953 } 954} 955mask.setRoundRectShape(roundRect); 956mask.fillColor = 0X55FF0000; 957 958const renderNode = new RenderNode(); 959renderNode.frame = { x: 0, y: 0, width: 150, height: 150 }; 960renderNode.backgroundColor = 0XFF00FF00; 961renderNode.shapeMask = mask; 962 963 964class MyNodeController extends NodeController { 965 private rootNode: FrameNode | null = null; 966 967 makeNode(uiContext: UIContext): FrameNode | null { 968 this.rootNode = new FrameNode(uiContext); 969 970 const rootRenderNode = this.rootNode.getRenderNode(); 971 if (rootRenderNode !== null) { 972 rootRenderNode.appendChild(renderNode); 973 } 974 975 return this.rootNode; 976 } 977} 978 979@Entry 980@Component 981struct Index { 982 private myNodeController: MyNodeController = new MyNodeController(); 983 984 build() { 985 Row() { 986 NodeContainer(this.myNodeController) 987 } 988 } 989} 990``` 991 992### setCircleShape<sup>12+</sup> 993 994setCircleShape(circle: Circle): void 995 996Sets a round mask. 997 998**Atomic service API**: This API can be used in atomic services since API version 12. 999 1000**System capability**: SystemCapability.ArkUI.ArkUI.Full 1001 1002**Parameters** 1003 1004| Name| Type | Mandatory| Description | 1005| ------ | ----------------- | ---- | ------------ | 1006| circle | [Circle](#circle12) | Yes | Round shape.| 1007 1008**Example** 1009 1010```ts 1011import { RenderNode, FrameNode, NodeController, ShapeMask } from '@kit.ArkUI'; 1012 1013const mask = new ShapeMask(); 1014mask.setCircleShape({ centerY: vp2px(75), centerX: vp2px(75), radius: vp2px(75) }); 1015mask.fillColor = 0X55FF0000; 1016 1017const renderNode = new RenderNode(); 1018renderNode.frame = { x: 0, y: 0, width: 150, height: 150 }; 1019renderNode.backgroundColor = 0XFF00FF00; 1020renderNode.shapeMask = mask; 1021 1022 1023class MyNodeController extends NodeController { 1024 private rootNode: FrameNode | null = null; 1025 1026 makeNode(uiContext: UIContext): FrameNode | null { 1027 this.rootNode = new FrameNode(uiContext); 1028 1029 const rootRenderNode = this.rootNode.getRenderNode(); 1030 if (rootRenderNode !== null) { 1031 rootRenderNode.appendChild(renderNode); 1032 } 1033 1034 return this.rootNode; 1035 } 1036} 1037 1038@Entry 1039@Component 1040struct Index { 1041 private myNodeController: MyNodeController = new MyNodeController(); 1042 1043 build() { 1044 Row() { 1045 NodeContainer(this.myNodeController) 1046 } 1047 } 1048} 1049``` 1050 1051### setOvalShape<sup>12+</sup> 1052 1053setOvalShape(oval: Rect): void 1054 1055Sets an oval mask. 1056 1057**Atomic service API**: This API can be used in atomic services since API version 12. 1058 1059**System capability**: SystemCapability.ArkUI.ArkUI.Full 1060 1061**Parameters** 1062 1063| Name| Type | Mandatory| Description | 1064| ------ | ------------- | ---- | -------------- | 1065| oval | [Rect](#rect12) | Yes | Oval shape.| 1066 1067**Example** 1068 1069```ts 1070import { RenderNode, FrameNode, NodeController, ShapeMask } from '@kit.ArkUI'; 1071 1072const mask = new ShapeMask(); 1073mask.setOvalShape({ left: 0, right: vp2px(150), top: 0, bottom: vp2px(100) }); 1074mask.fillColor = 0X55FF0000; 1075 1076const renderNode = new RenderNode(); 1077renderNode.frame = { x: 0, y: 0, width: 150, height: 150 }; 1078renderNode.backgroundColor = 0XFF00FF00; 1079renderNode.shapeMask = mask; 1080 1081 1082class MyNodeController extends NodeController { 1083 private rootNode: FrameNode | null = null; 1084 1085 makeNode(uiContext: UIContext): FrameNode | null { 1086 this.rootNode = new FrameNode(uiContext); 1087 1088 const rootRenderNode = this.rootNode.getRenderNode(); 1089 if (rootRenderNode !== null) { 1090 rootRenderNode.appendChild(renderNode); 1091 } 1092 1093 return this.rootNode; 1094 } 1095} 1096 1097@Entry 1098@Component 1099struct Index { 1100 private myNodeController: MyNodeController = new MyNodeController(); 1101 1102 build() { 1103 Row() { 1104 NodeContainer(this.myNodeController) 1105 } 1106 } 1107} 1108``` 1109 1110### setCommandPath<sup>12+</sup> 1111 1112setCommandPath(path: CommandPath): void 1113 1114Sets the command for drawing a path. 1115 1116**Atomic service API**: This API can be used in atomic services since API version 12. 1117 1118**System capability**: SystemCapability.ArkUI.ArkUI.Full 1119 1120**Parameters** 1121 1122| Name| Type | Mandatory| Description | 1123| ------ | --------------------------- | ---- | -------------- | 1124| path | [CommandPath](#commandpath12) | Yes | Command for drawing a path.| 1125 1126**Example** 1127 1128```ts 1129import { RenderNode, FrameNode, NodeController, ShapeMask } from '@kit.ArkUI'; 1130 1131const mask = new ShapeMask(); 1132mask.setCommandPath({ commands: "M100 0 L0 100 L50 200 L150 200 L200 100 Z" }); 1133mask.fillColor = 0X55FF0000; 1134 1135const renderNode = new RenderNode(); 1136renderNode.frame = { x: 0, y: 0, width: 150, height: 150 }; 1137renderNode.backgroundColor = 0XFF00FF00; 1138renderNode.shapeMask = mask; 1139 1140 1141class MyNodeController extends NodeController { 1142 private rootNode: FrameNode | null = null; 1143 1144 makeNode(uiContext: UIContext): FrameNode | null { 1145 this.rootNode = new FrameNode(uiContext); 1146 1147 const rootRenderNode = this.rootNode.getRenderNode(); 1148 if (rootRenderNode !== null) { 1149 rootRenderNode.appendChild(renderNode); 1150 } 1151 1152 return this.rootNode; 1153 } 1154} 1155 1156@Entry 1157@Component 1158struct Index { 1159 private myNodeController: MyNodeController = new MyNodeController(); 1160 1161 build() { 1162 Row() { 1163 NodeContainer(this.myNodeController) 1164 } 1165 } 1166} 1167``` 1168 1169### fillColor<sup>12+</sup> 1170 1171fillColor: number 1172 1173Describes the fill color of the mask, in ARGB format. The default value is **0XFF000000**. 1174 1175**Atomic service API**: This API can be used in atomic services since API version 12. 1176 1177**System capability**: SystemCapability.ArkUI.ArkUI.Full 1178 1179**Example** 1180 1181```ts 1182import { RenderNode, FrameNode, NodeController, ShapeMask } from '@kit.ArkUI'; 1183 1184const mask = new ShapeMask(); 1185mask.setRectShape({ left: 0, right: 150, top: 0, bottom: 150 }); 1186mask.fillColor = 0X55FF0000; 1187 1188const renderNode = new RenderNode(); 1189renderNode.frame = { x: 0, y: 0, width: 150, height: 150 }; 1190renderNode.backgroundColor = 0XFF00FF00; 1191renderNode.shapeMask = mask; 1192 1193 1194class MyNodeController extends NodeController { 1195 private rootNode: FrameNode | null = null; 1196 1197 makeNode(uiContext: UIContext): FrameNode | null { 1198 this.rootNode = new FrameNode(uiContext); 1199 1200 const rootRenderNode = this.rootNode.getRenderNode(); 1201 if (rootRenderNode !== null) { 1202 rootRenderNode.appendChild(renderNode); 1203 } 1204 1205 return this.rootNode; 1206 } 1207} 1208 1209@Entry 1210@Component 1211struct Index { 1212 private myNodeController: MyNodeController = new MyNodeController(); 1213 1214 build() { 1215 Row() { 1216 NodeContainer(this.myNodeController) 1217 } 1218 } 1219} 1220``` 1221 1222### strokeColor<sup>12+</sup> 1223 1224strokeColor: number 1225 1226Sets the stroke color for the mask, in ARGB format. The default value is **0XFF000000**. 1227 1228**Atomic service API**: This API can be used in atomic services since API version 12. 1229 1230**System capability**: SystemCapability.ArkUI.ArkUI.Full 1231 1232**Example** 1233 1234```ts 1235import { RenderNode, FrameNode, NodeController, ShapeMask } from '@kit.ArkUI'; 1236 1237const mask = new ShapeMask(); 1238mask.setRectShape({ left: 0, right: 150, top: 0, bottom: 150 }); 1239mask.strokeColor = 0XFFFF0000; 1240mask.strokeWidth = 24; 1241 1242const renderNode = new RenderNode(); 1243renderNode.frame = { x: 0, y: 0, width: 150, height: 150 }; 1244renderNode.backgroundColor = 0XFF00FF00; 1245renderNode.shapeMask = mask; 1246 1247 1248class MyNodeController extends NodeController { 1249 private rootNode: FrameNode | null = null; 1250 1251 makeNode(uiContext: UIContext): FrameNode | null { 1252 this.rootNode = new FrameNode(uiContext); 1253 1254 const rootRenderNode = this.rootNode.getRenderNode(); 1255 if (rootRenderNode !== null) { 1256 rootRenderNode.appendChild(renderNode); 1257 } 1258 1259 return this.rootNode; 1260 } 1261} 1262 1263@Entry 1264@Component 1265struct Index { 1266 private myNodeController: MyNodeController = new MyNodeController(); 1267 1268 build() { 1269 Row() { 1270 NodeContainer(this.myNodeController) 1271 } 1272 } 1273} 1274``` 1275 1276### strokeWidth<sup>12+</sup> 1277 1278strokeWidth: number 1279 1280Sets the stroke width for the mask, in px. The default value is **0**. 1281 1282**Atomic service API**: This API can be used in atomic services since API version 12. 1283 1284**System capability**: SystemCapability.ArkUI.ArkUI.Full 1285 1286**Example** 1287 1288```ts 1289import { RenderNode, FrameNode, NodeController, ShapeMask } from '@kit.ArkUI'; 1290 1291const mask = new ShapeMask(); 1292mask.setRectShape({ left: 0, right: 150, top: 0, bottom: 150 }); 1293mask.strokeColor = 0XFFFF0000; 1294mask.strokeWidth = 24; 1295 1296const renderNode = new RenderNode(); 1297renderNode.frame = { x: 0, y: 0, width: 150, height: 150 }; 1298renderNode.backgroundColor = 0XFF00FF00; 1299renderNode.shapeMask = mask; 1300 1301 1302class MyNodeController extends NodeController { 1303 private rootNode: FrameNode | null = null; 1304 1305 makeNode(uiContext: UIContext): FrameNode | null { 1306 this.rootNode = new FrameNode(uiContext); 1307 1308 const rootRenderNode = this.rootNode.getRenderNode(); 1309 if (rootRenderNode !== null) { 1310 rootRenderNode.appendChild(renderNode); 1311 } 1312 1313 return this.rootNode; 1314 } 1315} 1316 1317@Entry 1318@Component 1319struct Index { 1320 private myNodeController: MyNodeController = new MyNodeController(); 1321 1322 build() { 1323 Row() { 1324 NodeContainer(this.myNodeController) 1325 } 1326 } 1327} 1328``` 1329 1330## ShapeClip<sup>12+</sup> 1331 1332Sets the clipping shape. 1333 1334### constructor<sup>12+</sup> 1335 1336constructor() 1337 1338A constructor used to create a **ShapeClip** object. 1339 1340**System capability**: SystemCapability.ArkUI.ArkUI.Full 1341 1342**Atomic service API**: This API can be used in atomic services since API version 12. 1343 1344### setRectShape<sup>12+</sup> 1345 1346setRectShape(rect: Rect): void 1347 1348Sets a rectangle as the clipping shape. 1349 1350**System capability**: SystemCapability.ArkUI.ArkUI.Full 1351 1352**Atomic service API**: This API can be used in atomic services since API version 12. 1353 1354**Parameters** 1355 1356| Name| Type | Mandatory| Description | 1357| ------ | ------------- | ---- | ------------ | 1358| rect | [Rect](#rect12) | Yes | Shape of the rectangle.| 1359 1360**Example** 1361 1362```ts 1363import { RenderNode, FrameNode, NodeController, ShapeClip } from '@kit.ArkUI'; 1364 1365const clip = new ShapeClip(); 1366clip.setCommandPath({ commands: "M100 0 L0 100 L50 200 L150 200 L200 100 Z" }); 1367 1368const renderNode = new RenderNode(); 1369renderNode.frame = { 1370 x: 0, 1371 y: 0, 1372 width: 150, 1373 height: 150 1374}; 1375renderNode.backgroundColor = 0XFF00FF00; 1376renderNode.shapeClip = clip; 1377const shapeClip = renderNode.shapeClip; 1378 1379class MyNodeController extends NodeController { 1380 private rootNode: FrameNode | null = null; 1381 1382 makeNode(uiContext: UIContext): FrameNode | null { 1383 this.rootNode = new FrameNode(uiContext); 1384 1385 const rootRenderNode = this.rootNode.getRenderNode(); 1386 if (rootRenderNode !== null) { 1387 rootRenderNode.appendChild(renderNode); 1388 } 1389 1390 return this.rootNode; 1391 } 1392} 1393 1394@Entry 1395@Component 1396struct Index { 1397 private myNodeController: MyNodeController = new MyNodeController(); 1398 1399 build() { 1400 Column() { 1401 NodeContainer(this.myNodeController) 1402 .borderWidth(1) 1403 Button("setRectShape") 1404 .onClick(() => { 1405 shapeClip.setRectShape({ 1406 left: 0, 1407 right: 150, 1408 top: 0, 1409 bottom: 150 1410 }); 1411 renderNode.shapeClip = shapeClip; 1412 }) 1413 } 1414 } 1415} 1416``` 1417 1418### setRoundRectShape<sup>12+</sup> 1419 1420setRoundRectShape(roundRect: RoundRect): void 1421 1422Sets a rectangle with rounded corners for shape clipping. 1423 1424**System capability**: SystemCapability.ArkUI.ArkUI.Full 1425 1426**Atomic service API**: This API can be used in atomic services since API version 12. 1427 1428**Parameters** 1429 1430| Name | Type | Mandatory| Description | 1431| --------- | ----------------------- | ---- | ---------------- | 1432| roundRect | [RoundRect](#roundrect12) | Yes | Shape of the rectangle with rounded corners.| 1433 1434**Example** 1435```ts 1436import { RenderNode, FrameNode, NodeController, ShapeClip } from '@kit.ArkUI'; 1437 1438const clip = new ShapeClip(); 1439clip.setCommandPath({ commands: "M100 0 L0 100 L50 200 L150 200 L200 100 Z" }); 1440 1441const renderNode = new RenderNode(); 1442renderNode.frame = { 1443 x: 0, 1444 y: 0, 1445 width: 150, 1446 height: 150 1447}; 1448renderNode.backgroundColor = 0XFF00FF00; 1449renderNode.shapeClip = clip; 1450 1451class MyNodeController extends NodeController { 1452 private rootNode: FrameNode | null = null; 1453 1454 makeNode(uiContext: UIContext): FrameNode | null { 1455 this.rootNode = new FrameNode(uiContext); 1456 1457 const rootRenderNode = this.rootNode.getRenderNode(); 1458 if (rootRenderNode !== null) { 1459 rootRenderNode.appendChild(renderNode); 1460 } 1461 1462 return this.rootNode; 1463 } 1464} 1465 1466@Entry 1467@Component 1468struct Index { 1469 private myNodeController: MyNodeController = new MyNodeController(); 1470 1471 build() { 1472 Column() { 1473 NodeContainer(this.myNodeController) 1474 .borderWidth(1) 1475 Button("setRoundRectShape") 1476 .onClick(() => { 1477 renderNode.shapeClip.setRoundRectShape({ 1478 rect: { 1479 left: 0, 1480 top: 0, 1481 right: vp2px(150), 1482 bottom: vp2px(150) 1483 }, 1484 corners: { 1485 topLeft: { x: 32, y: 32 }, 1486 topRight: { x: 32, y: 32 }, 1487 bottomLeft: { x: 32, y: 32 }, 1488 bottomRight: { x: 32, y: 32 } 1489 } 1490 }); 1491 renderNode.shapeClip = renderNode.shapeClip; 1492 }) 1493 } 1494 } 1495} 1496``` 1497 1498### setCircleShape<sup>12+</sup> 1499 1500setCircleShape(circle: Circle): void 1501 1502Sets a circle as the clipping shape. 1503 1504**System capability**: SystemCapability.ArkUI.ArkUI.Full 1505 1506**Atomic service API**: This API can be used in atomic services since API version 12. 1507 1508**Parameters** 1509 1510| Name| Type | Mandatory| Description | 1511| ------ | ----------------- | ---- | ------------ | 1512| circle | [Circle](#circle12) | Yes | Round shape.| 1513 1514**Example** 1515 1516```ts 1517import { RenderNode, FrameNode, NodeController, ShapeClip } from '@kit.ArkUI'; 1518 1519const clip = new ShapeClip(); 1520clip.setCommandPath({ commands: "M100 0 L0 100 L50 200 L150 200 L200 100 Z" }); 1521 1522const renderNode = new RenderNode(); 1523renderNode.frame = { 1524 x: 0, 1525 y: 0, 1526 width: 150, 1527 height: 150 1528}; 1529renderNode.backgroundColor = 0XFF00FF00; 1530renderNode.shapeClip = clip; 1531 1532class MyNodeController extends NodeController { 1533 private rootNode: FrameNode | null = null; 1534 1535 makeNode(uiContext: UIContext): FrameNode | null { 1536 this.rootNode = new FrameNode(uiContext); 1537 1538 const rootRenderNode = this.rootNode.getRenderNode(); 1539 if (rootRenderNode !== null) { 1540 rootRenderNode.appendChild(renderNode); 1541 } 1542 1543 return this.rootNode; 1544 } 1545} 1546 1547@Entry 1548@Component 1549struct Index { 1550 private myNodeController: MyNodeController = new MyNodeController(); 1551 1552 build() { 1553 Column() { 1554 NodeContainer(this.myNodeController) 1555 .borderWidth(1) 1556 Button("setCircleShape") 1557 .onClick(() => { 1558 renderNode.shapeClip.setCircleShape({ centerY: 75, centerX: 75, radius: 75 }); 1559 renderNode.shapeClip = renderNode.shapeClip; 1560 1561 }) 1562 } 1563 } 1564} 1565``` 1566 1567### setOvalShape<sup>12+</sup> 1568 1569setOvalShape(oval: Rect): void 1570 1571Sets an oval shape as the clipping shape. 1572 1573**System capability**: SystemCapability.ArkUI.ArkUI.Full 1574 1575**Atomic service API**: This API can be used in atomic services since API version 12. 1576 1577**Parameters** 1578 1579| Name| Type | Mandatory| Description | 1580| ------ | ------------- | ---- | -------------- | 1581| oval | [Rect](#rect12) | Yes | Oval shape.| 1582 1583**Example** 1584 1585```ts 1586import { RenderNode, FrameNode, NodeController, ShapeClip } from '@kit.ArkUI'; 1587 1588const clip = new ShapeClip(); 1589clip.setCommandPath({ commands: "M100 0 L0 100 L50 200 L150 200 L200 100 Z" }); 1590 1591const renderNode = new RenderNode(); 1592renderNode.frame = { 1593 x: 0, 1594 y: 0, 1595 width: 150, 1596 height: 150 1597}; 1598renderNode.backgroundColor = 0XFF00FF00; 1599renderNode.shapeClip = clip; 1600 1601class MyNodeController extends NodeController { 1602 private rootNode: FrameNode | null = null; 1603 1604 makeNode(uiContext: UIContext): FrameNode | null { 1605 this.rootNode = new FrameNode(uiContext); 1606 1607 const rootRenderNode = this.rootNode.getRenderNode(); 1608 if (rootRenderNode !== null) { 1609 rootRenderNode.appendChild(renderNode); 1610 } 1611 1612 return this.rootNode; 1613 } 1614} 1615 1616@Entry 1617@Component 1618struct Index { 1619 private myNodeController: MyNodeController = new MyNodeController(); 1620 1621 build() { 1622 Column() { 1623 NodeContainer(this.myNodeController) 1624 .borderWidth(1) 1625 Button("setOvalShape") 1626 .onClick(() => { 1627 renderNode.shapeClip.setOvalShape({ 1628 left: 0, 1629 right: vp2px(150), 1630 top: 0, 1631 bottom: vp2px(100) 1632 }); 1633 renderNode.shapeClip = renderNode.shapeClip; 1634 }) 1635 } 1636 } 1637} 1638``` 1639 1640### setCommandPath<sup>12+</sup> 1641 1642setCommandPath(path: CommandPath): void 1643 1644Sets the command for drawing a path. 1645 1646**System capability**: SystemCapability.ArkUI.ArkUI.Full 1647 1648**Atomic service API**: This API can be used in atomic services since API version 12. 1649 1650**Parameters** 1651 1652| Name| Type | Mandatory| Description | 1653| ------ | --------------------------- | ---- | -------------- | 1654| path | [CommandPath](#commandpath12) | Yes | Command for drawing a path.| 1655 1656**Example** 1657 1658```ts 1659import { RenderNode, FrameNode, NodeController, ShapeClip } from '@kit.ArkUI'; 1660 1661const clip = new ShapeClip(); 1662clip.setCommandPath({ commands: "M100 0 L0 100 L50 200 L150 200 L200 100 Z" }); 1663 1664const renderNode = new RenderNode(); 1665renderNode.frame = { x: 0, y: 0, width: 150, height: 150 }; 1666renderNode.backgroundColor = 0XFF00FF00; 1667renderNode.shapeClip = clip; 1668 1669class MyNodeController extends NodeController { 1670 private rootNode: FrameNode | null = null; 1671 1672 makeNode(uiContext: UIContext): FrameNode | null { 1673 this.rootNode = new FrameNode(uiContext); 1674 1675 const rootRenderNode = this.rootNode.getRenderNode(); 1676 if (rootRenderNode !== null) { 1677 rootRenderNode.appendChild(renderNode); 1678 } 1679 1680 return this.rootNode; 1681 } 1682} 1683 1684@Entry 1685@Component 1686struct Index { 1687 private myNodeController: MyNodeController = new MyNodeController(); 1688 1689 build() { 1690 Column() { 1691 NodeContainer(this.myNodeController) 1692 .borderWidth(1) 1693 Button("setCommandPath") 1694 .onClick(()=>{ 1695 renderNode.shapeClip.setCommandPath({ commands: "M100 0 L0 100 L50 200 L150 200 L200 100 Z" }); 1696 renderNode.shapeClip = renderNode.shapeClip; 1697 }) 1698 } 1699 } 1700} 1701``` 1702 1703## edgeColors<sup>12+</sup> 1704 1705edgeColors(all: number): Edges\<number> 1706 1707Generates an **edgeColors** object with the specified edge color for all edges. 1708 1709**Atomic service API**: This API can be used in atomic services since API version 12. 1710 1711**System capability**: SystemCapability.ArkUI.ArkUI.Full 1712 1713**Parameters** 1714 1715| Name| Type | Mandatory| Description | 1716| ------ | ------ | ---- | -------------------- | 1717| all | number | Yes | Edge color, in ARGB format.| 1718 1719**Return value** 1720 1721| Type | Description | 1722| ------------------------ | -------------------------------------- | 1723| [Edges\<number>](#edgest12) | **edgeColors** object whose edge colors are all at the specified value.| 1724 1725**Example** 1726 1727```ts 1728import { RenderNode, FrameNode, NodeController, edgeColors } from '@kit.ArkUI'; 1729 1730const renderNode = new RenderNode(); 1731renderNode.frame = { x: 0, y: 0, width: 150, height: 150 }; 1732renderNode.backgroundColor = 0XFF00FF00; 1733renderNode.borderWidth = { left: 8, top: 8, right: 8, bottom: 8 }; 1734renderNode.borderColor = edgeColors(0xFF0000FF); 1735 1736 1737class MyNodeController extends NodeController { 1738 private rootNode: FrameNode | null = null; 1739 1740 makeNode(uiContext: UIContext): FrameNode | null { 1741 this.rootNode = new FrameNode(uiContext); 1742 1743 const rootRenderNode = this.rootNode.getRenderNode(); 1744 if (rootRenderNode !== null) { 1745 rootRenderNode.appendChild(renderNode); 1746 } 1747 1748 return this.rootNode; 1749 } 1750} 1751 1752@Entry 1753@Component 1754struct Index { 1755 private myNodeController: MyNodeController = new MyNodeController(); 1756 1757 build() { 1758 Row() { 1759 NodeContainer(this.myNodeController) 1760 } 1761 } 1762} 1763``` 1764 1765## edgeWidths<sup>12+</sup> 1766 1767edgeWidths(all: number): Edges\<number> 1768 1769Generates an **edgeWidths** object with the specified edge width for all edges. 1770 1771**Atomic service API**: This API can be used in atomic services since API version 12. 1772 1773**System capability**: SystemCapability.ArkUI.ArkUI.Full 1774 1775**Parameters** 1776 1777| Name| Type | Mandatory| Description | 1778| ------ | ------ | ---- | -------------------- | 1779| all | number | Yes | Edge width, in vp.| 1780 1781**Return value** 1782 1783| Type | Description | 1784| ------------------------ | -------------------------------------- | 1785| [Edges\<number>](#edgest12) | **edgeWidths** object whose edge widths are all at the specified value.| 1786 1787**Example** 1788 1789```ts 1790import { RenderNode, FrameNode, NodeController, edgeWidths } from '@kit.ArkUI'; 1791 1792const renderNode = new RenderNode(); 1793renderNode.frame = { x: 0, y: 0, width: 150, height: 150 }; 1794renderNode.backgroundColor = 0XFF00FF00; 1795renderNode.borderWidth = edgeWidths(8); 1796renderNode.borderColor = { left: 0xFF0000FF, top: 0xFF0000FF, right: 0xFF0000FF, bottom: 0xFF0000FF }; 1797 1798 1799class MyNodeController extends NodeController { 1800 private rootNode: FrameNode | null = null; 1801 1802 makeNode(uiContext: UIContext): FrameNode | null { 1803 this.rootNode = new FrameNode(uiContext); 1804 1805 const rootRenderNode = this.rootNode.getRenderNode(); 1806 if (rootRenderNode !== null) { 1807 rootRenderNode.appendChild(renderNode); 1808 } 1809 1810 return this.rootNode; 1811 } 1812} 1813 1814@Entry 1815@Component 1816struct Index { 1817 private myNodeController: MyNodeController = new MyNodeController(); 1818 1819 build() { 1820 Row() { 1821 NodeContainer(this.myNodeController) 1822 } 1823 } 1824} 1825``` 1826 1827## borderStyles<sup>12+</sup> 1828 1829borderStyles(all: BorderStyle): Edges\<BorderStyle> 1830 1831Generates a **borderStyles** object with the specified border style color for all borders. 1832 1833**Atomic service API**: This API can be used in atomic services since API version 12. 1834 1835**System capability**: SystemCapability.ArkUI.ArkUI.Full 1836 1837**Parameters** 1838 1839| Name| Type | Mandatory| Description | 1840| ------ | ---------------------------------------------------------- | ---- | ---------- | 1841| all | [BorderStyle](./arkui-ts/ts-appendix-enums.md#borderstyle) | Yes | Border style.| 1842 1843**Return value** 1844 1845| Type | Description | 1846| --------------------------------------------------------------------------- | -------------------------------------- | 1847| [Edges](#edgest12)<[BorderStyle](./arkui-ts/ts-appendix-enums.md#borderstyle)> | **borderStyles** object whose borders are all in the specified style.| 1848 1849**Example** 1850 1851```ts 1852import { RenderNode, FrameNode, NodeController, borderStyles } from '@kit.ArkUI'; 1853 1854const renderNode = new RenderNode(); 1855renderNode.frame = { x: 0, y: 0, width: 150, height: 150 }; 1856renderNode.backgroundColor = 0XFF00FF00; 1857renderNode.borderWidth = { left: 8, top: 8, right: 8, bottom: 8 }; 1858renderNode.borderColor = { left: 0xFF0000FF, top: 0xFF0000FF, right: 0xFF0000FF, bottom: 0xFF0000FF }; 1859renderNode.borderStyle = borderStyles(BorderStyle.Dotted); 1860 1861 1862class MyNodeController extends NodeController { 1863 private rootNode: FrameNode | null = null; 1864 1865 makeNode(uiContext: UIContext): FrameNode | null { 1866 this.rootNode = new FrameNode(uiContext); 1867 1868 const rootRenderNode = this.rootNode.getRenderNode(); 1869 if (rootRenderNode !== null) { 1870 rootRenderNode.appendChild(renderNode); 1871 } 1872 1873 return this.rootNode; 1874 } 1875} 1876 1877@Entry 1878@Component 1879struct Index { 1880 private myNodeController: MyNodeController = new MyNodeController(); 1881 1882 build() { 1883 Row() { 1884 NodeContainer(this.myNodeController) 1885 } 1886 } 1887} 1888``` 1889 1890## borderRadiuses<sup>12+</sup> 1891 1892borderRadiuses(all: number): BorderRadiuses 1893 1894Generates a **borderRadiuses** object with the specified radius for all border corners. 1895 1896**Atomic service API**: This API can be used in atomic services since API version 12. 1897 1898**System capability**: SystemCapability.ArkUI.ArkUI.Full 1899 1900**Parameters** 1901 1902| Name| Type | Mandatory| Description | 1903| ------ | ------ | ---- | ---------- | 1904| all | number | Yes | Radius of border corners.| 1905 1906**Return value** 1907 1908| Type | Description | 1909| --------------------------------- | -------------------------------------- | 1910| [BorderRadiuses](#borderradiuses12) | **borderRadiuses** object whose border corners all have the specified radius.| 1911 1912**Example** 1913 1914```ts 1915import { RenderNode, FrameNode, NodeController, borderRadiuses } from '@kit.ArkUI'; 1916 1917const renderNode = new RenderNode(); 1918renderNode.frame = { x: 0, y: 0, width: 150, height: 150 }; 1919renderNode.backgroundColor = 0XFF00FF00; 1920renderNode.borderRadius = borderRadiuses(32); 1921 1922 1923class MyNodeController extends NodeController { 1924 private rootNode: FrameNode | null = null; 1925 1926 makeNode(uiContext: UIContext): FrameNode | null { 1927 this.rootNode = new FrameNode(uiContext); 1928 1929 const rootRenderNode = this.rootNode.getRenderNode(); 1930 if (rootRenderNode !== null) { 1931 rootRenderNode.appendChild(renderNode); 1932 } 1933 1934 return this.rootNode; 1935 } 1936} 1937 1938@Entry 1939@Component 1940struct Index { 1941 private myNodeController: MyNodeController = new MyNodeController(); 1942 1943 build() { 1944 Row() { 1945 NodeContainer(this.myNodeController) 1946 } 1947 } 1948} 1949``` 1950