1# RenderNode 2 3The **RenderNode** module provides APIs for creating a RenderNode in custom drawing settings with C APIs. 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> **RenderNode** is not available in DevEco Studio Previewer. 10> 11> You are not advised to modify RenderNodes in BuilderNodes. 12 13## Modules to Import 14 15```ts 16import { RenderNode } from '@kit.ArkUI'; 17``` 18 19## RenderNode 20 21### constructor 22 23constructor() 24 25Constructor used to create a RenderNode. 26 27**Atomic service API**: This API can be used in atomic services since API version 12. 28 29**System capability**: SystemCapability.ArkUI.ArkUI.Full 30 31**Example** 32 33```ts 34import { RenderNode, FrameNode, NodeController } from '@kit.ArkUI'; 35 36const renderNode = new RenderNode(); 37renderNode.frame = { x: 0, y: 0, width: 100, height: 100 }; 38renderNode.backgroundColor = 0xffff0000; 39 40class MyNodeController extends NodeController { 41 private rootNode: FrameNode | null = null; 42 43 makeNode(uiContext: UIContext): FrameNode | null { 44 this.rootNode = new FrameNode(uiContext); 45 46 const rootRenderNode = this.rootNode.getRenderNode(); 47 if (rootRenderNode !== null) { 48 rootRenderNode.appendChild(renderNode); 49 } 50 51 return this.rootNode; 52 } 53} 54 55@Entry 56@Component 57struct Index { 58 private myNodeController: MyNodeController = new MyNodeController(); 59 60 build() { 61 Row() { 62 NodeContainer(this.myNodeController) 63 } 64 } 65} 66``` 67 68### appendChild 69 70appendChild(node: RenderNode): void 71 72Appends a child node to this RenderNode. 73 74**Atomic service API**: This API can be used in atomic services since API version 12. 75 76**System capability**: SystemCapability.ArkUI.ArkUI.Full 77 78**Parameters** 79 80| Name| Type | Mandatory| Description | 81| ------ | ------------------------- | ---- | ---------------------- | 82| node | [RenderNode](#rendernode) | Yes | Child node to append.| 83 84**Example** 85 86```ts 87import { RenderNode, FrameNode, NodeController } from '@kit.ArkUI'; 88 89const renderNode = new RenderNode(); 90renderNode.frame = { x: 0, y: 0, width: 100, height: 100 }; 91renderNode.backgroundColor = 0xffff0000; 92const child = new RenderNode(); 93child.frame = { x: 10, y: 10, width: 50, height: 50 }; 94child.backgroundColor = 0xff00ff00; 95renderNode.appendChild(child); 96 97class MyNodeController extends NodeController { 98 private rootNode: FrameNode | null = null; 99 100 makeNode(uiContext: UIContext): FrameNode | null { 101 this.rootNode = new FrameNode(uiContext); 102 103 const rootRenderNode = this.rootNode.getRenderNode(); 104 if (rootRenderNode !== null) { 105 rootRenderNode.appendChild(renderNode); 106 } 107 108 return this.rootNode; 109 } 110} 111 112@Entry 113@Component 114struct Index { 115 private myNodeController: MyNodeController = new MyNodeController(); 116 117 build() { 118 Row() { 119 NodeContainer(this.myNodeController) 120 } 121 } 122} 123``` 124 125### insertChildAfter 126 127insertChildAfter(child: RenderNode, sibling: RenderNode | null): void 128 129Inserts a child node after the specified child node of this RenderNode. 130 131**Atomic service API**: This API can be used in atomic services since API version 12. 132 133**System capability**: SystemCapability.ArkUI.ArkUI.Full 134 135**Parameters** 136 137| Name | Type | Mandatory| Description | 138| ------- | ------------------------------------------- | ---- | ---------------------------------------------------------------------------- | 139| child | [RenderNode](#rendernode) | Yes | Child node to add. | 140| sibling | [RenderNode](#rendernode) \| null | Yes | Node after which the new child node will be inserted. If this parameter is left empty, the new node is inserted before the first subnode.| 141 142**Example** 143 144```ts 145import { RenderNode, FrameNode, NodeController } from '@kit.ArkUI'; 146 147const renderNode = new RenderNode(); 148renderNode.frame = { x: 0, y: 0, width: 200, height: 350 }; 149renderNode.backgroundColor = 0xffff0000; 150for (let i = 0; i < 5; i++) { 151 const node = new RenderNode(); 152 node.frame = { x: 10, y: 10 + 60 * i, width: 50, height: 50 }; 153 node.backgroundColor = 0xff00ff00; 154 renderNode.appendChild(node); 155} 156 157const child = new RenderNode(); 158child.frame = { x: 70, y: 70, width: 50, height: 50 }; 159child.backgroundColor = 0xffffff00; 160const sibling = renderNode.getChild(1); 161renderNode.insertChildAfter(child, sibling); 162 163class MyNodeController extends NodeController { 164 private rootNode: FrameNode | null = null; 165 166 makeNode(uiContext: UIContext): FrameNode | null { 167 this.rootNode = new FrameNode(uiContext); 168 169 const rootRenderNode = this.rootNode.getRenderNode(); 170 if (rootRenderNode !== null) { 171 rootRenderNode.appendChild(renderNode); 172 } 173 174 return this.rootNode; 175 } 176} 177 178@Entry 179@Component 180struct Index { 181 private myNodeController: MyNodeController = new MyNodeController(); 182 183 build() { 184 Row() { 185 NodeContainer(this.myNodeController) 186 } 187 } 188} 189``` 190 191### removeChild 192 193removeChild(node: RenderNode): void 194 195Deletes the specified child node from this RenderNode. 196 197**Atomic service API**: This API can be used in atomic services since API version 12. 198 199**System capability**: SystemCapability.ArkUI.ArkUI.Full 200 201**Parameters** 202 203| Name| Type | Mandatory| Description | 204| ------ | ------------------------- | ---- | ------------------ | 205| node | [RenderNode](#rendernode) | Yes | Child node to delete.| 206 207**Example** 208```ts 209import { RenderNode, FrameNode, NodeController } from '@kit.ArkUI'; 210 211const renderNode = new RenderNode(); 212renderNode.frame = { x: 0, y: 0, width: 200, height: 350 }; 213renderNode.backgroundColor = 0xffff0000; 214for (let i = 0; i < 5; i++) { 215 const node = new RenderNode(); 216 node.frame = { x: 10, y: 10 + 60 * i, width: 50, height: 50 }; 217 node.backgroundColor = 0xff00ff00; 218 renderNode.appendChild(node); 219} 220 221const node = renderNode.getChild(1); 222renderNode.removeChild(node); 223 224class MyNodeController extends NodeController { 225 private rootNode: FrameNode | null = null; 226 227 makeNode(uiContext: UIContext): FrameNode | null { 228 this.rootNode = new FrameNode(uiContext); 229 230 const rootRenderNode = this.rootNode.getRenderNode(); 231 if (rootRenderNode !== null) { 232 rootRenderNode.appendChild(renderNode); 233 } 234 235 return this.rootNode; 236 } 237} 238 239@Entry 240@Component 241struct Index { 242 private myNodeController: MyNodeController = new MyNodeController(); 243 244 build() { 245 Row() { 246 NodeContainer(this.myNodeController) 247 } 248 } 249} 250``` 251### clearChildren 252 253clearChildren(): void 254 255Clears all child nodes of this RenderNode. 256 257**Atomic service API**: This API can be used in atomic services since API version 12. 258 259**System capability**: SystemCapability.ArkUI.ArkUI.Full 260 261**Example** 262 263```ts 264import { RenderNode, FrameNode, NodeController } from '@kit.ArkUI'; 265 266const renderNode = new RenderNode(); 267for (let i = 0; i < 10; i++) { 268 let childNode = new RenderNode(); 269 childNode.size = {width: i*10 ,height : i*10}; 270 childNode.position = {x: i*10 ,y : i*10}; 271 childNode.backgroundColor = 0xFF0000FF - 0X11 * i; 272 renderNode.appendChild(childNode); 273} 274 275class MyNodeController extends NodeController { 276 private rootNode: FrameNode | null = null; 277 278 makeNode(uiContext: UIContext): FrameNode | null { 279 this.rootNode = new FrameNode(uiContext); 280 281 const rootRenderNode = this.rootNode.getRenderNode(); 282 if (rootRenderNode !== null) { 283 rootRenderNode.appendChild(renderNode); 284 } 285 286 return this.rootNode; 287 } 288} 289 290@Entry 291@Component 292struct Index { 293 private myNodeController: MyNodeController = new MyNodeController(); 294 build() { 295 Column() { 296 NodeContainer(this.myNodeController) 297 .borderWidth(1) 298 .width(200) 299 .height(300) 300 Button("clearChildren") 301 .onClick(()=>{ 302 renderNode.clearChildren(); 303 }) 304 }.width("100%") 305 } 306} 307``` 308 309### getChild 310 311getChild(index: number): RenderNode | null 312 313Obtains the child node in the specified position of this RenderNode. 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**Parameters** 320 321| Name | Type | Mandatory| Description | 322| ------- | ------- | ---- | ------------------ | 323| index | number | Yes | Index of the child node to obtain.| 324 325**Return value** 326 327| Type | Description | 328| --------------------------------- | ---------------------------------------------------------- | 329| [RenderNode](#rendernode) \| null | Child node obtained. If the RenderNode does not contain the specified child node, null is returned.| 330 331**Example** 332 333```ts 334import { RenderNode, FrameNode, NodeController } from '@kit.ArkUI'; 335 336const renderNode = new RenderNode(); 337for (let i = 0; i < 10; i++) { 338 let childNode = new RenderNode(); 339 childNode.size = {width: i*10 ,height : i*10}; 340 childNode.position = {x: i*10 ,y : i*10}; 341 childNode.backgroundColor = 0xFF0000FF - 0X11 * i; 342 renderNode.appendChild(childNode); 343} 344 345class MyNodeController extends NodeController { 346 private rootNode: FrameNode | null = null; 347 348 makeNode(uiContext: UIContext): FrameNode | null { 349 this.rootNode = new FrameNode(uiContext); 350 351 const rootRenderNode = this.rootNode.getRenderNode(); 352 if (rootRenderNode !== null) { 353 rootRenderNode.appendChild(renderNode); 354 } 355 356 return this.rootNode; 357 } 358} 359 360@Entry 361@Component 362struct Index { 363 private myNodeController: MyNodeController = new MyNodeController(); 364 build() { 365 Column() { 366 NodeContainer(this.myNodeController) 367 .borderWidth(1) 368 .width(200) 369 .height(300) 370 Button("getChild") 371 .onClick(()=>{ 372 for (let i = 0; i < 11; i++) { 373 let childNode : RenderNode | null = renderNode.getChild(i); 374 if(childNode == null){ 375 console.log(`the ${i} of renderNode's childNode is null`); 376 } else { 377 console.log(`the ${i} of renderNode's childNode has a size of {${childNode.size.width},${childNode.size.height}}`); 378 } 379 } 380 381 }) 382 }.width("100%") 383 } 384} 385``` 386 387### getFirstChild 388 389getFirstChild(): RenderNode | null 390 391Obtains the first child node of this RenderNode. 392 393**Atomic service API**: This API can be used in atomic services since API version 12. 394 395**System capability**: SystemCapability.ArkUI.ArkUI.Full 396 397**Return value** 398 399| Type | Description | 400| --------------------------------- | ---------------------------------------------------------- | 401| [RenderNode](#rendernode) \| null | First child node. If the RenderNode does not contain any child node, null is returned.| 402 403**Example** 404 405```ts 406import { RenderNode, FrameNode, NodeController } from '@kit.ArkUI'; 407 408const renderNode = new RenderNode(); 409renderNode.frame = { x: 0, y: 0, width: 200, height: 350 }; 410renderNode.backgroundColor = 0xffff0000; 411for (let i = 0; i < 5; i++) { 412 const node = new RenderNode(); 413 node.frame = { x: 10, y: 10 + 60 * i, width: 50, height: 50 }; 414 node.backgroundColor = 0xff00ff00; 415 renderNode.appendChild(node); 416} 417 418class MyNodeController extends NodeController { 419 private rootNode: FrameNode | null = null; 420 421 makeNode(uiContext: UIContext): FrameNode | null { 422 this.rootNode = new FrameNode(uiContext); 423 424 const rootRenderNode = this.rootNode.getRenderNode(); 425 if (rootRenderNode !== null) { 426 rootRenderNode.appendChild(renderNode); 427 } 428 429 return this.rootNode; 430 } 431} 432 433@Entry 434@Component 435struct Index { 436 private myNodeController: MyNodeController = new MyNodeController(); 437 438 build() { 439 Row() { 440 NodeContainer(this.myNodeController) 441 .width(200) 442 .height(350) 443 Button('getFirstChild') 444 .onClick(() => { 445 const firstChild = renderNode.getFirstChild(); 446 if (firstChild === null) { 447 console.log('the fist child is null'); 448 } else { 449 console.log(`the position of fist child is x: ${firstChild.position.x}, y: ${firstChild.position.y}`); 450 } 451 }) 452 } 453 } 454} 455``` 456 457### getNextSibling 458 459getNextSibling(): RenderNode | null 460 461Obtains the next sibling node of this RenderNode. 462 463**Atomic service API**: This API can be used in atomic services since API version 12. 464 465**System capability**: SystemCapability.ArkUI.ArkUI.Full 466 467**Return value** 468 469| Type | Description | 470| --------------------------------- | -------------------------------------------------------------------------------------- | 471| [RenderNode](#rendernode) \| null | Next sibling node of the current RenderNode. If the RenderNode does not have the next sibling node, null is returned.| 472 473**Example** 474```ts 475import { RenderNode, FrameNode, NodeController } from '@kit.ArkUI'; 476 477const renderNode = new RenderNode(); 478renderNode.frame = { x: 0, y: 0, width: 200, height: 350 }; 479renderNode.backgroundColor = 0xffff0000; 480for (let i = 0; i < 5; i++) { 481 const node = new RenderNode(); 482 node.frame = { x: 10, y: 10 + 60 * i, width: 50, height: 50 }; 483 node.backgroundColor = 0xff00ff00; 484 renderNode.appendChild(node); 485} 486 487class MyNodeController extends NodeController { 488 private rootNode: FrameNode | null = null; 489 490 makeNode(uiContext: UIContext): FrameNode | null { 491 this.rootNode = new FrameNode(uiContext); 492 493 const rootRenderNode = this.rootNode.getRenderNode(); 494 if (rootRenderNode !== null) { 495 rootRenderNode.appendChild(renderNode); 496 } 497 498 return this.rootNode; 499 } 500} 501 502@Entry 503@Component 504struct Index { 505 private myNodeController: MyNodeController = new MyNodeController(); 506 507 build() { 508 Row() { 509 NodeContainer(this.myNodeController) 510 .width(200) 511 .height(350) 512 Button('getNextSibling') 513 .onClick(() => { 514 const child = renderNode.getChild(1); 515 const nextSibling = child!.getNextSibling() 516 if (child === null || nextSibling === null) { 517 console.log('the child or nextChild is null'); 518 } else { 519 console.log(`the position of child is x: ${child.position.x}, y: ${child.position.y}, ` + 520 `the position of nextSibling is x: ${nextSibling.position.x}, y: ${nextSibling.position.y}`); 521 } 522 }) 523 } 524 } 525} 526``` 527 528### getPreviousSibling 529 530getPreviousSibling(): RenderNode | null 531 532Obtains the previous sibling node of this RenderNode. 533 534**Atomic service API**: This API can be used in atomic services since API version 12. 535 536**System capability**: SystemCapability.ArkUI.ArkUI.Full 537 538**Return value** 539 540| Type | Description | 541| --------------------------------- | -------------------------------------------------------------------------------------- | 542| [RenderNode](#rendernode) \| null | Previous sibling node of the current RenderNode. If the RenderNode does not have the previous sibling node, null is returned.| 543 544**Example** 545```ts 546import { RenderNode, FrameNode, NodeController } from '@kit.ArkUI'; 547 548const renderNode = new RenderNode(); 549renderNode.frame = { x: 0, y: 0, width: 200, height: 350 }; 550renderNode.backgroundColor = 0xffff0000; 551for (let i = 0; i < 5; i++) { 552 const node = new RenderNode(); 553 node.frame = { x: 10, y: 10 + 60 * i, width: 50, height: 50 }; 554 node.backgroundColor = 0xff00ff00; 555 renderNode.appendChild(node); 556} 557 558class MyNodeController extends NodeController { 559 private rootNode: FrameNode | null = null; 560 561 makeNode(uiContext: UIContext): FrameNode | null { 562 this.rootNode = new FrameNode(uiContext); 563 564 const rootRenderNode = this.rootNode.getRenderNode(); 565 if (rootRenderNode !== null) { 566 rootRenderNode.appendChild(renderNode); 567 } 568 569 return this.rootNode; 570 } 571} 572 573@Entry 574@Component 575struct Index { 576 private myNodeController: MyNodeController = new MyNodeController(); 577 578 build() { 579 Row() { 580 NodeContainer(this.myNodeController) 581 .width(200) 582 .height(350) 583 Button('getPreviousSibling') 584 .onClick(() => { 585 const child = renderNode.getChild(1); 586 const previousSibling = child!.getPreviousSibling() 587 if (child === null || previousSibling === null) { 588 console.log('the child or previousChild is null'); 589 } else { 590 console.log(`the position of child is x: ${child.position.x}, y: ${child.position.y}, ` + 591 `the position of previousSibling is x: ${previousSibling.position.x}, y: ${previousSibling.position.y}`); 592 } 593 }) 594 } 595 } 596} 597``` 598 599### backgroundColor 600 601set backgroundColor(color: number) 602 603Sets the background color for this RenderNode. 604 605**Atomic service API**: This API can be used in atomic services since API version 12. 606 607**System capability**: SystemCapability.ArkUI.ArkUI.Full 608 609**Parameters** 610 611| Name| Type | Mandatory| Description | 612| ------ | ------ | ---- | ---------------------- | 613| color | number | Yes | Background color value, in ARGB format.| 614 615get backgroundColor(): number 616 617Obtains the background color of this RenderNode. 618 619**Atomic service API**: This API can be used in atomic services since API version 12. 620 621**System capability**: SystemCapability.ArkUI.ArkUI.Full 622 623**Return value** 624 625| Type | Description | 626| ------ | ---------------------------------------------- | 627| number | Background color of the current RenderNode. The default value is **0X00000000**.| 628 629**Example** 630```ts 631import { RenderNode, FrameNode, NodeController } from '@kit.ArkUI'; 632 633const renderNode = new RenderNode(); 634renderNode.frame = { x: 0, y: 0, width: 100, height: 100 }; 635renderNode.backgroundColor = 0XFF00FF00; 636const backgroundColor = renderNode.backgroundColor; 637 638class MyNodeController extends NodeController { 639 private rootNode: FrameNode | null = null; 640 641 makeNode(uiContext: UIContext): FrameNode | null { 642 this.rootNode = new FrameNode(uiContext); 643 644 const rootRenderNode = this.rootNode.getRenderNode(); 645 if (rootRenderNode !== null) { 646 rootRenderNode.appendChild(renderNode); 647 } 648 649 return this.rootNode; 650 } 651} 652 653@Entry 654@Component 655struct Index { 656 private myNodeController: MyNodeController = new MyNodeController(); 657 build() { 658 Row() { 659 NodeContainer(this.myNodeController) 660 } 661 } 662} 663``` 664 665### clipToFrame 666 667set clipToFrame(useClip: boolean) 668 669Sets whether to clip this RenderNode. The value **true** means to clip the RenderNode to its set size. 670 671**Atomic service API**: This API can be used in atomic services since API version 12. 672 673**System capability**: SystemCapability.ArkUI.ArkUI.Full 674 675**Parameters** 676 677| Name | Type | Mandatory| Description | 678| ------- | ------- | ---- | ------------------ | 679| useClip | boolean | Yes | Whether to clip the RenderNode.| 680 681get clipToFrame(): boolean 682 683Obtains whether this RenderNode needs to be clipped. 684 685**Atomic service API**: This API can be used in atomic services since API version 12. 686 687**System capability**: SystemCapability.ArkUI.ArkUI.Full 688 689**Return value** 690 691| Type | Description | 692| ------- | --------------------------------------------------- | 693| boolean | Whether the current RenderNode needs to be clipped. The default value is **true**.| 694 695**Example** 696```ts 697import { RenderNode, FrameNode, NodeController } from '@kit.ArkUI'; 698 699const renderNode = new RenderNode(); 700renderNode.frame = { x: 0, y: 0, width: 100, height: 100 }; 701renderNode.backgroundColor = 0xffff0000; 702renderNode.clipToFrame = true; 703const clipToFrame = renderNode.clipToFrame; 704 705const childNode = new RenderNode(); 706childNode.frame = { x: 10, y: 10, width: 150, height: 50 }; 707childNode.backgroundColor = 0xffffff00; 708renderNode.appendChild(childNode); 709 710class MyNodeController extends NodeController { 711 private rootNode: FrameNode | null = null; 712 713 makeNode(uiContext: UIContext): FrameNode | null { 714 this.rootNode = new FrameNode(uiContext); 715 716 const rootRenderNode = this.rootNode.getRenderNode(); 717 if (rootRenderNode !== null) { 718 rootRenderNode.appendChild(renderNode); 719 } 720 721 return this.rootNode; 722 } 723} 724 725@Entry 726@Component 727struct Index { 728 private myNodeController: MyNodeController = new MyNodeController(); 729 730 build() { 731 Row() { 732 NodeContainer(this.myNodeController) 733 } 734 } 735} 736``` 737 738### opacity 739 740set opacity(value: number) 741 742Sets the opacity for this RenderNode. If the value passed in is less than **0**, the opacity is set to **0**. If the value passed in is greater than **1**, the opacity is set to **1**. 743 744**Atomic service API**: This API can be used in atomic services since API version 12. 745 746**System capability**: SystemCapability.ArkUI.ArkUI.Full 747 748**Parameters** 749 750| Name| Type | Mandatory| Description | 751| ------ | ------ | ---- | -------------------------------------- | 752| value | number | Yes | Opacity to set.<br>Value range: [0, 1]| 753 754get opacity(): number 755 756Obtains the opacity of this RenderNode. 757 758**Atomic service API**: This API can be used in atomic services since API version 12. 759 760**System capability**: SystemCapability.ArkUI.ArkUI.Full 761 762**Return value** 763 764| Type | Description | 765| ------ | ----------------------------------------- | 766| number | Opacity of the current RenderNode. The default value is **1**.| 767 768**Example** 769```ts 770import { RenderNode, FrameNode, NodeController } from '@kit.ArkUI'; 771 772const renderNode = new RenderNode(); 773renderNode.frame = { x: 0, y: 0, width: 100, height: 100 }; 774renderNode.backgroundColor = 0xffff0000; 775renderNode.opacity = 0.5; 776const opacity = renderNode.opacity; 777 778class MyNodeController extends NodeController { 779 private rootNode: FrameNode | null = null; 780 781 makeNode(uiContext: UIContext): FrameNode | null { 782 this.rootNode = new FrameNode(uiContext); 783 784 const rootRenderNode = this.rootNode.getRenderNode(); 785 if (rootRenderNode !== null) { 786 rootRenderNode.appendChild(renderNode); 787 } 788 789 return this.rootNode; 790 } 791} 792 793@Entry 794@Component 795struct Index { 796 private myNodeController: MyNodeController = new MyNodeController(); 797 798 build() { 799 Row() { 800 NodeContainer(this.myNodeController) 801 } 802 } 803} 804``` 805 806### size 807 808set size(size: Size) 809 810Sets the size for this RenderNode. 811 812**Atomic service API**: This API can be used in atomic services since API version 12. 813 814**System capability**: SystemCapability.ArkUI.ArkUI.Full 815 816**Parameters** 817 818| Name| Type | Mandatory| Description | 819| ------ | ---------------------------------------- | ---- | ---------------------------- | 820| size | [Size](./js-apis-arkui-graphics.md#size) | Yes | Size to set.| 821 822get size(): Size 823 824Obtains the size of this RenderNode. 825 826**Atomic service API**: This API can be used in atomic services since API version 12. 827 828**System capability**: SystemCapability.ArkUI.ArkUI.Full 829 830**Return value** 831 832| Name | Description | 833| ---------------------------------------- | ----------------------------------------------- | 834| [Size](./js-apis-arkui-graphics.md#size) | Size of the current RenderNode. The default width and height are **0**.| 835 836**Example** 837```ts 838import { RenderNode, FrameNode, NodeController } from '@kit.ArkUI'; 839 840const renderNode = new RenderNode(); 841renderNode.backgroundColor = 0xffff0000; 842renderNode.size = { width: 100, height: 100 }; 843const size = renderNode.size; 844 845class MyNodeController extends NodeController { 846 private rootNode: FrameNode | null = null; 847 848 makeNode(uiContext: UIContext): FrameNode | null { 849 this.rootNode = new FrameNode(uiContext); 850 851 const rootRenderNode = this.rootNode.getRenderNode(); 852 if (rootRenderNode !== null) { 853 rootRenderNode.appendChild(renderNode); 854 } 855 856 return this.rootNode; 857 } 858} 859 860@Entry 861@Component 862struct Index { 863 private myNodeController: MyNodeController = new MyNodeController(); 864 865 build() { 866 Row() { 867 NodeContainer(this.myNodeController) 868 } 869 } 870} 871``` 872 873### position 874 875set position(position: Position) 876 877Sets the position for this RenderNode. 878 879**Atomic service API**: This API can be used in atomic services since API version 12. 880 881**System capability**: SystemCapability.ArkUI.ArkUI.Full 882 883**Parameters** 884 885| Name | Type | Mandatory| Description | 886| -------- | ------------------------------------------------ | ---- | ---------------------------- | 887| position | [Position](./js-apis-arkui-graphics.md#position) | Yes | Position to set.| 888 889get position(): Position 890 891Obtains the position of this RenderNode. 892 893**Atomic service API**: This API can be used in atomic services since API version 12. 894 895**System capability**: SystemCapability.ArkUI.ArkUI.Full 896 897**Return value** 898 899| Type | Description | 900| ------------------------------------------------ | ---------------------------------------------------- | 901| [Position](./js-apis-arkui-graphics.md#position) | Position of the current RenderNode. The default value is **{ x: 0, y: 0 }**.| 902 903**Example** 904```ts 905import { RenderNode, FrameNode, NodeController } from '@kit.ArkUI'; 906 907const renderNode = new RenderNode(); 908renderNode.backgroundColor = 0xffff0000; 909renderNode.size = { width: 100, height: 100 }; 910renderNode.position = { x: 10, y: 10 }; 911const position = renderNode.position; 912 913class MyNodeController extends NodeController { 914 private rootNode: FrameNode | null = null; 915 916 makeNode(uiContext: UIContext): FrameNode | null { 917 this.rootNode = new FrameNode(uiContext); 918 919 const rootRenderNode = this.rootNode.getRenderNode(); 920 if (rootRenderNode !== null) { 921 rootRenderNode.appendChild(renderNode); 922 } 923 924 return this.rootNode; 925 } 926} 927 928@Entry 929@Component 930struct Index { 931 private myNodeController: MyNodeController = new MyNodeController(); 932 933 build() { 934 Row() { 935 NodeContainer(this.myNodeController) 936 } 937 } 938} 939``` 940 941### frame 942 943set frame(frame: Frame) 944 945Sets the size and position for this RenderNode. When this parameter is used together with [position](#position) and [size](#size), the one that is set later in time is prioritized. 946 947**Atomic service API**: This API can be used in atomic services since API version 12. 948 949**System capability**: SystemCapability.ArkUI.ArkUI.Full 950 951**Parameters** 952 953| Name| Type | Mandatory| Description | 954| ------ | ------------------------------------------ | ---- | -------------------------------- | 955| frame | [Frame](./js-apis-arkui-graphics.md#frame) | Yes | Size and position to set.| 956 957get frame(): Frame 958 959Obtains the size and position of this RenderNode. 960 961**Atomic service API**: This API can be used in atomic services since API version 12. 962 963**System capability**: SystemCapability.ArkUI.ArkUI.Full 964 965**Return value** 966 967| Type | Description | 968| --------------- | ----------------------------------------------------------------------------- | 969| [Frame](#frame) | Size and position of the current RenderNode. The default value is **{ x: 0, y: 0, width: 0, height: 0 }**.| 970 971**Example** 972```ts 973import { RenderNode, FrameNode, NodeController } from '@kit.ArkUI'; 974 975const renderNode = new RenderNode(); 976renderNode.backgroundColor = 0xffff0000; 977renderNode.frame = { x: 10, y: 10, width: 100, height: 100 }; 978const frame = renderNode.frame; 979 980class MyNodeController extends NodeController { 981 private rootNode: FrameNode | null = null; 982 983 makeNode(uiContext: UIContext): FrameNode | null { 984 this.rootNode = new FrameNode(uiContext); 985 986 const rootRenderNode = this.rootNode.getRenderNode(); 987 if (rootRenderNode !== null) { 988 rootRenderNode.appendChild(renderNode); 989 } 990 991 return this.rootNode; 992 } 993} 994 995@Entry 996@Component 997struct Index { 998 private myNodeController: MyNodeController = new MyNodeController(); 999 1000 build() { 1001 Row() { 1002 NodeContainer(this.myNodeController) 1003 } 1004 } 1005} 1006``` 1007 1008### pivot 1009 1010set pivot(pivot: Pivot) 1011 1012Sets the pivot for this RenderNode, which affects the scaling and rotation effects of the RenderNode. 1013 1014**Atomic service API**: This API can be used in atomic services since API version 12. 1015 1016**System capability**: SystemCapability.ArkUI.ArkUI.Full 1017 1018**Parameters** 1019 1020| Name| Type | Mandatory| Description | 1021| ------ | ------------------------------------------ | ---- | ---------------------------- | 1022| pivot | [Pivot](./js-apis-arkui-graphics.md#pivot) | Yes | Pivot to set.| 1023 1024get pivot(): Pivot 1025 1026Obtains the pivot of this RenderNode. 1027 1028**Atomic service API**: This API can be used in atomic services since API version 12. 1029 1030**System capability**: SystemCapability.ArkUI.ArkUI.Full 1031 1032**Return value** 1033 1034| Type | Description | 1035| ------------------------------------------ | ----------------------------------------------------- | 1036| [Pivot](./js-apis-arkui-graphics.md#pivot) | Pivot of the current RenderNode. The default value is **{ x: 0.5, y: 0.5}**.| 1037 1038**Example** 1039```ts 1040import { RenderNode, FrameNode, NodeController } from '@kit.ArkUI'; 1041 1042const renderNode = new RenderNode(); 1043renderNode.backgroundColor = 0xffff0000; 1044renderNode.frame = { x: 10, y: 10, width: 100, height: 100 }; 1045renderNode.pivot = { x: 0.5, y: 0.6 }; 1046const pivot = renderNode.pivot; 1047 1048renderNode.rotation = { x: 15, y: 0, z: 0 }; 1049 1050class MyNodeController extends NodeController { 1051 private rootNode: FrameNode | null = null; 1052 1053 makeNode(uiContext: UIContext): FrameNode | null { 1054 this.rootNode = new FrameNode(uiContext); 1055 1056 const rootRenderNode = this.rootNode.getRenderNode(); 1057 if (rootRenderNode !== null) { 1058 rootRenderNode.appendChild(renderNode); 1059 } 1060 1061 return this.rootNode; 1062 } 1063} 1064 1065@Entry 1066@Component 1067struct Index { 1068 private myNodeController: MyNodeController = new MyNodeController(); 1069 1070 build() { 1071 Row() { 1072 NodeContainer(this.myNodeController) 1073 } 1074 } 1075} 1076``` 1077 1078### scale 1079 1080set scale(scale: Scale) 1081 1082Sets the scale factor for this RenderNode. 1083 1084**Atomic service API**: This API can be used in atomic services since API version 12. 1085 1086**System capability**: SystemCapability.ArkUI.ArkUI.Full 1087 1088**Parameters** 1089 1090| Name| Type | Mandatory| Description | 1091| ------ | ------------------------------------------ | ---- | -------------------------------- | 1092| scale | [Scale](./js-apis-arkui-graphics.md#scale) | Yes | Scale factor to set.| 1093 1094get scale(): Scale 1095 1096Obtains the scale factor of this RenderNode. 1097 1098**Atomic service API**: This API can be used in atomic services since API version 12. 1099 1100**System capability**: SystemCapability.ArkUI.ArkUI.Full 1101 1102**Return value** 1103 1104| Type | Description | 1105| ------------------------------------------ | -------------------------------------------------- | 1106| [Scale](./js-apis-arkui-graphics.md#scale) | Scale factor of the current RenderNode. The default value is **{ x: 1, y: 1 }**.| 1107 1108**Example** 1109```ts 1110import { RenderNode, FrameNode, NodeController } from '@kit.ArkUI'; 1111 1112const renderNode = new RenderNode(); 1113renderNode.backgroundColor = 0xffff0000; 1114renderNode.frame = { x: 10, y: 10, width: 100, height: 100 }; 1115renderNode.scale = { x: 0.5, y: 1 }; 1116const scale = renderNode.scale; 1117 1118class MyNodeController extends NodeController { 1119 private rootNode: FrameNode | null = null; 1120 1121 makeNode(uiContext: UIContext): FrameNode | null { 1122 this.rootNode = new FrameNode(uiContext); 1123 1124 const rootRenderNode = this.rootNode.getRenderNode(); 1125 if (rootRenderNode !== null) { 1126 rootRenderNode.appendChild(renderNode); 1127 } 1128 1129 return this.rootNode; 1130 } 1131} 1132 1133@Entry 1134@Component 1135struct Index { 1136 private myNodeController: MyNodeController = new MyNodeController(); 1137 1138 build() { 1139 Row() { 1140 NodeContainer(this.myNodeController) 1141 } 1142 } 1143} 1144``` 1145 1146### translation 1147 1148set translation(translation: Translation) 1149 1150Sets the translation amount for this RenderNode. 1151 1152**Atomic service API**: This API can be used in atomic services since API version 12. 1153 1154**System capability**: SystemCapability.ArkUI.ArkUI.Full 1155 1156**Parameters** 1157 1158| Name | Type | Mandatory| Description | 1159| ----------- | ------------------------------------------------------ | ---- | ------------------------------ | 1160| translation | [Translation](./js-apis-arkui-graphics.md#translation) | Yes | Translation amount to set.| 1161 1162get translation(): Translation 1163 1164Obtains the translation amount of this RenderNode. 1165 1166**Atomic service API**: This API can be used in atomic services since API version 12. 1167 1168**System capability**: SystemCapability.ArkUI.ArkUI.Full 1169 1170**Return value** 1171 1172| Type | Description | 1173| ------------------------------------------------------ | ---------------------------------------------------- | 1174| [Translation](./js-apis-arkui-graphics.md#translation) | Translation amount of the current RenderNode. The default value is **{ x: 0, y: 0 }**.| 1175 1176**Example** 1177```ts 1178import { RenderNode, FrameNode, NodeController } from '@kit.ArkUI'; 1179 1180const renderNode = new RenderNode(); 1181renderNode.backgroundColor = 0xffff0000; 1182renderNode.frame = { x: 10, y: 10, width: 100, height: 100 }; 1183renderNode.translation = { x: 100, y: 0 }; 1184const translation = renderNode.translation; 1185 1186class MyNodeController extends NodeController { 1187 private rootNode: FrameNode | null = null; 1188 1189 makeNode(uiContext: UIContext): FrameNode | null { 1190 this.rootNode = new FrameNode(uiContext); 1191 1192 const rootRenderNode = this.rootNode.getRenderNode(); 1193 if (rootRenderNode !== null) { 1194 rootRenderNode.appendChild(renderNode); 1195 } 1196 1197 return this.rootNode; 1198 } 1199} 1200 1201@Entry 1202@Component 1203struct Index { 1204 private myNodeController: MyNodeController = new MyNodeController(); 1205 1206 build() { 1207 Row() { 1208 NodeContainer(this.myNodeController) 1209 } 1210 } 1211} 1212``` 1213 1214### rotation 1215 1216set rotation(rotation: Rotation) 1217 1218Sets the rotation angle for this RenderNode. 1219 1220**Atomic service API**: This API can be used in atomic services since API version 12. 1221 1222**System capability**: SystemCapability.ArkUI.ArkUI.Full 1223 1224**Parameters** 1225 1226| Name | Type | Mandatory| Description | 1227| -------- | ------------------------------------------------ | ---- | -------------------------------- | 1228| rotation | [Rotation](./js-apis-arkui-graphics.md#rotation) | Yes | Rotation angle to set.| 1229 1230get rotation(): Rotation 1231 1232Obtains the rotation angle of this RenderNode. 1233 1234**Atomic service API**: This API can be used in atomic services since API version 12. 1235 1236**System capability**: SystemCapability.ArkUI.ArkUI.Full 1237 1238**Return value** 1239 1240| Type | Description | 1241| ------------------------------------------------ | ------------------------------------------------------- | 1242| [Rotation](./js-apis-arkui-graphics.md#rotation) | Rotation angle of the current RenderNode. The default value is **{ x: 0, y: 0, z: 0}**.| 1243 1244**Example** 1245```ts 1246import { RenderNode, FrameNode, NodeController } from '@kit.ArkUI'; 1247 1248const renderNode = new RenderNode(); 1249renderNode.backgroundColor = 0xffff0000; 1250renderNode.frame = { x: 10, y: 10, width: 100, height: 100 }; 1251renderNode.rotation = { x: 45, y: 0, z: 0 }; 1252const rotation = renderNode.rotation; 1253 1254class MyNodeController extends NodeController { 1255 private rootNode: FrameNode | null = null; 1256 1257 makeNode(uiContext: UIContext): FrameNode | null { 1258 this.rootNode = new FrameNode(uiContext); 1259 1260 const rootRenderNode = this.rootNode.getRenderNode(); 1261 if (rootRenderNode !== null) { 1262 rootRenderNode.appendChild(renderNode); 1263 } 1264 1265 return this.rootNode; 1266 } 1267} 1268 1269@Entry 1270@Component 1271struct Index { 1272 private myNodeController: MyNodeController = new MyNodeController(); 1273 1274 build() { 1275 Row() { 1276 NodeContainer(this.myNodeController) 1277 } 1278 } 1279} 1280``` 1281 1282### transform 1283 1284set transform(transform: Matrix4) 1285 1286Sets the transformation matrix for this RenderNode. 1287 1288**Atomic service API**: This API can be used in atomic services since API version 12. 1289 1290**System capability**: SystemCapability.ArkUI.ArkUI.Full 1291 1292**Parameters** 1293 1294| Name | Type | Mandatory| Description | 1295| --------- | ---------------------------------------------- | ---- | -------------------------------- | 1296| transform | [Matrix4](./js-apis-arkui-graphics.md#matrix4) | Yes | Transformation matrix to set.| 1297 1298get transform(): Matrix4 1299 1300Obtains the transformation matrix of this RenderNode. The default value is as follows: 1301```ts 1302[ 1303 1, 0, 0, 0, 1304 0, 1, 0, 0, 1305 0, 0, 1, 0, 1306 0, 0, 0, 1 1307] 1308``` 1309 1310**Atomic service API**: This API can be used in atomic services since API version 12. 1311 1312**System capability**: SystemCapability.ArkUI.ArkUI.Full 1313 1314**Return value** 1315 1316| Type | Description | 1317| ---------------------------------------------- | -------------------------- | 1318| [Matrix4](./js-apis-arkui-graphics.md#matrix4) | Transformation matrix of the current RenderNode.| 1319 1320**Example** 1321```ts 1322import { RenderNode, FrameNode, NodeController } from '@kit.ArkUI'; 1323 1324const renderNode = new RenderNode(); 1325renderNode.backgroundColor = 0xffff0000; 1326renderNode.frame = { x: 10, y: 10, width: 100, height: 100 }; 1327renderNode.transform = [ 1328 1, 0, 0, 0, 1329 0, 2, 0, 0, 1330 0, 0, 1, 0, 1331 0, 0, 0, 1 1332]; 1333const transform = renderNode.transform; 1334 1335class MyNodeController extends NodeController { 1336 private rootNode: FrameNode | null = null; 1337 1338 makeNode(uiContext: UIContext): FrameNode | null { 1339 this.rootNode = new FrameNode(uiContext); 1340 1341 const rootRenderNode = this.rootNode.getRenderNode(); 1342 if (rootRenderNode !== null) { 1343 rootRenderNode.appendChild(renderNode); 1344 } 1345 1346 return this.rootNode; 1347 } 1348} 1349 1350@Entry 1351@Component 1352struct Index { 1353 private myNodeController: MyNodeController = new MyNodeController(); 1354 1355 build() { 1356 Row() { 1357 NodeContainer(this.myNodeController) 1358 } 1359 } 1360} 1361``` 1362 1363### shadowColor 1364 1365set shadowColor(color: number) 1366 1367Sets the shadow color for this RenderNode, in ARGB format. If [shadowAlpha](#shadowalpha) is set, the opacity is subject to **shadowAlpha**. 1368 1369**Atomic service API**: This API can be used in atomic services since API version 12. 1370 1371**System capability**: SystemCapability.ArkUI.ArkUI.Full 1372 1373**Parameters** 1374 1375| Name| Type | Mandatory| Description | 1376| ------ | ------ | ---- | ------------------------------------------ | 1377| color | number | Yes | Shadow color to set, in ARGB format.| 1378 1379get shadowColor(): number 1380 1381Obtains the shadow color of this RenderNode. 1382 1383**Atomic service API**: This API can be used in atomic services since API version 12. 1384 1385**System capability**: SystemCapability.ArkUI.ArkUI.Full 1386 1387**Return value** 1388 1389| Type | Description | 1390| ------ | -------------------------------------------------------- | 1391| number | Shadow color of the current RenderNode, in ARGB format. The default value is **0X00000000**.| 1392 1393**Example** 1394```ts 1395import { RenderNode, FrameNode, NodeController } from '@kit.ArkUI'; 1396 1397const renderNode = new RenderNode(); 1398renderNode.backgroundColor = 0xffff0000; 1399renderNode.frame = { x: 10, y: 10, width: 100, height: 100 }; 1400renderNode.shadowElevation = 10; 1401renderNode.shadowColor = 0XFF00FF00; 1402const shadowColor = renderNode.shadowColor; 1403 1404class MyNodeController extends NodeController { 1405 private rootNode: FrameNode | null = null; 1406 1407 makeNode(uiContext: UIContext): FrameNode | null { 1408 this.rootNode = new FrameNode(uiContext); 1409 1410 const rootRenderNode = this.rootNode.getRenderNode(); 1411 if (rootRenderNode !== null) { 1412 rootRenderNode.appendChild(renderNode); 1413 } 1414 1415 return this.rootNode; 1416 } 1417} 1418 1419@Entry 1420@Component 1421struct Index { 1422 private myNodeController: MyNodeController = new MyNodeController(); 1423 1424 build() { 1425 Row() { 1426 NodeContainer(this.myNodeController) 1427 } 1428 } 1429} 1430``` 1431 1432### shadowOffset 1433 1434set shadowOffset(offset: Offset) 1435 1436Sets the shadow offset for this RenderNode. 1437 1438**Atomic service API**: This API can be used in atomic services since API version 12. 1439 1440**System capability**: SystemCapability.ArkUI.ArkUI.Full 1441 1442**Parameters** 1443 1444| Name| Type | Mandatory| Description | 1445| ------ | -------------------------------------------- | ---- | -------------------------------- | 1446| offset | [Offset](./js-apis-arkui-graphics.md#offset) | Yes | Shadow offset to set.| 1447 1448get shadowOffset(): Offset 1449 1450Obtains the shadow offset of this RenderNode. 1451 1452**Atomic service API**: This API can be used in atomic services since API version 12. 1453 1454**System capability**: SystemCapability.ArkUI.ArkUI.Full 1455 1456**Return value** 1457 1458| Type | Description | 1459| -------------------------------------------- | -------------------------------------------------- | 1460| [Offset](./js-apis-arkui-graphics.md#offset) | Shadow offset of the current RenderNode. The default value is **{ x: 0, y: 0 }**.| 1461 1462**Example** 1463 1464```ts 1465import { RenderNode, FrameNode, NodeController } from '@kit.ArkUI'; 1466 1467const renderNode = new RenderNode(); 1468renderNode.backgroundColor = 0xffff0000; 1469renderNode.frame = { x: 10, y: 10, width: 100, height: 100 }; 1470renderNode.shadowElevation = 10; 1471renderNode.shadowColor = 0XFF00FF00; 1472renderNode.shadowOffset = { x: 10, y: 10 }; 1473const shadowOffset = renderNode.shadowOffset; 1474 1475class MyNodeController extends NodeController { 1476 private rootNode: FrameNode | null = null; 1477 1478 makeNode(uiContext: UIContext): FrameNode | null { 1479 this.rootNode = new FrameNode(uiContext); 1480 1481 const rootRenderNode = this.rootNode.getRenderNode(); 1482 if (rootRenderNode !== null) { 1483 rootRenderNode.appendChild(renderNode); 1484 } 1485 1486 return this.rootNode; 1487 } 1488} 1489 1490@Entry 1491@Component 1492struct Index { 1493 private myNodeController: MyNodeController = new MyNodeController(); 1494 1495 build() { 1496 Row() { 1497 NodeContainer(this.myNodeController) 1498 } 1499 } 1500} 1501``` 1502 1503### label<sup>12+</sup> 1504 1505set label(label: string) 1506 1507Sets the label for this RenderNode. If the RenderNode was created with **new**, the set label will appear in the node Inspector information. 1508 1509**Atomic service API**: This API can be used in atomic services since API version 12. 1510 1511**System capability**: SystemCapability.ArkUI.ArkUI.Full 1512 1513**Parameters** 1514 1515| Name| Type | Mandatory| Description | 1516| ------ | ------ | ---- | ----------------------------------------- | 1517| label | string | Yes | Label of the RenderNode to set.| 1518 1519get label(): string 1520 1521Obtains the label of this RenderNode. 1522 1523**Atomic service API**: This API can be used in atomic services since API version 12. 1524 1525**System capability**: SystemCapability.ArkUI.ArkUI.Full 1526 1527**Return value** 1528 1529| Type | Description | 1530| ------ | ---------------------------------------------- | 1531| string | Label of the current RenderNode.<br>Default value: **""**| 1532 1533**Example** 1534 1535```ts 1536import { RenderNode, FrameNode, NodeController, UIContext } from '@kit.ArkUI'; 1537 1538class MyNodeController extends NodeController { 1539 private rootNode: FrameNode | null = null; 1540 1541 makeNode(uiContext: UIContext): FrameNode | null { 1542 this.rootNode = new FrameNode(uiContext); 1543 const renderNode: RenderNode | null = this.rootNode.getRenderNode(); 1544 if (renderNode !== null) { 1545 const renderChildNode: RenderNode = new RenderNode(); 1546 renderChildNode.frame = { x: 0, y: 0, width: 100, height: 100 }; 1547 renderChildNode.backgroundColor = 0xffff0000; 1548 renderChildNode.label = 'customRenderChildNode'; 1549 console.log('label:', renderChildNode.label); 1550 renderNode.appendChild(renderChildNode); 1551 } 1552 1553 return this.rootNode; 1554 } 1555} 1556 1557@Entry 1558@Component 1559struct Index { 1560 private myNodeController: MyNodeController = new MyNodeController(); 1561 1562 build() { 1563 Column() { 1564 NodeContainer(this.myNodeController) 1565 .width(300) 1566 .height(700) 1567 .backgroundColor(Color.Gray) 1568 } 1569 } 1570} 1571``` 1572### shadowAlpha 1573 1574set shadowAlpha(alpha: number) 1575 1576Sets the alpha value of the shadow color for this RenderNode. 1577 1578**Atomic service API**: This API can be used in atomic services since API version 12. 1579 1580**System capability**: SystemCapability.ArkUI.ArkUI.Full 1581 1582**Parameters** 1583 1584| Name| Type | Mandatory| Description | 1585| ------ | ------ | ---- | ----------------------------------------- | 1586| alpha | number | Yes | Alpha value of the shadow color to set.| 1587 1588get shadowAlpha(): number 1589 1590Obtains the alpha value of the shadow color of this RenderNode. 1591 1592**Atomic service API**: This API can be used in atomic services since API version 12. 1593 1594**System capability**: SystemCapability.ArkUI.ArkUI.Full 1595 1596**Return value** 1597 1598| Type | Description | 1599| ------ | ---------------------------------------------- | 1600| number | Alpha value of the shadow color of the current RenderNode. The default value is **0**.| 1601 1602**Example** 1603 1604```ts 1605import { RenderNode, FrameNode, NodeController } from '@kit.ArkUI'; 1606 1607const renderNode = new RenderNode(); 1608renderNode.backgroundColor = 0xffff0000; 1609renderNode.frame = { x: 10, y: 10, width: 100, height: 100 }; 1610renderNode.shadowElevation = 10; 1611renderNode.shadowColor = 0XFF00FF00; 1612renderNode.shadowOffset = { x: 10, y: 10 }; 1613renderNode.shadowAlpha = 0.1; 1614const shadowAlpha = renderNode.shadowAlpha; 1615 1616class MyNodeController extends NodeController { 1617 private rootNode: FrameNode | null = null; 1618 1619 makeNode(uiContext: UIContext): FrameNode | null { 1620 this.rootNode = new FrameNode(uiContext); 1621 1622 const rootRenderNode = this.rootNode.getRenderNode(); 1623 if (rootRenderNode !== null) { 1624 rootRenderNode.appendChild(renderNode); 1625 } 1626 1627 return this.rootNode; 1628 } 1629} 1630 1631@Entry 1632@Component 1633struct Index { 1634 private myNodeController: MyNodeController = new MyNodeController(); 1635 1636 build() { 1637 Row() { 1638 NodeContainer(this.myNodeController) 1639 } 1640 } 1641} 1642``` 1643 1644### shadowElevation 1645 1646set shadowElevation(elevation: number) 1647 1648Sets the shadow elevation for this RenderNode. 1649 1650**Atomic service API**: This API can be used in atomic services since API version 12. 1651 1652**System capability**: SystemCapability.ArkUI.ArkUI.Full 1653 1654**Parameters** 1655 1656| Name | Type | Mandatory| Description | 1657| --------- | ------ | ---- | -------------------------------- | 1658| elevation | number | Yes | Shadow elevation to set.| 1659 1660get shadowElevation(): number 1661 1662Obtains the shadow elevation of this RenderNode. 1663 1664**Atomic service API**: This API can be used in atomic services since API version 12. 1665 1666**System capability**: SystemCapability.ArkUI.ArkUI.Full 1667 1668**Return value** 1669 1670| Type | Description | 1671| ------ | ------------------------------------- | 1672| number | Shadow elevation of the current RenderNode. The default value is **0**.| 1673 1674**Example** 1675 1676```ts 1677import { RenderNode, FrameNode, NodeController } from '@kit.ArkUI'; 1678 1679const renderNode = new RenderNode(); 1680renderNode.backgroundColor = 0xffff0000; 1681renderNode.frame = { x: 0, y: 0, width: 100, height: 100 }; 1682renderNode.shadowOffset = { x: 10, y: 10 }; 1683renderNode.shadowAlpha = 0.7 1684renderNode.shadowElevation = 30; 1685const shadowElevation = renderNode.shadowElevation; 1686 1687class MyNodeController extends NodeController { 1688 private rootNode: FrameNode | null = null; 1689 1690 makeNode(uiContext: UIContext): FrameNode | null { 1691 this.rootNode = new FrameNode(uiContext); 1692 1693 const rootRenderNode = this.rootNode.getRenderNode(); 1694 if (rootRenderNode !== null) { 1695 rootRenderNode.appendChild(renderNode); 1696 } 1697 1698 return this.rootNode; 1699 } 1700} 1701 1702@Entry 1703@Component 1704struct Index { 1705 private myNodeController: MyNodeController = new MyNodeController(); 1706 1707 build() { 1708 Row() { 1709 NodeContainer(this.myNodeController) 1710 } 1711 } 1712} 1713``` 1714 1715 1716 1717### shadowRadius 1718 1719set shadowRadius(radius: number) 1720 1721Sets the shadow blur radius for this RenderNode. 1722 1723**Atomic service API**: This API can be used in atomic services since API version 12. 1724 1725**System capability**: SystemCapability.ArkUI.ArkUI.Full 1726 1727**Parameters** 1728 1729| Name| Type | Mandatory| Description | 1730| ------ | ------ | ---- | ------------------------------------ | 1731| radius | number | Yes | Shadow blur radius to set.| 1732 1733get shadowRadius(): number 1734 1735Obtains the shadow blur radius of this RenderNode. 1736 1737**Atomic service API**: This API can be used in atomic services since API version 12. 1738 1739**System capability**: SystemCapability.ArkUI.ArkUI.Full 1740 1741**Return value** 1742 1743| Type | Description | 1744| ------ | ----------------------------------------- | 1745| number | Shadow blur radius of the current RenderNode. The default value is **0**.| 1746 1747**Example** 1748 1749```ts 1750import { RenderNode, FrameNode, NodeController } from '@kit.ArkUI'; 1751 1752const renderNode = new RenderNode(); 1753renderNode.backgroundColor = 0xff00ff00; 1754renderNode.frame = { x: 0, y: 0, width: 100, height: 100 }; 1755renderNode.shadowOffset = { x: 10, y: 10 }; 1756renderNode.shadowAlpha = 0.7 1757renderNode.shadowRadius = 30; 1758const shadowRadius = renderNode.shadowRadius; 1759 1760class MyNodeController extends NodeController { 1761 private rootNode: FrameNode | null = null; 1762 1763 makeNode(uiContext: UIContext): FrameNode | null { 1764 this.rootNode = new FrameNode(uiContext); 1765 1766 const rootRenderNode = this.rootNode.getRenderNode(); 1767 if (rootRenderNode !== null) { 1768 rootRenderNode.appendChild(renderNode); 1769 } 1770 1771 return this.rootNode; 1772 } 1773} 1774 1775@Entry 1776@Component 1777struct Index { 1778 private myNodeController: MyNodeController = new MyNodeController(); 1779 1780 build() { 1781 Row() { 1782 NodeContainer(this.myNodeController) 1783 } 1784 } 1785} 1786``` 1787 1788 1789 1790### draw 1791 1792draw(context: DrawContext): void 1793 1794Performs drawing. You need to implement this API. It is called when the RenderNode performs drawing. 1795 1796**Atomic service API**: This API can be used in atomic services since API version 12. 1797 1798**System capability**: SystemCapability.ArkUI.ArkUI.Full 1799 1800**Parameters** 1801 1802| Name | Type | Mandatory| Description | 1803| ------- | ------------------------------------------------------ | ---- | ---------------- | 1804| context | [DrawContext](./js-apis-arkui-graphics.md#drawcontext) | Yes | Graphics drawing context.| 1805 1806**Example** 1807 1808Code in ArkTS: 1809 1810```ts 1811// Index.ets 1812import bridge from "libentry.so" // This .so file is compiled and generated by you using the Node-API. 1813import { RenderNode, FrameNode, NodeController, DrawContext } from '@kit.ArkUI'; 1814 1815class MyRenderNode extends RenderNode { 1816 draw(context: DrawContext) { 1817 // The width and height in the context need to be converted from vp to px. 1818 bridge.nativeOnDraw(0, context, vp2px(context.size.height), vp2px(context.size.width)); 1819 } 1820} 1821 1822class MyNodeController extends NodeController { 1823 private rootNode: FrameNode | null = null; 1824 1825 makeNode(uiContext: UIContext): FrameNode | null { 1826 this.rootNode = new FrameNode(uiContext); 1827 1828 const rootRenderNode = this.rootNode.getRenderNode(); 1829 if (rootRenderNode !== null) { 1830 const renderNode = new MyRenderNode(); 1831 renderNode.size = { width: 100, height: 100 } 1832 rootRenderNode.appendChild(renderNode); 1833 } 1834 1835 return this.rootNode; 1836 } 1837} 1838 1839@Entry 1840@Component 1841struct Index { 1842 private myNodeController: MyNodeController = new MyNodeController(); 1843 build() { 1844 Row() { 1845 NodeContainer(this.myNodeController) 1846 } 1847 } 1848} 1849``` 1850 1851The C++ side can obtain the canvas through the Node-API and perform subsequent custom drawing operations. 1852 1853```c++ 1854// native_bridge.cpp 1855#include "napi/native_api.h" 1856#include <native_drawing/drawing_canvas.h> 1857#include <native_drawing/drawing_color.h> 1858#include <native_drawing/drawing_path.h> 1859#include <native_drawing/drawing_pen.h> 1860 1861static napi_value OnDraw(napi_env env, napi_callback_info info) 1862{ 1863 size_t argc = 4; 1864 napi_value args[4] = { nullptr }; 1865 napi_get_cb_info(env, info, &argc, args, nullptr, nullptr); 1866 1867 int32_t id; 1868 napi_get_value_int32(env, args[0], &id); 1869 1870 // Obtain the pointer to the canvas. 1871 void* temp = nullptr; 1872 napi_unwrap(env, args[1], &temp); 1873 OH_Drawing_Canvas *canvas = reinterpret_cast<OH_Drawing_Canvas*>(temp); 1874 1875 // Obtain the canvas width. 1876 int32_t width; 1877 napi_get_value_int32(env, args[2], &width); 1878 1879 // Obtain the canvas height. 1880 int32_t height; 1881 napi_get_value_int32(env, args[3], &height); 1882 1883 // Pass in information such as the canvas, height, and width to the drawing API for custom drawing. 1884 auto path = OH_Drawing_PathCreate(); 1885 OH_Drawing_PathMoveTo(path, width / 4, height / 4); 1886 OH_Drawing_PathLineTo(path, width * 3 / 4, height / 4); 1887 OH_Drawing_PathLineTo(path, width * 3 / 4, height * 3 / 4); 1888 OH_Drawing_PathLineTo(path, width / 4, height * 3 / 4); 1889 OH_Drawing_PathLineTo(path, width / 4, height / 4); 1890 OH_Drawing_PathClose(path); 1891 1892 auto pen = OH_Drawing_PenCreate(); 1893 OH_Drawing_PenSetWidth(pen, 10); 1894 OH_Drawing_PenSetColor(pen, OH_Drawing_ColorSetArgb(0xFF, 0xFF, 0x00, 0x00)); 1895 OH_Drawing_CanvasAttachPen(canvas, pen); 1896 1897 OH_Drawing_CanvasDrawPath(canvas, path); 1898 1899 return nullptr; 1900} 1901 1902EXTERN_C_START 1903static napi_value Init(napi_env env, napi_value exports) 1904{ 1905 napi_property_descriptor desc[] = { 1906 { "nativeOnDraw", nullptr, OnDraw, nullptr, nullptr, nullptr, napi_default, nullptr } 1907 }; 1908 napi_define_properties(env, exports, sizeof(desc) / sizeof(desc[0]), desc); 1909 return exports; 1910} 1911EXTERN_C_END 1912 1913static napi_module demoModule = { 1914 .nm_version =1, 1915 .nm_flags = 0, 1916 .nm_filename = nullptr, 1917 .nm_register_func = Init, 1918 .nm_modname = "entry", 1919 .nm_priv = ((void*)0), 1920 .reserved = { 0 }, 1921}; 1922 1923extern "C" __attribute__((constructor)) void RegisterEntryModule(void) 1924{ 1925 napi_module_register(&demoModule); 1926} 1927``` 1928 1929Add the following content to the **src/main/cpp/CMakeLists.txt** file of the project: 1930 1931<!--code_no_check--> 1932 1933```cmake 1934# the minimum version of CMake. 1935cmake_minimum_required(VERSION 3.4.1) 1936project(NapiTest) 1937 1938set(NATIVERENDER_ROOT_PATH ${CMAKE_CURRENT_SOURCE_DIR}) 1939 1940include_directories(${NATIVERENDER_ROOT_PATH} 1941 ${NATIVERENDER_ROOT_PATH}/include) 1942 1943add_library(entry SHARED native_bridge.cpp) 1944target_link_libraries(entry PUBLIC libace_napi.z.so) 1945target_link_libraries(entry PUBLIC libace_ndk.z.so) 1946target_link_libraries(entry PUBLIC libnative_drawing.so) 1947``` 1948 1949In addition, add the definition of the custom drawing API on the ArkTs side to the **src/main/cpp/types/libentry/index.d.ts** file of the project. The following is an example: 1950 1951<!--code_no_check--> 1952 1953```ts 1954import { DrawContext } from '@kit.ArkUI'; 1955 1956export const nativeOnDraw: (id: number, context: DrawContext, width: number, height: number) => number; 1957``` 1958 1959### invalidate 1960 1961invalidate(): void 1962 1963Triggers the re-rendering of this RenderNode. 1964 1965**Atomic service API**: This API can be used in atomic services since API version 12. 1966 1967**System capability**: SystemCapability.ArkUI.ArkUI.Full 1968 1969**Example** 1970 1971```ts 1972import bridge from "libentry.so" // This .so file is compiled and generated by you using the Node-API. 1973import { RenderNode, FrameNode, NodeController, DrawContext } from '@kit.ArkUI'; 1974 1975class MyRenderNode extends RenderNode { 1976 draw(context: DrawContext) { 1977 // The width and height in the context need to be converted from vp to px. 1978 bridge.nativeOnDraw(0, context, vp2px(context.size.height), vp2px(context.size.width)); 1979 } 1980} 1981 1982const newNode = new MyRenderNode(); 1983newNode.size = { width: 100, height: 100 }; 1984 1985class MyNodeController extends NodeController { 1986 private rootNode: FrameNode | null = null; 1987 1988 makeNode(uiContext: UIContext): FrameNode | null { 1989 this.rootNode = new FrameNode(uiContext); 1990 const renderNode = this.rootNode.getRenderNode(); 1991 if (renderNode === null) { 1992 return this.rootNode; 1993 } 1994 renderNode.appendChild(newNode); 1995 return this.rootNode; 1996 } 1997} 1998 1999@Entry 2000@Component 2001struct Index { 2002 build() { 2003 Column() { 2004 Column() { 2005 NodeContainer(new MyNodeController()) 2006 .width('100%') 2007 Button('Invalidate') 2008 .onClick(() => { 2009 newNode.invalidate() 2010 }) 2011 } 2012 .width('100%') 2013 .height('100%') 2014 } 2015 .height('100%') 2016 } 2017} 2018``` 2019 2020For details about how to build **libentry.so**, see the example of the **draw** API. 2021 2022### borderStyle<sup>12+</sup> 2023 2024set borderStyle(style: Edges\<BorderStyle>) 2025 2026Sets the border style for this RenderNode. 2027 2028**Atomic service API**: This API can be used in atomic services since API version 12. 2029 2030**System capability**: SystemCapability.ArkUI.ArkUI.Full 2031 2032**Parameters** 2033 2034| Name| Type | Mandatory| Description | 2035| ------ | ------------------------------------------------------------------------------------------------------ | ---- | ---------------------- | 2036| style | [Edges](./js-apis-arkui-graphics.md#edgest12)<[BorderStyle](./arkui-ts/ts-appendix-enums.md#borderstyle)> | Yes | Border style of the RenderNode.| 2037 2038get borderStyle(): Edges\<BorderStyle> 2039 2040Obtains the border style of this RenderNode. 2041 2042**Atomic service API**: This API can be used in atomic services since API version 12. 2043 2044**System capability**: SystemCapability.ArkUI.ArkUI.Full 2045 2046**Return value** 2047 2048| Type | Description | 2049| ------------------------------------------------------------------------------------------------------ | ---------------------- | 2050| [Edges](./js-apis-arkui-graphics.md#edgest12)<[BorderStyle](./arkui-ts/ts-appendix-enums.md#borderstyle)> | Border style of the RenderNode.| 2051 2052**Example** 2053```ts 2054import { RenderNode, FrameNode, NodeController } from '@kit.ArkUI'; 2055 2056const renderNode = new RenderNode(); 2057renderNode.frame = { x: 0, y: 0, width: 150, height: 150 }; 2058renderNode.backgroundColor = 0XFF00FF00; 2059renderNode.borderWidth = { left: 8, top: 8, right: 8, bottom: 8 }; 2060renderNode.borderStyle = { 2061 left: BorderStyle.Solid, 2062 top: BorderStyle.Dotted, 2063 right: BorderStyle.Dashed, 2064 bottom: BorderStyle.Solid 2065} 2066const borderStyle = renderNode.borderStyle; 2067 2068 2069class MyNodeController extends NodeController { 2070 private rootNode: FrameNode | null = null; 2071 2072 makeNode(uiContext: UIContext): FrameNode | null { 2073 this.rootNode = new FrameNode(uiContext); 2074 2075 const rootRenderNode = this.rootNode.getRenderNode(); 2076 if (rootRenderNode !== null) { 2077 rootRenderNode.appendChild(renderNode); 2078 } 2079 2080 return this.rootNode; 2081 } 2082} 2083 2084@Entry 2085@Component 2086struct Index { 2087 private myNodeController: MyNodeController = new MyNodeController(); 2088 2089 build() { 2090 Row() { 2091 NodeContainer(this.myNodeController) 2092 } 2093 } 2094} 2095``` 2096 2097### borderWidth<sup>12+</sup> 2098 2099set borderWidth(width: Edges\<number>) 2100 2101Sets the border width for this RenderNode. 2102 2103**Atomic service API**: This API can be used in atomic services since API version 12. 2104 2105**System capability**: SystemCapability.ArkUI.ArkUI.Full 2106 2107**Parameters** 2108 2109| Name| Type | Mandatory| Description | 2110| ------ | --------------------------------------------------- | ---- | ---------------------- | 2111| width | [Edges\<number>](./js-apis-arkui-graphics.md#edgest12) | Yes | Border width of the RenderNode, in vp.| 2112 2113get borderWidth(): Edges\<number> 2114 2115Obtains the border width of this RenderNode. 2116 2117**Atomic service API**: This API can be used in atomic services since API version 12. 2118 2119**System capability**: SystemCapability.ArkUI.ArkUI.Full 2120 2121**Return value** 2122 2123| Type | Description | 2124| --------------------------------------------------- | ---------------------- | 2125| [Edges\<number>](./js-apis-arkui-graphics.md#edgest12) | Border width of the RenderNode. The default width of all borders is 0 vp.| 2126 2127**Example** 2128 2129```ts 2130import { RenderNode, FrameNode, NodeController } from '@kit.ArkUI'; 2131 2132const renderNode = new RenderNode(); 2133renderNode.frame = { x: 0, y: 0, width: 150, height: 150 }; 2134renderNode.backgroundColor = 0XFF00FF00; 2135renderNode.borderWidth = { left: 8, top: 8, right: 8, bottom: 8 }; 2136const borderWidth = renderNode.borderWidth; 2137 2138 2139class MyNodeController extends NodeController { 2140 private rootNode: FrameNode | null = null; 2141 2142 makeNode(uiContext: UIContext): FrameNode | null { 2143 this.rootNode = new FrameNode(uiContext); 2144 2145 const rootRenderNode = this.rootNode.getRenderNode(); 2146 if (rootRenderNode !== null) { 2147 rootRenderNode.appendChild(renderNode); 2148 } 2149 2150 return this.rootNode; 2151 } 2152} 2153 2154@Entry 2155@Component 2156struct Index { 2157 private myNodeController: MyNodeController = new MyNodeController(); 2158 2159 build() { 2160 Row() { 2161 NodeContainer(this.myNodeController) 2162 } 2163 } 2164} 2165``` 2166 2167### borderColor<sup>12+</sup> 2168 2169set borderColor(color: Edges\<number>) 2170 2171Sets the border color for this RenderNode. 2172 2173**Atomic service API**: This API can be used in atomic services since API version 12. 2174 2175**System capability**: SystemCapability.ArkUI.ArkUI.Full 2176 2177**Parameters** 2178 2179| Name| Type | Mandatory| Description | 2180| ------ | --------------------------------------------------- | ---- | ---------------------- | 2181| color | [Edges\<number>](./js-apis-arkui-graphics.md#edgest12) | Yes | Border color of the RenderNode.| 2182 2183get borderColor(): Edges\<number> 2184 2185Obtains the border color of this RenderNode. 2186 2187**Atomic service API**: This API can be used in atomic services since API version 12. 2188 2189**System capability**: SystemCapability.ArkUI.ArkUI.Full 2190 2191**Return value** 2192 2193| Type | Description | 2194| --------------------------------------------------- | ---------------------- | 2195| [Edges\<number>](./js-apis-arkui-graphics.md#edgest12) | Border color of the RenderNode. By default, the color of all borders is 0XFF000000.| 2196 2197**Example** 2198 2199```ts 2200import { RenderNode, FrameNode, NodeController } from '@kit.ArkUI'; 2201 2202const renderNode = new RenderNode(); 2203renderNode.frame = { x: 0, y: 0, width: 150, height: 150 }; 2204renderNode.backgroundColor = 0XFF00FF00; 2205renderNode.borderWidth = { left: 8, top: 8, right: 8, bottom: 8 }; 2206renderNode.borderColor = { left: 0xFF0000FF, top: 0xFF0000FF, right: 0xFF0000FF, bottom: 0xFF0000FF }; 2207const borderColor = renderNode.borderColor; 2208 2209 2210class MyNodeController extends NodeController { 2211 private rootNode: FrameNode | null = null; 2212 2213 makeNode(uiContext: UIContext): FrameNode | null { 2214 this.rootNode = new FrameNode(uiContext); 2215 2216 const rootRenderNode = this.rootNode.getRenderNode(); 2217 if (rootRenderNode !== null) { 2218 rootRenderNode.appendChild(renderNode); 2219 } 2220 2221 return this.rootNode; 2222 } 2223} 2224 2225@Entry 2226@Component 2227struct Index { 2228 private myNodeController: MyNodeController = new MyNodeController(); 2229 2230 build() { 2231 Row() { 2232 NodeContainer(this.myNodeController) 2233 } 2234 } 2235} 2236``` 2237 2238### borderRadius<sup>12+</sup> 2239 2240set borderRadius(radius: BorderRadiuses) 2241 2242Sets the border corner radius for this RenderNode. 2243 2244**Atomic service API**: This API can be used in atomic services since API version 12. 2245 2246**System capability**: SystemCapability.ArkUI.ArkUI.Full 2247 2248**Parameters** 2249 2250| Name| Type | Mandatory| Description | 2251| ------ | ------------------------------------------------------------ | ---- | ---------------------- | 2252| radius | [BorderRadiuses](./js-apis-arkui-graphics.md#borderradiuses12) | Yes | Border corner radius of the RenderNode, in vp.| 2253 2254 2255get borderRadius(): BorderRadiuses 2256 2257Obtains the border corner radius of this RenderNode. 2258 2259**Atomic service API**: This API can be used in atomic services since API version 12. 2260 2261**System capability**: SystemCapability.ArkUI.ArkUI.Full 2262 2263**Return value** 2264 2265| Type | Description | 2266| ------------------------------------------------------------ | ---------------------- | 2267| [BorderRadiuses](./js-apis-arkui-graphics.md#borderradiuses12) | Border corner radius of the RenderNode. By default, the corner radius of all borders is 0 vp.| 2268 2269**Example** 2270 2271```ts 2272import { RenderNode, FrameNode, NodeController } from '@kit.ArkUI'; 2273 2274const renderNode = new RenderNode(); 2275renderNode.frame = { x: 0, y: 0, width: 150, height: 150 }; 2276renderNode.backgroundColor = 0XFF00FF00; 2277renderNode.borderRadius = { topLeft: 32, topRight: 32, bottomLeft: 32, bottomRight: 32 }; 2278const borderRadius = renderNode.borderRadius; 2279 2280 2281class MyNodeController extends NodeController { 2282 private rootNode: FrameNode | null = null; 2283 2284 makeNode(uiContext: UIContext): FrameNode | null { 2285 this.rootNode = new FrameNode(uiContext); 2286 2287 const rootRenderNode = this.rootNode.getRenderNode(); 2288 if (rootRenderNode !== null) { 2289 rootRenderNode.appendChild(renderNode); 2290 } 2291 2292 return this.rootNode; 2293 } 2294} 2295 2296@Entry 2297@Component 2298struct Index { 2299 private myNodeController: MyNodeController = new MyNodeController(); 2300 2301 build() { 2302 Row() { 2303 NodeContainer(this.myNodeController) 2304 } 2305 } 2306} 2307``` 2308 2309### shapeMask<sup>12+</sup> 2310 2311set shapeMask(shapeMask: ShapeMask) 2312 2313Sets the mask for this RenderNode. 2314 2315**Atomic service API**: This API can be used in atomic services since API version 12. 2316 2317**System capability**: SystemCapability.ArkUI.ArkUI.Full 2318 2319**Parameters** 2320 2321| Name | Type | Mandatory| Description | 2322| --------- | -------------------------------------------------- | ---- | ------------------ | 2323| shapeMask | [ShapeMask](./js-apis-arkui-graphics.md#shapemask12) | Yes | Shape mask of the RenderNode.| 2324 2325get shapeMask(): ShapeMask 2326 2327Obtains the shape mask of this RenderNode. 2328 2329**System capability**: SystemCapability.ArkUI.ArkUI.Full 2330 2331**Return value** 2332 2333| Type | Description | 2334| -------------------------------------------------- | ---------------------- | 2335| [ShapeMask](./js-apis-arkui-graphics.md#shapemask12) | Shape mask of the RenderNode.| 2336 2337**Example** 2338 2339```ts 2340import { RenderNode, FrameNode, NodeController, ShapeMask } from '@kit.ArkUI'; 2341 2342const mask = new ShapeMask(); 2343mask.setRectShape({ left: 0, right: 150, top: 0, bottom: 150 }); 2344mask.fillColor = 0X55FF0000; 2345mask.strokeColor = 0XFFFF0000; 2346mask.strokeWidth = 24; 2347 2348const renderNode = new RenderNode(); 2349renderNode.frame = { x: 0, y: 0, width: 150, height: 150 }; 2350renderNode.backgroundColor = 0XFF00FF00; 2351renderNode.shapeMask = mask; 2352const shapeMask = renderNode.shapeMask; 2353 2354 2355class MyNodeController extends NodeController { 2356 private rootNode: FrameNode | null = null; 2357 2358 makeNode(uiContext: UIContext): FrameNode | null { 2359 this.rootNode = new FrameNode(uiContext); 2360 2361 const rootRenderNode = this.rootNode.getRenderNode(); 2362 if (rootRenderNode !== null) { 2363 rootRenderNode.appendChild(renderNode); 2364 } 2365 2366 return this.rootNode; 2367 } 2368} 2369 2370@Entry 2371@Component 2372struct Index { 2373 private myNodeController: MyNodeController = new MyNodeController(); 2374 2375 build() { 2376 Row() { 2377 NodeContainer(this.myNodeController) 2378 } 2379 } 2380} 2381``` 2382 2383### shapeClip<sup>12+</sup> 2384 2385set shapeClip(shapeClip: ShapeClip) 2386 2387Sets the clipping shape for this RenderNode. 2388 2389**Atomic service API**: This API can be used in atomic services since API version 12. 2390 2391**System capability**: SystemCapability.ArkUI.ArkUI.Full 2392 2393**Parameters** 2394 2395| Name | Type | Mandatory| Description | 2396| --------- | -------------------------------------------------- | ---- | ------------------ | 2397| shapeClip | [ShapeClip](./js-apis-arkui-graphics.md#shapeclip12) | Yes | Clipping shape of the RenderNode.| 2398 2399get shapeClip(): ShapeClip 2400 2401Obtains the clipping shape for this RenderNode. 2402 2403**Atomic service API**: This API can be used in atomic services since API version 12. 2404 2405**System capability**: SystemCapability.ArkUI.ArkUI.Full 2406 2407**Return value** 2408 2409| Type | Description | 2410| -------------------------------------------------- | ---------------------- | 2411| [ShapeClip](./js-apis-arkui-graphics.md#shapeclip12) | Clipping shape of the RenderNode.| 2412 2413**Example** 2414 2415```ts 2416import { RenderNode, FrameNode, NodeController, ShapeMask, ShapeClip } from '@kit.ArkUI'; 2417 2418const clip = new ShapeClip(); 2419clip.setCommandPath({ commands: "M100 0 L0 100 L50 200 L150 200 L200 100 Z" }); 2420 2421const renderNode = new RenderNode(); 2422renderNode.frame = { 2423 x: 0, 2424 y: 0, 2425 width: 150, 2426 height: 150 2427}; 2428renderNode.backgroundColor = 0XFF00FF00; 2429renderNode.shapeClip = clip; 2430const shapeClip = renderNode.shapeClip; 2431 2432class MyNodeController extends NodeController { 2433 private rootNode: FrameNode | null = null; 2434 2435 makeNode(uiContext: UIContext): FrameNode | null { 2436 this.rootNode = new FrameNode(uiContext); 2437 2438 const rootRenderNode = this.rootNode.getRenderNode(); 2439 if (rootRenderNode !== null) { 2440 rootRenderNode.appendChild(renderNode); 2441 } 2442 2443 return this.rootNode; 2444 } 2445} 2446 2447@Entry 2448@Component 2449struct Index { 2450 private myNodeController: MyNodeController = new MyNodeController(); 2451 2452 build() { 2453 Column() { 2454 NodeContainer(this.myNodeController) 2455 .borderWidth(1) 2456 Button("setRectShape") 2457 .onClick(() => { 2458 shapeClip.setRectShape({ 2459 left: 0, 2460 right: 150, 2461 top: 0, 2462 bottom: 150 2463 }); 2464 renderNode.shapeClip = shapeClip; 2465 }) 2466 Button("setRoundRectShape") 2467 .onClick(() => { 2468 renderNode.shapeClip.setRoundRectShape({ 2469 rect: { 2470 left: 0, 2471 top: 0, 2472 right: vp2px(150), 2473 bottom: vp2px(150) 2474 }, 2475 corners: { 2476 topLeft: { x: 32, y: 32 }, 2477 topRight: { x: 32, y: 32 }, 2478 bottomLeft: { x: 32, y: 32 }, 2479 bottomRight: { x: 32, y: 32 } 2480 } 2481 }); 2482 renderNode.shapeClip = renderNode.shapeClip; 2483 }) 2484 Button("setCircleShape") 2485 .onClick(() => { 2486 renderNode.shapeClip.setCircleShape({ centerY: 75, centerX: 75, radius: 75 }); 2487 renderNode.shapeClip = renderNode.shapeClip; 2488 2489 }) 2490 Button("setOvalShape") 2491 .onClick(() => { 2492 renderNode.shapeClip.setOvalShape({ 2493 left: 0, 2494 right: vp2px(150), 2495 top: 0, 2496 bottom: vp2px(100) 2497 }); 2498 renderNode.shapeClip = renderNode.shapeClip; 2499 }) 2500 Button("setCommandPath") 2501 .onClick(() => { 2502 renderNode.shapeClip.setCommandPath({ commands: "M100 0 L0 100 L50 200 L150 200 L200 100 Z" }); 2503 renderNode.shapeClip = renderNode.shapeClip; 2504 }) 2505 } 2506 } 2507} 2508``` 2509 2510### dispose<sup>12+</sup> 2511 2512dispose(): void 2513 2514Releases this RenderNode immediately. 2515 2516**Atomic service API**: This API can be used in atomic services since API version 12. 2517 2518**System capability**: SystemCapability.ArkUI.ArkUI.Full 2519 2520**Example** 2521 2522```ts 2523import { RenderNode, FrameNode, NodeController } from '@kit.ArkUI'; 2524 2525const renderNode = new RenderNode(); 2526renderNode.frame = { x: 0, y: 100, width: 100, height: 100 }; 2527renderNode.backgroundColor = 0xffff0000; 2528 2529class MyNodeController extends NodeController { 2530 private rootNode: FrameNode | null = null; 2531 2532 makeNode(uiContext: UIContext): FrameNode | null { 2533 this.rootNode = new FrameNode(uiContext); 2534 2535 const rootRenderNode = this.rootNode!.getRenderNode(); 2536 if (rootRenderNode !== null) { 2537 rootRenderNode.size = { width: 200, height: 200 }; 2538 rootRenderNode.backgroundColor = 0xff00ff00; 2539 rootRenderNode.appendChild(renderNode); 2540 } 2541 2542 return this.rootNode; 2543 } 2544 2545 disposeRenderNode() { 2546 const rootRenderNode = this.rootNode!.getRenderNode(); 2547 if (rootRenderNode !== null) { 2548 rootRenderNode.removeChild(renderNode); 2549 } 2550 renderNode.dispose(); 2551 } 2552} 2553 2554@Entry 2555@Component 2556struct Index { 2557 private myNodeController: MyNodeController = new MyNodeController(); 2558 2559 build() { 2560 Column({ space: 4 }) { 2561 NodeContainer(this.myNodeController) 2562 Button('RenderNode dispose') 2563 .onClick(() => { 2564 this.myNodeController.disposeRenderNode(); 2565 }) 2566 .width('100%') 2567 } 2568 } 2569} 2570``` 2571 2572### markNodeGroup<sup>12+</sup> 2573 2574set markNodeGroup(isNodeGroup: boolean) 2575 2576Sets whether to prioritize the drawing of this RenderNode and its childe nodes. If the input parameter is set to **true**, attributes such as opacity will be composited after the node has been drawn. The configuration result is as follows. 2577 2578 2579 2580**Atomic service API**: This API can be used in atomic services since API version 12. 2581 2582**System capability**: SystemCapability.ArkUI.ArkUI.Full 2583 2584**Parameters** 2585 2586| Name | Type | Mandatory| Description | 2587| --------- | -------------------------------------------------- | ---- | ------------------ | 2588| isNodeGroup | boolean | Yes | Whether to prioritize the drawing of the current RenderNode and its childe nodes.| 2589 2590get markNodeGroup(): boolean 2591 2592Obtains whether to prioritize the drawing of this RenderNode and its childe nodes. 2593 2594**System capability**: SystemCapability.ArkUI.ArkUI.Full 2595 2596**Return value** 2597 2598| Type | Description | 2599| ------- | ------------------------------------------- | 2600| boolean | Whether to prioritize the drawing of the current RenderNode and its childe nodes. The default value is **false**.| 2601 2602**Example** 2603 2604```ts 2605import { RenderNode, FrameNode, NodeController, DrawContext } from '@kit.ArkUI'; 2606import { drawing } from '@kit.ArkGraphics2D'; 2607 2608class MyRenderNode extends RenderNode { 2609 draw(context: DrawContext) { 2610 const canvas = context.canvas; 2611 const brush = new drawing.Brush(); 2612 brush.setColor({ alpha: 255, red: 255, green: 0, blue: 0 }); 2613 canvas.attachBrush(brush); 2614 canvas.drawRect({ left: 0, right: 200, top: 0, bottom: 200 }); 2615 canvas.detachBrush(); 2616 2617 brush.setColor({ alpha: 255, red: 0, green: 255, blue: 0 }); 2618 canvas.attachBrush(brush); 2619 canvas.drawRect({ left: 100, right: 300, top: 100, bottom: 300 }); 2620 canvas.detachBrush(); 2621 } 2622} 2623 2624const renderNode = new MyRenderNode(); 2625renderNode.frame = { x: 100, y: 100, width: 200, height: 200 }; 2626renderNode.backgroundColor = 0xff0000ff; 2627renderNode.markNodeGroup = true; 2628renderNode.opacity = 0.5; 2629 2630const isNodeGroup = renderNode.markNodeGroup; 2631 2632class MyNodeController extends NodeController { 2633 private rootNode: FrameNode | null = null; 2634 2635 makeNode(uiContext: UIContext): FrameNode | null { 2636 this.rootNode = new FrameNode(uiContext); 2637 2638 const rootRenderNode = this.rootNode.getRenderNode(); 2639 if (rootRenderNode !== null) { 2640 rootRenderNode.appendChild(renderNode); 2641 } 2642 2643 return this.rootNode; 2644 } 2645} 2646 2647@Entry 2648@Component 2649struct Index { 2650 private myNodeController: MyNodeController = new MyNodeController(); 2651 2652 build() { 2653 Row() { 2654 NodeContainer(this.myNodeController) 2655 } 2656 } 2657} 2658``` 2659 2660### lengthMetricsUnit<sup>12+</sup> 2661 2662set lengthMetricsUnit(unit: LengthMetricsUnit) 2663 2664Sets the metric unit used by attributes of this RenderNode. 2665 2666**Atomic service API**: This API can be used in atomic services since API version 12. 2667 2668**System capability**: SystemCapability.ArkUI.ArkUI.Full 2669 2670**Parameters** 2671 2672| Name| Type | Mandatory| Description | 2673| ------ | -------------------------------------------------------------------- | ---- | ---------------------------------- | 2674| unit | [LengthMetricsUnit](./js-apis-arkui-graphics.md#lengthmetricsunit12) | Yes | Metric unit used by attributes of the current RenderNode.| 2675 2676get lengthMetricsUnit(): LengthMetricsUnit 2677 2678Obtains the metric unit used by attributes of this RenderNode. 2679 2680**System capability**: SystemCapability.ArkUI.ArkUI.Full 2681 2682**Return value** 2683 2684| Type | Description | 2685| ------- | ------------------------------------------- | 2686| [LengthMetricsUnit](./js-apis-arkui-graphics.md#lengthmetricsunit12) | Metric unit used by attributes of this RenderNode. The default value is **LengthMetricsUnit.DEFAULT**.| 2687 2688**Example** 2689 2690```ts 2691import { RenderNode, FrameNode, NodeController, DrawContext } from '@kit.ArkUI'; 2692import { drawing } from '@kit.ArkGraphics2D'; 2693import { LengthMetricsUnit } from '@ohos.arkui.node'; 2694 2695class BaseRenderNode extends RenderNode { 2696 constructor() { 2697 super(); 2698 this.lengthMetricsUnit = LengthMetricsUnit.PX; 2699 } 2700} 2701 2702class MyRenderNode extends BaseRenderNode { 2703 draw(context: DrawContext) { 2704 const canvas = context.canvas; 2705 const brush = new drawing.Brush(); 2706 brush.setColor({ alpha: 255, red: 255, green: 0, blue: 0 }); 2707 canvas.attachBrush(brush); 2708 canvas.drawRect({ left: 0, right: 200, top: 0, bottom: 200 }); 2709 canvas.detachBrush(); 2710 } 2711} 2712 2713const renderNode = new MyRenderNode(); 2714renderNode.frame = { x: 100, y: 100, width: 200, height: 200 }; 2715renderNode.backgroundColor = 0xff0000ff; 2716renderNode.rotation = { x: 0, y: 0, z: 45 }; 2717 2718class MyNodeController extends NodeController { 2719 private rootNode: FrameNode | null = null; 2720 2721 makeNode(uiContext: UIContext): FrameNode | null { 2722 this.rootNode = new FrameNode(uiContext); 2723 const rootRenderNode = this.rootNode.getRenderNode(); 2724 if (rootRenderNode !== null) { 2725 rootRenderNode.appendChild(renderNode); 2726 } 2727 return this.rootNode; 2728 } 2729} 2730 2731@Entry 2732@Component 2733struct Index { 2734 private myNodeController: MyNodeController = new MyNodeController(); 2735 2736 build() { 2737 Row() { 2738 NodeContainer(this.myNodeController) 2739 } 2740 } 2741} 2742``` 2743