# RenderNode

> phone 12+ | 2in1 13+ | tablet 12+ | tv 19+ | wearable 18+

提供自绘制渲染节点RenderNode，支持开发者通过C API进行开发，完成自定义绘制需求。RenderNode还支持渲染节点树管理（添加、删除、查询子节点）、背景色与不透明度等视觉属性设置、变换（缩放、旋转、平移、变换矩阵）、阴影、边框、遮罩与裁剪、模糊效果等能力，适用于在Stage模型下进行自定义渲染与节点树管理的场景。
> 说明
>
> * 本模块首批接口从API version 11开始支持。后续版本的新增接口，采用上角标单独标记接口的起始版本。
>
> * 本模块接口仅可在Stage模型下使用。
>
> * 不建议对[BuilderNode](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-buildernode)中的RenderNode进行修改操作。BuilderNode中持有的[FrameNode](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-framenode)仅用于将该BuilderNode作为子节点挂载到其他FrameNode上，对该FrameNode或对应的RenderNode进行属性设置与子节点操作可能会产生未定义行为，包括但不限于显示异常、事件异常、稳定性问题等。
>
> * RenderNode对象不支持使用JSON序列化。

## 导入模块

> phone | 2in1 | tablet | tv | wearable

```ts
import { RenderNode } from '@kit.ArkUI';
```

## RenderNode

> phone 12+ | 2in1 13+ | tablet 12+ | tv 19+ | wearable 18+

### constructor

> phone 12+ | 2in1 13+ | tablet 12+ | tv 19+ | wearable 18+

constructor()

RenderNode的构造函数。

**元服务API：** 从API version 12开始，该接口支持在元服务中使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**示例：**

```ts
import { RenderNode, FrameNode, NodeController } from '@kit.ArkUI';

const renderNode = new RenderNode();
renderNode.frame = {
  x: 0,
  y: 0,
  width: 100,
  height: 100
};
renderNode.backgroundColor = 0xffff0000;

// 继承NodeController实现自定义UI控制器
class MyNodeController extends NodeController {
  private rootNode: FrameNode | null = null;

  makeNode(uiContext: UIContext): FrameNode | null {
    this.rootNode = new FrameNode(uiContext);

    const rootRenderNode = this.rootNode.getRenderNode();
    if (rootRenderNode !== null) {
      rootRenderNode.appendChild(renderNode);
    }

    return this.rootNode;
  }
}

@Entry
@Component
struct Index {
  private myNodeController: MyNodeController = new MyNodeController();

  build() {
    Row() {
      NodeContainer(this.myNodeController)
    }
  }
}
```

### appendChild

> phone 12+ | 2in1 13+ | tablet 12+ | tv 19+ | wearable 18+

appendChild(node: RenderNode): void

在RenderNode最后一个子节点后添加新的子节点。

**元服务API：** 从API version 12开始，该接口支持在元服务中使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**参数：**

|参数名|类型|必填|说明|
|:---|:--------------------------|:-|:---------------|
|node|[RenderNode](#rendernode-1)|是|需要添加的RenderNode。|

**错误码：**

以下错误码的详细介绍请参见[自定义节点错误码](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/errorcode-node)。

|错误码ID|错误信息|
|:-----|:----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|100025|The parameter is invalid. Details about the invalid parameter and the reason are included in the error message. For example: "The parameter 'node' is invalid: its corresponding FrameNode cannot be adopted." 适用版本：22+|

**示例：**

```ts
import { RenderNode, FrameNode, NodeController } from '@kit.ArkUI';

const renderNode = new RenderNode();
renderNode.frame = {
  x: 0,
  y: 0,
  width: 100,
  height: 100
};
renderNode.backgroundColor = 0xffff0000;
const child = new RenderNode();
child.frame = {
  x: 10,
  y: 10,
  width: 50,
  height: 50
};
child.backgroundColor = 0xff00ff00;
renderNode.appendChild(child);

// 继承NodeController实现自定义UI控制器
class MyNodeController extends NodeController {
  private rootNode: FrameNode | null = null;

  makeNode(uiContext: UIContext): FrameNode | null {
    this.rootNode = new FrameNode(uiContext);

    const rootRenderNode = this.rootNode.getRenderNode();
    if (rootRenderNode !== null) {
      // 在RenderNode最后一个子节点后添加新的子节点
      rootRenderNode.appendChild(renderNode);
    }

    return this.rootNode;
  }
}

@Entry
@Component
struct Index {
  private myNodeController: MyNodeController = new MyNodeController();

  build() {
    Row() {
      NodeContainer(this.myNodeController)
    }
  }
}
```

### insertChildAfter

> phone 12+ | 2in1 13+ | tablet 12+ | tv 19+ | wearable 18+

insertChildAfter(child: RenderNode, sibling: RenderNode | null): void

在RenderNode指定子节点之后添加新的子节点。

**元服务API：** 从API version 12开始，该接口支持在元服务中使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**参数：**

|参数名|类型|必填|说明|
|:------|:---------------------------------|:-|:-------------------------------------|
|child|[RenderNode](#rendernode-1)|是|需要添加的子节点。|
|sibling|[RenderNode](#rendernode-1) | null|是|新节点将插入到该节点之后。若该参数设置为空，则新节点将插入到首个子节点之前。|

**错误码：**

以下错误码的详细介绍请参见[自定义节点错误码](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/errorcode-node)。

|错误码ID|错误信息|
|:-----|:-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
|100025|The parameter is invalid. Details about the invalid parameter and the reason are included in the error message. For example: "The parameter 'child' is invalid: its corresponding FrameNode cannot be adopted." 适用版本：22+|

**示例：**

```ts
import { RenderNode, FrameNode, NodeController } from '@kit.ArkUI';

const renderNode = new RenderNode();
renderNode.frame = {
  x: 0,
  y: 0,
  width: 200,
  height: 350
};
renderNode.backgroundColor = 0xffff0000;
for (let i = 0; i < 5; i++) {
  const node = new RenderNode();
  node.frame = {
    x: 10,
    y: 10 + 60 * i,
    width: 50,
    height: 50
  };
  node.backgroundColor = 0xff00ff00;
  renderNode.appendChild(node);
}

const child = new RenderNode();
child.frame = {
  x: 70,
  y: 70,
  width: 50,
  height: 50
};
child.backgroundColor = 0xffffff00;
const sibling = renderNode.getChild(1);
// 将child节点插入至sibling节点之后
renderNode.insertChildAfter(child, sibling);

// 继承NodeController实现自定义UI控制器
class MyNodeController extends NodeController {
  private rootNode: FrameNode | null = null;

  makeNode(uiContext: UIContext): FrameNode | null {
    this.rootNode = new FrameNode(uiContext);

    const rootRenderNode = this.rootNode.getRenderNode();
    if (rootRenderNode !== null) {
      rootRenderNode.appendChild(renderNode);
    }

    return this.rootNode;
  }
}

@Entry
@Component
struct Index {
  private myNodeController: MyNodeController = new MyNodeController();

  build() {
    Row() {
      NodeContainer(this.myNodeController)
    }
  }
}
```

### removeChild

> phone 12+ | 2in1 13+ | tablet 12+ | tv 19+ | wearable 18+

removeChild(node: RenderNode): void

从RenderNode中删除指定的子节点。

**元服务API：** 从API version 12开始，该接口支持在元服务中使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**参数：**

|参数名|类型|必填|说明|
|:---|:--------------------------|:-|:--------|
|node|[RenderNode](#rendernode-1)|是|需要删除的子节点。|

**示例：**

```ts
import { RenderNode, FrameNode, NodeController } from '@kit.ArkUI';

const renderNode = new RenderNode();
renderNode.frame = {
  x: 0,
  y: 0,
  width: 200,
  height: 350
};
renderNode.backgroundColor = 0xffff0000;
for (let i = 0; i < 5; i++) {
  const node = new RenderNode();
  node.frame = {
    x: 10,
    y: 10 + 60 * i,
    width: 50,
    height: 50
  };
  node.backgroundColor = 0xff00ff00;
  renderNode.appendChild(node);
}

// 删除renderNode下序列号为1的子节点
const node = renderNode.getChild(1);
renderNode.removeChild(node);

// 继承NodeController实现自定义UI控制器
class MyNodeController extends NodeController {
  private rootNode: FrameNode | null = null;

  makeNode(uiContext: UIContext): FrameNode | null {
    this.rootNode = new FrameNode(uiContext);

    const rootRenderNode = this.rootNode.getRenderNode();
    if (rootRenderNode !== null) {
      rootRenderNode.appendChild(renderNode);
    }

    return this.rootNode;
  }
}

@Entry
@Component
struct Index {
  private myNodeController: MyNodeController = new MyNodeController();

  build() {
    Row() {
      NodeContainer(this.myNodeController)
    }
  }
}
```

### clearChildren

> phone 12+ | 2in1 13+ | tablet 12+ | tv 19+ | wearable 18+

clearChildren(): void

清除当前RenderNode的所有子节点。

**元服务API：** 从API version 12开始，该接口支持在元服务中使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**示例：**

```ts
import { RenderNode, FrameNode, NodeController } from '@kit.ArkUI';

const renderNode = new RenderNode();
renderNode.size = { width: 200, height: 300 };
for (let i = 0; i < 10; i++) {
  let childNode = new RenderNode();
  childNode.size = { width: i * 10, height: i * 10 };
  childNode.position = { x: i * 10, y: i * 10 };
  childNode.backgroundColor = 0xFF0000FF - 0X11 * i;
  renderNode.appendChild(childNode);
}

// 继承NodeController实现自定义UI控制器
class MyNodeController extends NodeController {
  private rootNode: FrameNode | null = null;

  makeNode(uiContext: UIContext): FrameNode | null {
    this.rootNode = new FrameNode(uiContext);

    const rootRenderNode = this.rootNode.getRenderNode();
    if (rootRenderNode !== null) {
      rootRenderNode.appendChild(renderNode);
    }

    return this.rootNode;
  }
}

@Entry
@Component
struct Index {
  private myNodeController: MyNodeController = new MyNodeController();

  build() {
    Column() {
      NodeContainer(this.myNodeController)
        .borderWidth(1)
        .width(200)
        .height(300)
      Button('clearChildren')
        .onClick(() => {
          renderNode.clearChildren(); // 清除renderNode的所有子节点
        })
    }.width('100%')
  }
}
```

### getChild

> phone 12+ | 2in1 13+ | tablet 12+ | tv 19+ | wearable 18+

getChild(index: number): RenderNode | null

获取当前RenderNode指定位置的子节点。

**元服务API：** 从API version 12开始，该接口支持在元服务中使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**参数：**

|参数名|类型|必填|说明|
|:----|:-----|:-|:------------------------------------------------------|
|index|number|是|需要查询的子节点的序列号，从0开始。取值范围：[0, 子节点数量-1]，超出范围时返回null。不支持负索引。|

**返回值：**

|类型|说明|
|:---------------------------------|:-------------------------------------|
|[RenderNode](#rendernode-1) | null|子节点。若该RenderNode不包含所查询的子节点，则返回空对象null。|

**示例：**

```ts
import { RenderNode, FrameNode, NodeController } from '@kit.ArkUI';

const renderNode = new RenderNode();
renderNode.size = { width: 200, height: 300 };
for (let i = 0; i < 10; i++) {
  let childNode = new RenderNode();
  childNode.size = { width: i * 10, height: i * 10 };
  childNode.position = { x: i * 10, y: i * 10 };
  childNode.backgroundColor = 0xFF0000FF - 0X11 * i;
  renderNode.appendChild(childNode);
}

// 继承NodeController实现自定义UI控制器
class MyNodeController extends NodeController {
  private rootNode: FrameNode | null = null;

  makeNode(uiContext: UIContext): FrameNode | null {
    this.rootNode = new FrameNode(uiContext);

    const rootRenderNode = this.rootNode.getRenderNode();
    if (rootRenderNode !== null) {
      rootRenderNode.appendChild(renderNode);
    }

    return this.rootNode;
  }
}

@Entry
@Component
struct Index {
  private myNodeController: MyNodeController = new MyNodeController();

  build() {
    Column() {
      NodeContainer(this.myNodeController)
        .borderWidth(1)
        .width(200)
        .height(300)
      Button('getChild')
        .onClick(() => {
          for (let i = 0; i < 11; i++) {
            let childNode: RenderNode | null = renderNode.getChild(i);
            if (childNode === null) {
              // renderNode不存在序列号为10的子节点，此时返回null
              console.error(`the ${i} of renderNode's childNode is null`);
            } else {
              // 正常获取子节点并打印节点属性
              console.info(`the ${i} of renderNode's childNode has a size of {${childNode.size.width},${childNode.size.height}}`);
            }
          }

        })
    }.width('100%')
  }
}
```

### getFirstChild

> phone 12+ | 2in1 13+ | tablet 12+ | tv 19+ | wearable 18+

getFirstChild(): RenderNode | null

获取当前RenderNode的第一个子节点。

**元服务API：** 从API version 12开始，该接口支持在元服务中使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**返回值：**

|类型|说明|
|:---------------------------------|:-----------------------------------|
|[RenderNode](#rendernode-1) | null|首个子节点。若该RenderNode不包含子节点，则返回空对象null。|

**示例：**

```ts
import { RenderNode, FrameNode, NodeController } from '@kit.ArkUI';

const renderNode = new RenderNode();
renderNode.frame = {
  x: 0,
  y: 0,
  width: 200,
  height: 350
};
renderNode.backgroundColor = 0xffff0000;
for (let i = 0; i < 5; i++) {
  const node = new RenderNode();
  node.frame = {
    x: 10,
    y: 10 + 60 * i,
    width: 50,
    height: 50
  };
  node.backgroundColor = 0xff00ff00;
  renderNode.appendChild(node);
}

// 继承NodeController实现自定义UI控制器
class MyNodeController extends NodeController {
  private rootNode: FrameNode | null = null;

  makeNode(uiContext: UIContext): FrameNode | null {
    this.rootNode = new FrameNode(uiContext);

    const rootRenderNode = this.rootNode.getRenderNode();
    if (rootRenderNode !== null) {
      rootRenderNode.appendChild(renderNode);
    }

    return this.rootNode;
  }
}

@Entry
@Component
struct Index {
  private myNodeController: MyNodeController = new MyNodeController();

  build() {
    Row() {
      NodeContainer(this.myNodeController)
        .width(200)
        .height(350)
      Button('getFirstChild')
        .onClick(() => {
          // 获取renderNode的首个子节点
          const firstChild = renderNode.getFirstChild();
          if (firstChild === null) {
            console.error(`the first child is null`);
          } else {
            console.info(`the position of first child is x: ${firstChild.position.x}, y: ${firstChild.position.y}`);
          }
        })
    }
  }
}
```

### getNextSibling

> phone 12+ | 2in1 13+ | tablet 12+ | tv 19+ | wearable 18+

getNextSibling(): RenderNode | null

获取当前RenderNode的下一个同级节点。

**元服务API：** 从API version 12开始，该接口支持在元服务中使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**返回值：**

|类型|说明|
|:---------------------------------|:------------------------------------------------------|
|[RenderNode](#rendernode-1) | null|当前RenderNode的下一个同级节点。若该RenderNode不包含下一个同级节点，则返回空对象null。|

**示例：**

```ts
import { RenderNode, FrameNode, NodeController } from '@kit.ArkUI';

const renderNode = new RenderNode();
renderNode.frame = {
  x: 0,
  y: 0,
  width: 200,
  height: 350
};
renderNode.backgroundColor = 0xffff0000;
for (let i = 0; i < 5; i++) {
  const node = new RenderNode();
  node.frame = {
    x: 10,
    y: 10 + 60 * i,
    width: 50,
    height: 50
  };
  node.backgroundColor = 0xff00ff00;
  renderNode.appendChild(node);
}

// 继承NodeController实现自定义UI控制器
class MyNodeController extends NodeController {
  private rootNode: FrameNode | null = null;

  makeNode(uiContext: UIContext): FrameNode | null {
    this.rootNode = new FrameNode(uiContext);

    const rootRenderNode = this.rootNode.getRenderNode();
    if (rootRenderNode !== null) {
      rootRenderNode.appendChild(renderNode);
    }

    return this.rootNode;
  }
}

@Entry
@Component
struct Index {
  private myNodeController: MyNodeController = new MyNodeController();

  build() {
    Row() {
      NodeContainer(this.myNodeController)
        .width(200)
        .height(350)
      Button('getNextSibling')
        .onClick(() => {
          const child = renderNode.getChild(1);
          if (child === null) {
            console.error(`the child is null`);
          } else {
            // 获取renderNode序列号为1的子节点后，再获取它的下一个同级节点
            const nextSibling = child.getNextSibling();
            if (nextSibling === null) {
              console.error(`the nextSibling is null`);
            } else {
              console.info(`the position of child is x: ${child.position.x}, y: ${child.position.y}, the position of nextSibling is x: ${nextSibling.position.x}, y: ${nextSibling.position.y}`);
            }
          }
        })
    }
  }
}
```

### getPreviousSibling

> phone 12+ | 2in1 13+ | tablet 12+ | tv 19+ | wearable 18+

getPreviousSibling(): RenderNode | null

获取当前RenderNode的上一个同级节点。

**元服务API：** 从API version 12开始，该接口支持在元服务中使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**返回值：**

|类型|说明|
|:---------------------------------|:------------------------------------------------------|
|[RenderNode](#rendernode-1) | null|当前RenderNode的上一个同级节点。若该RenderNode不包含上一个同级节点，则返回空对象null。|

**示例：**

```ts
import { RenderNode, FrameNode, NodeController } from '@kit.ArkUI';

const renderNode = new RenderNode();
renderNode.frame = {
  x: 0,
  y: 0,
  width: 200,
  height: 350
};
renderNode.backgroundColor = 0xffff0000;
for (let i = 0; i < 5; i++) {
  const node = new RenderNode();
  node.frame = {
    x: 10,
    y: 10 + 60 * i,
    width: 50,
    height: 50
  };
  node.backgroundColor = 0xff00ff00;
  renderNode.appendChild(node);
}

// 继承NodeController实现自定义UI控制器
class MyNodeController extends NodeController {
  private rootNode: FrameNode | null = null;

  makeNode(uiContext: UIContext): FrameNode | null {
    this.rootNode = new FrameNode(uiContext);

    const rootRenderNode = this.rootNode.getRenderNode();
    if (rootRenderNode !== null) {
      rootRenderNode.appendChild(renderNode);
    }

    return this.rootNode;
  }
}

@Entry
@Component
struct Index {
  private myNodeController: MyNodeController = new MyNodeController();

  build() {
    Row() {
      NodeContainer(this.myNodeController)
        .width(200)
        .height(350)
      Button('getPreviousSibling')
        .onClick(() => {
          const child = renderNode.getChild(1);
          if (child === null) {
            console.error(`the child is null`);
          } else {
            // 获取renderNode序列号为1的子节点后，再获取它的上一个同级节点
            const previousSibling = child.getPreviousSibling();
            if (previousSibling === null) {
              console.error(`the previousSibling is null`);
            } else {
              console.info(`the position of child is x: ${child.position.x}, y: ${child.position.y}, the position of previousSibling is x: ${previousSibling.position.x}, y: ${previousSibling.position.y}`);
            }
          }
        })
    }
  }
}
```

### backgroundColor

> phone 12+ | 2in1 13+ | tablet 12+ | tv 19+ | wearable 18+

set backgroundColor(color: number)

设置当前RenderNode的背景颜色。

**元服务API：** 从API version 12开始，该接口支持在元服务中使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**参数：**

|参数名|类型|必填|说明|
|:----|:-----|:-|:--------------------------|
|color|number|是|背景颜色值，ARGB格式，示例：0xFFE5E5E5。|

get backgroundColor(): number

获取当前RenderNode的背景颜色。

**元服务API：** 从API version 12开始，该接口支持在元服务中使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**返回值：**

|类型|说明|
|:-----|:--------------------------------|
|number|当前RenderNode的背景颜色，默认值为0X00000000。|

**示例：**

```ts
import { RenderNode, FrameNode, NodeController } from '@kit.ArkUI';

const renderNode = new RenderNode();
renderNode.frame = { x: 0, y: 0, width: 100, height: 100 };
// 设置renderNode的背景颜色
renderNode.backgroundColor = 0XFF00FF00;
// 获取renderNode的背景颜色
const backgroundColor = renderNode.backgroundColor;

// 继承NodeController实现自定义UI控制器
class MyNodeController extends NodeController {
  private rootNode: FrameNode | null = null;

  makeNode(uiContext: UIContext): FrameNode | null {
    this.rootNode = new FrameNode(uiContext);

    const rootRenderNode = this.rootNode.getRenderNode();
    if (rootRenderNode !== null) {
      rootRenderNode.appendChild(renderNode);
    }

    return this.rootNode;
  }
}

@Entry
@Component
struct Index {
  private myNodeController: MyNodeController = new MyNodeController();
  build() {
    Row() {
      NodeContainer(this.myNodeController)
    }
  }
}
```

### clipToFrame

> phone 12+ | 2in1 13+ | tablet 12+ | tv 19+ | wearable 18+

set clipToFrame(useClip: boolean)

设置是否对当前RenderNode剪裁。若设置为true，则超出该RenderNode大小的部分将会被截断。

**元服务API：** 从API version 12开始，该接口支持在元服务中使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**参数：**

|参数名|类型|必填|说明|
|:------|:------|:-|:-------------------------------------------------------|
|useClip|boolean|是|设置是否进行剪裁。 true表示对当前RenderNode剪裁，false表示不对当前RenderNode剪裁。|

get clipToFrame(): boolean

获取当前RenderNode是否需要进行剪裁。

**元服务API：** 从API version 12开始，该接口支持在元服务中使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**返回值：**

|类型|说明|
|:------|:----------------------------------------------------------------------------|
|boolean|当前RenderNode是否需要进行剪裁，默认值为true。 true表示对当前RenderNode剪裁，false表示不对当前RenderNode剪裁。|

**示例：**

```ts
import { RenderNode, FrameNode, NodeController } from '@kit.ArkUI';

const renderNode = new RenderNode();
renderNode.frame = { x: 0, y: 0, width: 100, height: 100 };
renderNode.backgroundColor = 0xffff0000;
// 设置renderNode是否需要剪裁
renderNode.clipToFrame = true;
// 获取renderNode是否需要剪裁
const clipToFrame = renderNode.clipToFrame;

const childNode = new RenderNode();
childNode.frame = { x: 10, y: 10, width: 150, height: 50 };
childNode.backgroundColor = 0xffffff00;
renderNode.appendChild(childNode);

// 继承NodeController实现自定义UI控制器
class MyNodeController extends NodeController {
  private rootNode: FrameNode | null = null;

  makeNode(uiContext: UIContext): FrameNode | null {
    this.rootNode = new FrameNode(uiContext);

    const rootRenderNode = this.rootNode.getRenderNode();
    if (rootRenderNode !== null) {
      rootRenderNode.appendChild(renderNode);
    }

    return this.rootNode;
  }
}

@Entry
@Component
struct Index {
  private myNodeController: MyNodeController = new MyNodeController();

  build() {
    Row() {
      NodeContainer(this.myNodeController)
    }
  }
}
```

### opacity

> phone 12+ | 2in1 13+ | tablet 12+ | tv 19+ | wearable 18+

set opacity(value: number)

设置当前RenderNode的不透明度。若输入的数值小于0，会被视为0。若输入的数值大于1，会被视为1。

**元服务API：** 从API version 12开始，该接口支持在元服务中使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**参数：**

|参数名|类型|必填|说明|
|:----|:-----|:-|:------------------------------|
|value|number|是|将要设置的不透明度，取值范围：[0, 1]，值越大透明度越低。|

get opacity(): number

获取当前RenderNode的不透明度。

**元服务API：** 从API version 12开始，该接口支持在元服务中使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**返回值：**

|类型|说明|
|:-----|:----------------------------------------|
|number|当前RenderNode的不透明度，默认值为1，不透明。 取值范围：[0, 1]。|

**示例：**

```ts
import { RenderNode, FrameNode, NodeController } from '@kit.ArkUI';

const renderNode = new RenderNode();
renderNode.frame = { x: 0, y: 0, width: 100, height: 100 };
renderNode.backgroundColor = 0xffff0000;
// 设置renderNode的不透明度
renderNode.opacity = 0.5;
// 获取renderNode的不透明度
const opacity = renderNode.opacity;

// 继承NodeController实现自定义UI控制器
class MyNodeController extends NodeController {
  private rootNode: FrameNode | null = null;

  makeNode(uiContext: UIContext): FrameNode | null {
    this.rootNode = new FrameNode(uiContext);

    const rootRenderNode = this.rootNode.getRenderNode();
    if (rootRenderNode !== null) {
      rootRenderNode.appendChild(renderNode);
    }

    return this.rootNode;
  }
}

@Entry
@Component
struct Index {
  private myNodeController: MyNodeController = new MyNodeController();

  build() {
    Row() {
      NodeContainer(this.myNodeController)
    }
  }
}
```

### size

> phone 12+ | 2in1 13+ | tablet 12+ | tv 19+ | wearable 18+

set size(size: Size)

设置当前RenderNode的大小。当和[frame](#frame)同时使用时，以后设置的为准。

**元服务API：** 从API version 12开始，该接口支持在元服务中使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**参数：**

|参数名|类型|必填|说明|
|:---|:----------------------------------------------------------------------------------------------------|:-|:------------------|
|size|[Size](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-graphics#size)|是|将要设置的RenderNode的大小。|

get size(): Size

获取当前RenderNode的大小。

**元服务API：** 从API version 12开始，该接口支持在元服务中使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**返回值：**

|类型|说明|
|:----------------------------------------------------------------------------------------------------|:-------------------------------------------|
|[Size](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-graphics#size)|当前RenderNode的大小，默认值为{ width: 0, height: 0 }。|

**示例：**

```ts
import { RenderNode, FrameNode, NodeController } from '@kit.ArkUI';

const renderNode = new RenderNode();
renderNode.backgroundColor = 0xffff0000;
// 设置renderNode的大小
renderNode.size = { width: 100, height: 100 };
// 获取renderNode的大小
const size = renderNode.size;

// 继承NodeController实现自定义UI控制器
class MyNodeController extends NodeController {
  private rootNode: FrameNode | null = null;

  makeNode(uiContext: UIContext): FrameNode | null {
    this.rootNode = new FrameNode(uiContext);

    const rootRenderNode = this.rootNode.getRenderNode();
    if (rootRenderNode !== null) {
      rootRenderNode.appendChild(renderNode);
    }

    return this.rootNode;
  }
}

@Entry
@Component
struct Index {
  private myNodeController: MyNodeController = new MyNodeController();

  build() {
    Row() {
      NodeContainer(this.myNodeController)
    }
  }
}
```

### position

> phone 12+ | 2in1 13+ | tablet 12+ | tv 19+ | wearable 18+

set position(position: Position)

设置当前RenderNode的位置。当和[frame](#frame)同时使用时，以后设置的为准。

**元服务API：** 从API version 12开始，该接口支持在元服务中使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**参数：**

|参数名|类型|必填|说明|
|:-------|:------------------------------------------------------------------------------------------------------------|:-|:------------------|
|position|[Position](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-graphics#position)|是|将要设置的RenderNode的位置。|

get position(): Position

获取当前RenderNode的位置。

**元服务API：** 从API version 12开始，该接口支持在元服务中使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**返回值：**

|类型|说明|
|:------------------------------------------------------------------------------------------------------------|:-------------------------------------|
|[Position](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-graphics#position)|获取当前RenderNode的位置，默认位置为{ x: 0, y: 0 }。|

**示例：**

```ts
import { RenderNode, FrameNode, NodeController } from '@kit.ArkUI';

const renderNode = new RenderNode();
renderNode.backgroundColor = 0xffff0000;
renderNode.size = { width: 100, height: 100 };
// 设置renderNode的位置
renderNode.position = { x: 10, y: 10 };
// 获取renderNode的位置
const position = renderNode.position;

// 继承NodeController实现自定义UI控制器
class MyNodeController extends NodeController {
  private rootNode: FrameNode | null = null;

  makeNode(uiContext: UIContext): FrameNode | null {
    this.rootNode = new FrameNode(uiContext);

    const rootRenderNode = this.rootNode.getRenderNode();
    if (rootRenderNode !== null) {
      rootRenderNode.appendChild(renderNode);
    }

    return this.rootNode;
  }
}

@Entry
@Component
struct Index {
  private myNodeController: MyNodeController = new MyNodeController();

  build() {
    Row() {
      NodeContainer(this.myNodeController)
    }
  }
}
```

### frame

> phone 12+ | 2in1 13+ | tablet 12+ | tv 19+ | wearable 18+

set frame(frame: Frame)

设置当前RenderNode的大小和位置。当和[position](#position)、[size](#size)同时使用时，以后设置的为准。

**元服务API：** 从API version 12开始，该接口支持在元服务中使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**参数：**

|参数名|类型|必填|说明|
|:----|:------------------------------------------------------------------------------------------------------|:-|:---------------------|
|frame|[Frame](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-graphics#frame)|是|将要设置的RenderNode的大小和位置。|

get frame(): Frame

获取当前RenderNode的大小和位置。

**元服务API：** 从API version 12开始，该接口支持在元服务中使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**返回值：**

|类型|说明|
|:------------------------------------------------------------------------------------------------------|:------------------------------------------------------------|
|[Frame](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-graphics#frame)|获取当前RenderNode的大小和位置，默认值为{ x: 0, y: 0, width: 0, height: 0 }。|

**示例：**

```ts
import { RenderNode, FrameNode, NodeController } from '@kit.ArkUI';

const renderNode = new RenderNode();
renderNode.backgroundColor = 0xffff0000;
// 设置renderNode的大小和位置
renderNode.frame = { x: 10, y: 10, width: 100, height: 100 };
// 获取renderNode的大小和位置
const frame = renderNode.frame;

// 继承NodeController实现自定义UI控制器
class MyNodeController extends NodeController {
  private rootNode: FrameNode | null = null;

  makeNode(uiContext: UIContext): FrameNode | null {
    this.rootNode = new FrameNode(uiContext);

    const rootRenderNode = this.rootNode.getRenderNode();
    if (rootRenderNode !== null) {
      rootRenderNode.appendChild(renderNode);
    }

    return this.rootNode;
  }
}

@Entry
@Component
struct Index {
  private myNodeController: MyNodeController = new MyNodeController();

  build() {
    Row() {
      NodeContainer(this.myNodeController)
    }
  }
}
```

### pivot

> phone 12+ | 2in1 13+ | tablet 12+ | tv 19+ | wearable 18+

set pivot(pivot: Pivot)

设置当前RenderNode的轴心，影响RenderNode的缩放和旋转效果。

**元服务API：** 从API version 12开始，该接口支持在元服务中使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**参数：**

|参数名|类型|必填|说明|
|:----|:------------------------------------------------------------------------------------------------------|:-|:------------------|
|pivot|[Pivot](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-graphics#pivot)|是|将要设置的RenderNode的轴心。|

get pivot(): Pivot

获取当前RenderNode的轴心。

**元服务API：** 从API version 12开始，该接口支持在元服务中使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**返回值：**

|类型|说明|
|:------------------------------------------------------------------------------------------------------|:---------------------------------------|
|[Pivot](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-graphics#pivot)|获取当前RenderNode的轴心，默认值为{ x: 0.5, y: 0.5}。|

**示例：**

```ts
import { RenderNode, FrameNode, NodeController } from '@kit.ArkUI';

const renderNode = new RenderNode();
renderNode.backgroundColor = 0xffff0000;
renderNode.frame = { x: 10, y: 10, width: 100, height: 100 };
// 设置renderNode的轴心
renderNode.pivot = { x: 0.5, y: 0.6 };
// 获取renderNode的轴心
const pivot = renderNode.pivot;

renderNode.rotation = { x: 15, y: 0, z: 0 };

// 继承NodeController实现自定义UI控制器
class MyNodeController extends NodeController {
  private rootNode: FrameNode | null = null;

  makeNode(uiContext: UIContext): FrameNode | null {
    this.rootNode = new FrameNode(uiContext);

    const rootRenderNode = this.rootNode.getRenderNode();
    if (rootRenderNode !== null) {
      rootRenderNode.appendChild(renderNode);
    }

    return this.rootNode;
  }
}

@Entry
@Component
struct Index {
  private myNodeController: MyNodeController = new MyNodeController();

  build() {
    Row() {
      NodeContainer(this.myNodeController)
    }
  }
}
```

### scale

> phone 12+ | 2in1 13+ | tablet 12+ | tv 19+ | wearable 18+

set scale(scale: Scale)

设置当前RenderNode的缩放比例。缩放效果以[pivot](#pivot)设置的轴心为中心进行缩放。

**元服务API：** 从API version 12开始，该接口支持在元服务中使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**参数：**

|参数名|类型|必填|说明|
|:----|:------------------------------------------------------------------------------------------------------|:-|:--------------------|
|scale|[Scale](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-graphics#scale)|是|将要设置的RenderNode的缩放比例。|

get scale(): Scale

获取当前RenderNode的缩放比例。

**元服务API：** 从API version 12开始，该接口支持在元服务中使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**返回值：**

|类型|说明|
|:------------------------------------------------------------------------------------------------------|:--------------------------------------|
|[Scale](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-graphics#scale)|获取当前RenderNode的缩放比例，默认值为{ x: 1, y: 1 }。|

**示例：**

```ts
import { RenderNode, FrameNode, NodeController } from '@kit.ArkUI';

const renderNode = new RenderNode();
renderNode.backgroundColor = 0xffff0000;
renderNode.frame = { x: 10, y: 10, width: 100, height: 100 };
// 设置renderNode的比例
renderNode.scale = { x: 0.5, y: 1 };
// 获取renderNode的比例
const scale = renderNode.scale;

// 继承NodeController实现自定义UI控制器
class MyNodeController extends NodeController {
  private rootNode: FrameNode | null = null;

  makeNode(uiContext: UIContext): FrameNode | null {
    this.rootNode = new FrameNode(uiContext);

    const rootRenderNode = this.rootNode.getRenderNode();
    if (rootRenderNode !== null) {
      rootRenderNode.appendChild(renderNode);
    }

    return this.rootNode;
  }
}

@Entry
@Component
struct Index {
  private myNodeController: MyNodeController = new MyNodeController();

  build() {
    Row() {
      NodeContainer(this.myNodeController)
    }
  }
}
```

### translation

> phone 12+ | 2in1 13+ | tablet 12+ | tv 19+ | wearable 18+

set translation(translation: Translation)

设置当前RenderNode的平移量。

**元服务API：** 从API version 12开始，该接口支持在元服务中使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**参数：**

|参数名|类型|必填|说明|
|:----------|:------------------------------------------------------------------------------------------------------------------|:-|:-------------------|
|translation|[Translation](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-graphics#translation)|是|将要设置的RenderNode的平移量。|

get translation(): Translation

获取当前RenderNode的平移量。

**元服务API：** 从API version 12开始，该接口支持在元服务中使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**返回值：**

|类型|说明|
|:------------------------------------------------------------------------------------------------------------------|:-------------------------------------|
|[Translation](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-graphics#translation)|获取当前RenderNode的平移量，默认值为{ x: 0, y: 0 }。|

**示例：**

```ts
import { RenderNode, FrameNode, NodeController } from '@kit.ArkUI';

const renderNode = new RenderNode();
renderNode.backgroundColor = 0xffff0000;
renderNode.frame = { x: 10, y: 10, width: 100, height: 100 };
// 设置renderNode的平移量
renderNode.translation = { x: 100, y: 0 };
// 获取renderNode的平移量
const translation = renderNode.translation;

// 继承NodeController实现自定义UI控制器
class MyNodeController extends NodeController {
  private rootNode: FrameNode | null = null;

  makeNode(uiContext: UIContext): FrameNode | null {
    this.rootNode = new FrameNode(uiContext);

    const rootRenderNode = this.rootNode.getRenderNode();
    if (rootRenderNode !== null) {
      rootRenderNode.appendChild(renderNode);
    }

    return this.rootNode;
  }
}

@Entry
@Component
struct Index {
  private myNodeController: MyNodeController = new MyNodeController();

  build() {
    Row() {
      NodeContainer(this.myNodeController)
    }
  }
}
```

### rotation

> phone 12+ | 2in1 13+ | tablet 12+ | tv 19+ | wearable 18+

set rotation(rotation: Rotation)

设置当前RenderNode的旋转角度。旋转效果以[pivot](#pivot)设置的轴心为中心进行旋转。

**元服务API：** 从API version 12开始，该接口支持在元服务中使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**参数：**

|参数名|类型|必填|说明|
|:-------|:------------------------------------------------------------------------------------------------------------|:-|:--------------------|
|rotation|[Rotation](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-graphics#rotation)|是|将要设置的RenderNode的旋转角度。|

get rotation(): Rotation

获取当前RenderNode的旋转角度。

**元服务API：** 从API version 12开始，该接口支持在元服务中使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**返回值：**

|类型|说明|
|:------------------------------------------------------------------------------------------------------------|:-----------------------------------------|
|[Rotation](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-graphics#rotation)|当前RenderNode的旋转角度。默认值为{ x: 0, y: 0, z: 0}。|

**示例：**

```ts
import { RenderNode, FrameNode, NodeController } from '@kit.ArkUI';

const renderNode = new RenderNode();
renderNode.backgroundColor = 0xffff0000;
renderNode.frame = { x: 10, y: 10, width: 100, height: 100 };
// 设置renderNode的旋转角度
renderNode.rotation = { x: 45, y: 0, z: 0 };
// 获取renderNode的旋转角度
const rotation = renderNode.rotation;

// 继承NodeController实现自定义UI控制器
class MyNodeController extends NodeController {
  private rootNode: FrameNode | null = null;

  makeNode(uiContext: UIContext): FrameNode | null {
    this.rootNode = new FrameNode(uiContext);

    const rootRenderNode = this.rootNode.getRenderNode();
    if (rootRenderNode !== null) {
      rootRenderNode.appendChild(renderNode);
    }

    return this.rootNode;
  }
}

@Entry
@Component
struct Index {
  private myNodeController: MyNodeController = new MyNodeController();

  build() {
    Row() {
      NodeContainer(this.myNodeController)
    }
  }
}
```

### transform

> phone 12+ | 2in1 13+ | tablet 12+ | tv 19+ | wearable 18+

set transform(transform: Matrix4)

设置当前RenderNode的变换矩阵。

**元服务API：** 从API version 12开始，该接口支持在元服务中使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**参数：**

|参数名|类型|必填|说明|
|:--------|:----------------------------------------------------------------------------------------------------------|:-|:--------------------|
|transform|[Matrix4](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-graphics#matrix4)|是|将要设置的RenderNode的变换矩阵。|

get transform(): Matrix4

获取当前RenderNode的变换矩阵。默认值为：

```ts
[
  1, 0, 0, 0,
  0, 1, 0, 0,
  0, 0, 1, 0,
  0, 0, 0, 1
]
```

**元服务API：** 从API version 12开始，该接口支持在元服务中使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**返回值：**

|类型|说明|
|:----------------------------------------------------------------------------------------------------------|:--------------------------|
|[Matrix4](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-graphics#matrix4)|当前RenderNode的变换矩阵，默认值为单位矩阵。|

**示例：**

```ts
import { RenderNode, FrameNode, NodeController } from '@kit.ArkUI';

const renderNode = new RenderNode();
renderNode.backgroundColor = 0xffff0000;
renderNode.frame = { x: 10, y: 10, width: 100, height: 100 };
// 设置renderNode的变换矩阵
renderNode.transform = [
  1, 0, 0, 0,
  0, 2, 0, 0,
  0, 0, 1, 0,
  0, 0, 0, 1
];
// 获取renderNode的变换矩阵
const transform = renderNode.transform;

// 继承NodeController实现自定义UI控制器
class MyNodeController extends NodeController {
  private rootNode: FrameNode | null = null;

  makeNode(uiContext: UIContext): FrameNode | null {
    this.rootNode = new FrameNode(uiContext);

    const rootRenderNode = this.rootNode.getRenderNode();
    if (rootRenderNode !== null) {
      rootRenderNode.appendChild(renderNode);
    }

    return this.rootNode;
  }
}

@Entry
@Component
struct Index {
  private myNodeController: MyNodeController = new MyNodeController();

  build() {
    Row() {
      NodeContainer(this.myNodeController)
    }
  }
}
```

### shadowColor

> phone 12+ | 2in1 13+ | tablet 12+ | tv 19+ | wearable 18+

set shadowColor(color: number)

设置当前RenderNode的阴影颜色，ARGB格式。若设置了[shadowAlpha](#shadowalpha)，则不透明度以shadowAlpha为准。

**元服务API：** 从API version 12开始，该接口支持在元服务中使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**参数：**

|参数名|类型|必填|说明|
|:----|:-----|:-|:------------------------------------------|
|color|number|是|将要设置的RenderNode的阴影颜色，ARGB格式。 示例：0xFF00FF00。|

get shadowColor(): number

获取当前RenderNode的阴影颜色。

**元服务API：** 从API version 12开始，该接口支持在元服务中使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**返回值：**

|类型|说明|
|:-----|:---------------------------------------|
|number|当前RenderNode的阴影颜色，ARGB格式，默认值为0X00000000。|

**示例：**

```ts
import { RenderNode, FrameNode, NodeController } from '@kit.ArkUI';

const renderNode = new RenderNode();
renderNode.backgroundColor = 0xffff0000;
renderNode.frame = { x: 10, y: 10, width: 100, height: 100 };
renderNode.shadowElevation = 10;
// 设置renderNode的阴影颜色
renderNode.shadowColor = 0XFF00FF00;
// 获取renderNode的阴影颜色
const shadowColor = renderNode.shadowColor;

// 继承NodeController实现自定义UI控制器
class MyNodeController extends NodeController {
  private rootNode: FrameNode | null = null;

  makeNode(uiContext: UIContext): FrameNode | null {
    this.rootNode = new FrameNode(uiContext);

    const rootRenderNode = this.rootNode.getRenderNode();
    if (rootRenderNode !== null) {
      rootRenderNode.appendChild(renderNode);
    }

    return this.rootNode;
  }
}

@Entry
@Component
struct Index {
  private myNodeController: MyNodeController = new MyNodeController();

  build() {
    Row() {
      NodeContainer(this.myNodeController)
    }
  }
}
```

### shadowOffset

> phone 12+ | 2in1 13+ | tablet 12+ | tv 19+ | wearable 18+

set shadowOffset(offset: Offset)

设置当前RenderNode的阴影偏移。

**元服务API：** 从API version 12开始，该接口支持在元服务中使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**参数：**

|参数名|类型|必填|说明|
|:-----|:--------------------------------------------------------------------------------------------------------|:-|:--------------------|
|offset|[Offset](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-graphics#offset)|是|将要设置的RenderNode的阴影偏移。|

get shadowOffset(): Offset

获取当前RenderNode的阴影偏移。

**元服务API：** 从API version 12开始，该接口支持在元服务中使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**返回值：**

|类型|说明|
|:--------------------------------------------------------------------------------------------------------|:------------------------------------|
|[Offset](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-graphics#offset)|当前RenderNode的阴影偏移，默认值为{ x: 0, y: 0 }。|

**示例：**

```ts
import { RenderNode, FrameNode, NodeController } from '@kit.ArkUI';

const renderNode = new RenderNode();
renderNode.backgroundColor = 0xffff0000;
renderNode.frame = { x: 10, y: 10, width: 100, height: 100 };
renderNode.shadowElevation = 10;
renderNode.shadowColor = 0XFF00FF00;
// 设置renderNode的阴影偏移
renderNode.shadowOffset = { x: 10, y: 10 };
// 获取renderNode的阴影偏移
const shadowOffset = renderNode.shadowOffset;

// 继承NodeController实现自定义UI控制器
class MyNodeController extends NodeController {
  private rootNode: FrameNode | null = null;

  makeNode(uiContext: UIContext): FrameNode | null {
    this.rootNode = new FrameNode(uiContext);

    const rootRenderNode = this.rootNode.getRenderNode();
    if (rootRenderNode !== null) {
      rootRenderNode.appendChild(renderNode);
    }

    return this.rootNode;
  }
}

@Entry
@Component
struct Index {
  private myNodeController: MyNodeController = new MyNodeController();

  build() {
    Row() {
      NodeContainer(this.myNodeController)
    }
  }
}
```

### label^12+^

> phone 12+ | 2in1 13+ | tablet 12+ | tv 19+ | wearable 18+

set label(label: string)

设置当前RenderNode的标签。若当前节点是通过new创建的RenderNode，则设置的标签信息会显示在节点Inspector信息的属性中。

**元服务API：** 从API version 12开始，该接口支持在元服务中使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**参数：**

|参数名|类型|必填|说明|
|:----|:-----|:-|:------------------|
|label|string|是|将要设置的RenderNode的标签。|

get label(): string

获取当前RenderNode的标签。

**元服务API：** 从API version 12开始，该接口支持在元服务中使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**返回值：**

|类型|说明|
|:-----|:----------------------|
|string|当前RenderNode的标签，默认值为""。|

**示例：**

```ts
import { RenderNode, FrameNode, NodeController, UIContext } from '@kit.ArkUI';

// 继承NodeController实现自定义UI控制器
class MyNodeController extends NodeController {
  private rootNode: FrameNode | null = null;

  makeNode(uiContext: UIContext): FrameNode | null {
    this.rootNode = new FrameNode(uiContext);
    const renderNode: RenderNode | null = this.rootNode.getRenderNode();
    if (renderNode !== null) {
      const renderChildNode: RenderNode = new RenderNode();
      renderChildNode.frame = { x: 0, y: 0, width: 100, height: 100 };
      renderChildNode.backgroundColor = 0xffff0000;
      // 设置renderNode的标签
      renderChildNode.label = 'customRenderChildNode';
      // 获取renderNode的标签并打印日志
      console.info('label:', renderChildNode.label);
      renderNode.appendChild(renderChildNode);
    }

    return this.rootNode;
  }
}

@Entry
@Component
struct Index {
  private myNodeController: MyNodeController = new MyNodeController();

  build() {
    Column() {
      NodeContainer(this.myNodeController)
        .width(300)
        .height(700)
        .backgroundColor(Color.Gray)
    }
  }
}
```

### shadowAlpha

> phone 12+ | 2in1 13+ | tablet 12+ | tv 19+ | wearable 18+

set shadowAlpha(alpha: number)

设置当前RenderNode的阴影颜色的Alpha值。若设置了该属性，则阴影颜色的不透明度以该属性为准，覆盖[shadowColor](#shadowcolor)中的Alpha值。

**元服务API：** 从API version 12开始，该接口支持在元服务中使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**参数：**

|参数名|类型|必填|说明|
|:----|:-----|:-|:----------------------------------------------------------|
|alpha|number|是|将要设置的RenderNode的阴影颜色的Alpha值。 取值范围：[0, 1]。超出范围的值会被钳位到[0, 1]。|

get shadowAlpha(): number

获取当前RenderNode的阴影颜色的Alpha值。

**元服务API：** 从API version 12开始，该接口支持在元服务中使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**返回值：**

|类型|说明|
|:-----|:-------------------------------------------|
|number|当前RenderNode的阴影颜色的Alpha值，默认值为0。 取值范围：[0, 1]。|

**示例：**

```ts
import { RenderNode, FrameNode, NodeController } from '@kit.ArkUI';

const renderNode = new RenderNode();
renderNode.backgroundColor = 0xffff0000;
renderNode.frame = { x: 10, y: 10, width: 100, height: 100 };
renderNode.shadowElevation = 10;
renderNode.shadowColor = 0XFF00FF00;
renderNode.shadowOffset = { x: 10, y: 10 };
// 设置renderNode的阴影颜色Alpha值
renderNode.shadowAlpha = 0.1;
// 获取renderNode的阴影颜色Alpha值
const shadowAlpha = renderNode.shadowAlpha;

// 继承NodeController实现自定义UI控制器
class MyNodeController extends NodeController {
  private rootNode: FrameNode | null = null;

  makeNode(uiContext: UIContext): FrameNode | null {
    this.rootNode = new FrameNode(uiContext);

    const rootRenderNode = this.rootNode.getRenderNode();
    if (rootRenderNode !== null) {
      rootRenderNode.appendChild(renderNode);
    }

    return this.rootNode;
  }
}

@Entry
@Component
struct Index {
  private myNodeController: MyNodeController = new MyNodeController();

  build() {
    Row() {
      NodeContainer(this.myNodeController)
    }
  }
}
```

### shadowElevation

> phone 12+ | 2in1 13+ | tablet 12+ | tv 19+ | wearable 18+

set shadowElevation(elevation: number)

设置当前RenderNode的阴影的光照高度。光照高度用于模拟光源相对于节点的高度，值越大阴影越扩散。

**元服务API：** 从API version 12开始，该接口支持在元服务中使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**参数：**

|参数名|类型|必填|说明|
|:--------|:-----|:-|:--------------------------------------------------------|
|elevation|number|是|将要设置的RenderNode的阴影的光照高度，单位为vp。 取值范围：[0, +∞)。传入负数时不产生光照阴影。|

get shadowElevation(): number

获取当前RenderNode的阴影的光照高度。

**元服务API：** 从API version 12开始，该接口支持在元服务中使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**返回值：**

|类型|说明|
|:-----|:----------------------------------------|
|number|当前RenderNode的阴影的光照高度，默认值为0。 取值范围：[0, +∞)。|

**示例：**

```ts
import { RenderNode, FrameNode, NodeController } from '@kit.ArkUI';

const renderNode = new RenderNode();
renderNode.backgroundColor = 0xffff0000;
renderNode.frame = { x: 0, y: 0, width: 100, height: 100 };
renderNode.shadowOffset = { x: 10, y: 10 };
renderNode.shadowAlpha = 0.7;
// 设置renderNode的阴影光照高度
renderNode.shadowElevation = 30;
// 获取renderNode的阴影光照高度
const shadowElevation = renderNode.shadowElevation;

// 继承NodeController实现自定义UI控制器
class MyNodeController extends NodeController {
  private rootNode: FrameNode | null = null;

  makeNode(uiContext: UIContext): FrameNode | null {
    this.rootNode = new FrameNode(uiContext);

    const rootRenderNode = this.rootNode.getRenderNode();
    if (rootRenderNode !== null) {
      rootRenderNode.appendChild(renderNode);
    }

    return this.rootNode;
  }
}

@Entry
@Component
struct Index {
  private myNodeController: MyNodeController = new MyNodeController();

  build() {
    Row() {
      NodeContainer(this.myNodeController)
    }
  }
}
```

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/12/v3/LMR42OqxTqinRhCQxwizLA/zh-cn_image_0000002809011673.jpg?HW-CC-KV=V1&HW-CC-Date=20261102T125517Z&HW-CC-Expire=31536000000&HW-CC-Sign=606C53494B61E35AEB4B726CB9A376E7B4954D108C083DBB5B3782B902B34A1E)

### shadowRadius

> phone 12+ | 2in1 13+ | tablet 12+ | tv 19+ | wearable 18+

set shadowRadius(radius: number)

设置当前RenderNode的阴影模糊半径。

**元服务API：** 从API version 12开始，该接口支持在元服务中使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**参数：**

|参数名|类型|必填|说明|
|:-----|:-----|:-|:-----------------------------------------------------|
|radius|number|是|将要设置的RenderNode的阴影模糊半径，单位为vp。 取值范围：[0, +∞)。传入负数时不绘制阴影。|

get shadowRadius(): number

获取当前RenderNode的阴影模糊半径。

**元服务API：** 从API version 12开始，该接口支持在元服务中使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**返回值：**

|类型|说明|
|:-----|:---------------------------------------|
|number|当前RenderNode的阴影模糊半径，默认值为0。 取值范围：[0, +∞)。|

**示例：**

```ts
import { RenderNode, FrameNode, NodeController } from '@kit.ArkUI';

const renderNode = new RenderNode();
renderNode.backgroundColor = 0xff0000ff;
renderNode.frame = {
  x: 100,
  y: 100,
  width: 100,
  height: 100
};
renderNode.shadowOffset = { x: 10, y: 10 };
renderNode.shadowAlpha = 0.7;
// 设置renderNode的阴影模糊半径
renderNode.shadowRadius = 30;
// 获取renderNode的阴影模糊半径
const shadowRadius = renderNode.shadowRadius;
console.info(`RenderNode shadowRadius: ${shadowRadius}`);

// 继承NodeController实现自定义UI控制器
class MyNodeController extends NodeController {
  private rootNode: FrameNode | null = null;

  makeNode(uiContext: UIContext): FrameNode | null {
    this.rootNode = new FrameNode(uiContext);

    const rootRenderNode = this.rootNode.getRenderNode();
    if (rootRenderNode !== null) {
      rootRenderNode.appendChild(renderNode);
    }

    return this.rootNode;
  }
}

@Entry
@Component
struct Index {
  private myNodeController: MyNodeController = new MyNodeController();

  build() {
    Row() {
      NodeContainer(this.myNodeController)
    }
  }
}
```

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/12/v3/xa4lEv-NSyuk4fYpOXbEyg/zh-cn_image_0000002809051587.jpg?HW-CC-KV=V1&HW-CC-Date=20261102T125517Z&HW-CC-Expire=31536000000&HW-CC-Sign=7F09CBE37204AB92FDBB1634C3F94B02A56F1400EB6AEC6DEBF82D836A91C94F)

### draw

> phone 12+ | 2in1 13+ | tablet 12+ | tv 19+ | wearable 18+

draw(context: DrawContext): void

绘制方法，需要开发者进行实现。该方法会在RenderNode进行绘制时被调用。

该接口的[DrawContext](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-graphics#drawcontext)中的Canvas是用于记录指令的临时Canvas，并非节点的真实Canvas。使用请参见[调整自定义绘制Canvas的变换矩阵](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/arkts-user-defined-arktsnode-rendernode#调整自定义绘制canvas的变换矩阵)。
> 说明
>
> RenderNode初始化时，会调用两次draw方法。第一次调用是在首次创建FrameNode时触发Render流程，第二次调用是在首次设置modifier时触发绘制。后续绘制流程皆由modifier触发。

**元服务API：** 从API version 12开始，该接口支持在元服务中使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**参数：**

|参数名|类型|必填|说明|
|:------|:------------------------------------------------------------------------------------------------------------------|:-|:-------|
|context|[DrawContext](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-graphics#drawcontext)|是|图形绘制上下文。|

**示例：**

ArkTS侧代码：

```ts
// Index.ets
import bridge from 'libentry.so'; // 该 .so 文件由开发者通过 NAPI 编写并生成
import { RenderNode, FrameNode, NodeController, DrawContext } from '@kit.ArkUI';

// 继承RenderNode，实现自定义绘制方法
class MyRenderNode extends RenderNode {
  uiContext: UIContext;

  constructor(uiContext: UIContext) {
    super();
    this.uiContext = uiContext;
  }

  // 绘制RenderNode时调用此函数
  draw(context: DrawContext) {
    // 需要将 context 中的宽度和高度从vp转换为px
    bridge.nativeOnDraw(0, context, this.uiContext.vp2px(context.size.width), this.uiContext.vp2px(context.size.height));
  }
}

// 继承NodeController实现自定义UI控制器
class MyNodeController extends NodeController {
  private rootNode: FrameNode | null = null;

  makeNode(uiContext: UIContext): FrameNode | null {
    this.rootNode = new FrameNode(uiContext);

    const rootRenderNode = this.rootNode.getRenderNode();
    if (rootRenderNode !== null) {
      const renderNode = new MyRenderNode(uiContext);
      renderNode.size = { width: 100, height: 100 };
      rootRenderNode.appendChild(renderNode);
    }

    return this.rootNode;
  }
}

@Entry
@Component
struct Index {
  private myNodeController: MyNodeController = new MyNodeController();
  build() {
    Row() {
      NodeContainer(this.myNodeController)
    }
  }
}
```

C++侧可通过NAPI来获取Canvas，并进行后续的自定义绘制操作。

    // native_bridge.cpp
    #include "napi/native_api.h"
    #include <native_drawing/drawing_canvas.h>
    #include <native_drawing/drawing_color.h>
    #include <native_drawing/drawing_path.h>
    #include <native_drawing/drawing_pen.h>

    static napi_value OnDraw(napi_env env, napi_callback_info info)
    {
        size_t argc = 4;
        napi_value args[4] = { nullptr };
        napi_get_cb_info(env, info, &argc, args, nullptr, nullptr);

        int32_t id;
        napi_get_value_int32(env, args[0], &id);
        
        // 获取 Canvas 指针
        void* temp = nullptr;
        napi_unwrap(env, args[1], &temp);
        OH_Drawing_Canvas *canvas = reinterpret_cast<OH_Drawing_Canvas*>(temp);
        
        // 获取 Canvas 宽度
        int32_t width;
        napi_get_value_int32(env, args[2], &width);
        
        // 获取 Canvas 高度
        int32_t height;
        napi_get_value_int32(env, args[3], &height);
        
        // 传入canvas、height、width等信息至绘制函数中进行自定义绘制
        auto path = OH_Drawing_PathCreate();
        OH_Drawing_PathMoveTo(path, width / 4, height / 4);
        OH_Drawing_PathLineTo(path, width * 3 / 4, height / 4);
        OH_Drawing_PathLineTo(path, width * 3 / 4, height * 3 / 4);
        OH_Drawing_PathLineTo(path, width / 4, height * 3 / 4);
        OH_Drawing_PathLineTo(path, width / 4, height / 4);
        OH_Drawing_PathClose(path);
        
        auto pen = OH_Drawing_PenCreate();
        OH_Drawing_PenSetWidth(pen, 10);
        OH_Drawing_PenSetColor(pen, OH_Drawing_ColorSetArgb(0xFF, 0xFF, 0x00, 0x00));
        OH_Drawing_CanvasAttachPen(canvas, pen);
        
        OH_Drawing_CanvasDrawPath(canvas, path);
        OH_Drawing_CanvasDetachPen(canvas);
        OH_Drawing_PenDestroy(pen);
        OH_Drawing_PathDestroy(path);

        return nullptr;
    }

    EXTERN_C_START
    static napi_value Init(napi_env env, napi_value exports)
    {
        napi_property_descriptor desc[] = {
            { "nativeOnDraw", nullptr, OnDraw, nullptr, nullptr, nullptr, napi_default, nullptr }
        };
        napi_define_properties(env, exports, sizeof(desc) / sizeof(desc[0]), desc);
        return exports;
    }
    EXTERN_C_END

    static napi_module demoModule = {
        .nm_version = 1,
        .nm_flags = 0,
        .nm_filename = nullptr,
        .nm_register_func = Init,
        .nm_modname = "entry",
        .nm_priv = ((void*)0),
        .reserved = { 0 },
    };

    extern "C" __attribute__((constructor)) void RegisterEntryModule(void)
    {
        napi_module_register(&demoModule);
    }

修改工程中的src/main/cpp/CMakeLists.txt文件，添加如下内容：

```cmake
# the minimum version of CMake.
cmake_minimum_required(VERSION 3.4.1)
project(NapiTest)

set(NATIVERENDER_ROOT_PATH ${CMAKE_CURRENT_SOURCE_DIR})

include_directories(${NATIVERENDER_ROOT_PATH}
                    ${NATIVERENDER_ROOT_PATH}/include)

add_library(entry SHARED native_bridge.cpp)
target_link_libraries(entry PUBLIC libace_napi.z.so)
target_link_libraries(entry PUBLIC libace_ndk.z.so)
target_link_libraries(entry PUBLIC libnative_drawing.so)
```

同时在工程中的src/main/cpp/types/libentry/index.d.ts文件中，添加自定义绘制函数在ArkTS侧的定义，如：

```ts
import { DrawContext } from '@kit.ArkUI';

export const nativeOnDraw: (id: number, context: DrawContext, width: number, height: number) => number;
```

### invalidate

> phone 12+ | 2in1 13+ | tablet 12+ | tv 19+ | wearable 18+

invalidate(): void

该方法会触发RenderNode的重新渲染，重新渲染时会调用[draw](#draw)方法。若开发者继承了RenderNode并实现了draw方法，调用invalidate()后将重新执行draw方法中的绘制逻辑。

**元服务API：** 从API version 12开始，该接口支持在元服务中使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**示例：**

```ts
import bridge from 'libentry.so'; // 该 .so 文件由开发者通过 NAPI 编写并生成
import { RenderNode, FrameNode, NodeController, DrawContext } from '@kit.ArkUI';

// 继承RenderNode，实现自定义绘制方法
class MyRenderNode extends RenderNode {
  uiContext: UIContext;

  constructor(uiContext: UIContext) {
    super();
    this.uiContext = uiContext;
  }

  draw(context: DrawContext) {
    // 需要将 context 中的宽度和高度从vp转换为px
    bridge.nativeOnDraw(0, context, this.uiContext.vp2px(context.size.width), this.uiContext.vp2px(context.size.height));
  }
}

// 继承NodeController实现自定义UI控制器
class MyNodeController extends NodeController {
  private rootNode: FrameNode | null = null;
  newNode: MyRenderNode | null = null;

  makeNode(uiContext: UIContext): FrameNode | null {
    this.rootNode = new FrameNode(uiContext);
    const renderNode = this.rootNode.getRenderNode();
    if (renderNode === null) {
      return this.rootNode;
    }
    this.newNode = new MyRenderNode(uiContext);
    this.newNode.size = { width: 100, height: 100 };
    renderNode.appendChild(this.newNode);
    return this.rootNode;
  }
}

@Entry
@Component
struct Index {
  private myNodeController: MyNodeController = new MyNodeController();

  build() {
    Column() {
      Column() {
        NodeContainer(this.myNodeController)
          .width('100%')
        Button('Invalidate')
          .onClick(() => {
            // 触发RenderNode的重新渲染
            this.myNodeController.newNode?.invalidate();
          })
      }
      .width('100%')
      .height('100%')
    }
    .height('100%')
  }
}
```

libentry.so的构建方式见draw方法的示例。

### borderStyle^12+^

> phone 12+ | 2in1 13+ | tablet 12+ | tv 19+ | wearable 18+

set borderStyle(style: Edges<BorderStyle>)

设置当前RenderNode的边框样式。

**元服务API：** 从API version 12开始，该接口支持在元服务中使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**参数：**

|参数名|类型|必填|说明|
|:----|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:-|:---------------|
|style|[Edges](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-graphics#edgest12)<[BorderStyle](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-appendix-enums#borderstyle)>|是|RenderNode的边框样式。|

get borderStyle(): Edges<BorderStyle>

获取当前RenderNode的边框样式。

**元服务API：** 从API version 12开始，该接口支持在元服务中使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**返回值：**

|类型|说明|
|:-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|:------------------------------------------|
|[Edges](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-graphics#edgest12)<[BorderStyle](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/ts-appendix-enums#borderstyle)>|RenderNode的边框样式，默认所有边框样式为BorderStyle.Solid。|

**示例：**

```ts
import { RenderNode, FrameNode, NodeController } from '@kit.ArkUI';

const renderNode = new RenderNode();
renderNode.frame = { x: 0, y: 0, width: 150, height: 150 };
renderNode.backgroundColor = 0XFF00FF00;
renderNode.borderWidth = { left: 8, top: 8, right: 8, bottom: 8 };
// 设置renderNode的边框样式
renderNode.borderStyle = {
  left: BorderStyle.Solid,
  top: BorderStyle.Dotted,
  right: BorderStyle.Dashed,
  bottom: BorderStyle.Solid
};
// 获取renderNode的边框样式
const borderStyle = renderNode.borderStyle;


// 继承NodeController实现自定义UI控制器
class MyNodeController extends NodeController {
  private rootNode: FrameNode | null = null;

  makeNode(uiContext: UIContext): FrameNode | null {
    this.rootNode = new FrameNode(uiContext);

    const rootRenderNode = this.rootNode.getRenderNode();
    if (rootRenderNode !== null) {
      rootRenderNode.appendChild(renderNode);
    }

    return this.rootNode;
  }
}

@Entry
@Component
struct Index {
  private myNodeController: MyNodeController = new MyNodeController();

  build() {
    Row() {
      NodeContainer(this.myNodeController)
    }
  }
}
```

### borderWidth^12+^

> phone 12+ | 2in1 13+ | tablet 12+ | tv 19+ | wearable 18+

set borderWidth(width: Edges<number>)

设置当前RenderNode的边框宽度。

**元服务API：** 从API version 12开始，该接口支持在元服务中使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**参数：**

|参数名|类型|必填|说明|
|:----|:-----------------------------------------------------------------------------------------------------------------|:-|:------------------------------------------------|
|width|[Edges](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-graphics#edgest12)<number>|是|RenderNode的边框宽度，单位为vp。 取值范围：[0, +∞)。传入负数或0时不绘制边框。|

get borderWidth(): Edges<number>

获取当前RenderNode的边框宽度。

**元服务API：** 从API version 12开始，该接口支持在元服务中使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**返回值：**

|类型|说明|
|:-----------------------------------------------------------------------------------------------------------------|:----------------------------|
|[Edges](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-graphics#edgest12)<number>|RenderNode的边框宽度，默认所有边框宽度为0vp。|

**示例：**

```ts
import { RenderNode, FrameNode, NodeController } from '@kit.ArkUI';

const renderNode = new RenderNode();
renderNode.frame = { x: 0, y: 0, width: 150, height: 150 };
renderNode.backgroundColor = 0XFF00FF00;
// 设置renderNode的边框宽度
renderNode.borderWidth = { left: 8, top: 8, right: 8, bottom: 8 };
// 获取renderNode的边框宽度
const borderWidth = renderNode.borderWidth;


// 继承NodeController实现自定义UI控制器
class MyNodeController extends NodeController {
  private rootNode: FrameNode | null = null;

  makeNode(uiContext: UIContext): FrameNode | null {
    this.rootNode = new FrameNode(uiContext);

    const rootRenderNode = this.rootNode.getRenderNode();
    if (rootRenderNode !== null) {
      rootRenderNode.appendChild(renderNode);
    }

    return this.rootNode;
  }
}

@Entry
@Component
struct Index {
  private myNodeController: MyNodeController = new MyNodeController();

  build() {
    Row() {
      NodeContainer(this.myNodeController)
    }
  }
}
```

### borderColor^12+^

> phone 12+ | 2in1 13+ | tablet 12+ | tv 19+ | wearable 18+

set borderColor(color: Edges<number>)

设置当前RenderNode的边框颜色。

**元服务API：** 从API version 12开始，该接口支持在元服务中使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**参数：**

|参数名|类型|必填|说明|
|:----|:-----------------------------------------------------------------------------------------------------------------|:-|:------------------------------------|
|color|[Edges](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-graphics#edgest12)<number>|是|RenderNode的边框颜色，ARGB格式，示例：0XFF000000。|

get borderColor(): Edges<number>

获取当前RenderNode的边框颜色。

**元服务API：** 从API version 12开始，该接口支持在元服务中使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**返回值：**

|类型|说明|
|:-----------------------------------------------------------------------------------------------------------------|:-----------------------------------|
|[Edges](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-graphics#edgest12)<number>|RenderNode的边框颜色，默认所有边框颜色为0XFF000000。|

**示例：**

```ts
import { RenderNode, FrameNode, NodeController } from '@kit.ArkUI';

const renderNode = new RenderNode();
renderNode.frame = { x: 0, y: 0, width: 150, height: 150 };
renderNode.backgroundColor = 0XFF00FF00;
renderNode.borderWidth = { left: 8, top: 8, right: 8, bottom: 8 };
// 设置renderNode的边框颜色
renderNode.borderColor = { left: 0xFF0000FF, top: 0xFF0000FF, right: 0xFF0000FF, bottom: 0xFF0000FF };
// 获取renderNode的边框颜色
const borderColor = renderNode.borderColor;


// 继承NodeController实现自定义UI控制器
class MyNodeController extends NodeController {
  private rootNode: FrameNode | null = null;

  makeNode(uiContext: UIContext): FrameNode | null {
    this.rootNode = new FrameNode(uiContext);

    const rootRenderNode = this.rootNode.getRenderNode();
    if (rootRenderNode !== null) {
      rootRenderNode.appendChild(renderNode);
    }

    return this.rootNode;
  }
}

@Entry
@Component
struct Index {
  private myNodeController: MyNodeController = new MyNodeController();

  build() {
    Row() {
      NodeContainer(this.myNodeController)
    }
  }
}
```

### borderRadius^12+^

> phone 12+ | 2in1 13+ | tablet 12+ | tv 19+ | wearable 18+

set borderRadius(radius: BorderRadiuses)

设置当前RenderNode的边框圆角。

**元服务API：** 从API version 12开始，该接口支持在元服务中使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**参数：**

|参数名|类型|必填|说明|
|:-----|:--------------------------------------------------------------------------------------------------------------------------|:-|:---------------------|
|radius|[BorderRadiuses](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-graphics#borderradiuses12)|是|RenderNode的边框圆角，单位为vp。|

get borderRadius(): BorderRadiuses

获取当前RenderNode的边框圆角。

**元服务API：** 从API version 12开始，该接口支持在元服务中使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**返回值：**

|类型|说明|
|:--------------------------------------------------------------------------------------------------------------------------|:----------------------------|
|[BorderRadiuses](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-graphics#borderradiuses12)|RenderNode的边框圆角，默认所有边框圆角为0vp。|

**示例：**

```ts
import { RenderNode, FrameNode, NodeController } from '@kit.ArkUI';

const renderNode = new RenderNode();
renderNode.frame = { x: 0, y: 0, width: 150, height: 150 };
renderNode.backgroundColor = 0XFF00FF00;
// 设置renderNode的边框圆角
renderNode.borderRadius = { topLeft: 32, topRight: 32, bottomLeft: 32, bottomRight: 32 };
// 获取renderNode的边框圆角
const borderRadius = renderNode.borderRadius;


// 继承NodeController实现自定义UI控制器
class MyNodeController extends NodeController {
  private rootNode: FrameNode | null = null;

  makeNode(uiContext: UIContext): FrameNode | null {
    this.rootNode = new FrameNode(uiContext);

    const rootRenderNode = this.rootNode.getRenderNode();
    if (rootRenderNode !== null) {
      rootRenderNode.appendChild(renderNode);
    }

    return this.rootNode;
  }
}

@Entry
@Component
struct Index {
  private myNodeController: MyNodeController = new MyNodeController();

  build() {
    Row() {
      NodeContainer(this.myNodeController)
    }
  }
}
```

### shapeMask^12+^

> phone 12+ | 2in1 13+ | tablet 12+ | tv 19+ | wearable 18+

set shapeMask(shapeMask: ShapeMask)

设置当前RenderNode的遮罩。

**元服务API：** 从API version 12开始，该接口支持在元服务中使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**参数：**

|参数名|类型|必填|说明|
|:--------|:----------------------------------------------------------------------------------------------------------------|:-|:-------------|
|shapeMask|[ShapeMask](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-graphics#shapemask12)|是|RenderNode的遮罩。|

get shapeMask(): ShapeMask

获取当前RenderNode的遮罩。

**元服务API：** 从API version 12开始，该接口支持在元服务中使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**返回值：**

|类型|说明|
|:----------------------------------------------------------------------------------------------------------------|:---------------------|
|[ShapeMask](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-graphics#shapemask12)|RenderNode的遮罩，默认无遮罩效果。|

**示例：**

```ts
import { RenderNode, FrameNode, NodeController, ShapeMask } from '@kit.ArkUI';

// 创建遮罩并设置填充颜色、边框颜色、边框宽度
const mask = new ShapeMask();
mask.setRectShape({ left: 0, right: 150, top: 0, bottom: 150 });
mask.fillColor = 0X55FF0000;
mask.strokeColor = 0XFFFF0000;
mask.strokeWidth = 24;

const renderNode = new RenderNode();
renderNode.frame = { x: 0, y: 0, width: 150, height: 150 };
renderNode.backgroundColor = 0XFF00FF00;
// 设置renderNode的遮罩
renderNode.shapeMask = mask;
// 获取renderNode的遮罩
const shapeMask = renderNode.shapeMask;


// 继承NodeController实现自定义UI控制器
class MyNodeController extends NodeController {
  private rootNode: FrameNode | null = null;

  makeNode(uiContext: UIContext): FrameNode | null {
    this.rootNode = new FrameNode(uiContext);

    const rootRenderNode = this.rootNode.getRenderNode();
    if (rootRenderNode !== null) {
      rootRenderNode.appendChild(renderNode);
    }

    return this.rootNode;
  }
}

@Entry
@Component
struct Index {
  private myNodeController: MyNodeController = new MyNodeController();

  build() {
    Row() {
      NodeContainer(this.myNodeController)
    }
  }
}
```

### shapeClip^12+^

> phone 12+ | 2in1 13+ | tablet 12+ | tv 19+ | wearable 18+

set shapeClip(shapeClip: ShapeClip)

设置当前RenderNode的裁剪形状。

**元服务API：** 从API version 12开始，该接口支持在元服务中使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**参数：**

|参数名|类型|必填|说明|
|:--------|:----------------------------------------------------------------------------------------------------------------|:-|:---------------|
|shapeClip|[ShapeClip](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-graphics#shapeclip12)|是|RenderNode的裁剪形状。|

get shapeClip(): ShapeClip

获取当前RenderNode的裁剪形状。

**元服务API：** 从API version 12开始，该接口支持在元服务中使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**返回值：**

|类型|说明|
|:----------------------------------------------------------------------------------------------------------------|:-----------------------|
|[ShapeClip](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-graphics#shapeclip12)|RenderNode的裁剪形状，默认无裁剪效果。|

**示例：**

```ts
import { RenderNode, FrameNode, NodeController, ShapeClip } from '@kit.ArkUI';

// 创建图形裁剪形状并设置路径绘制指令
const clip = new ShapeClip();
clip.setCommandPath({ commands: 'M100 0 L0 100 L50 200 L150 200 L200 100 Z' });

const renderNode = new RenderNode();
renderNode.frame = {
  x: 0,
  y: 0,
  width: 150,
  height: 150
};
renderNode.backgroundColor = 0XFF00FF00;
// 设置renderNode的裁剪形状
renderNode.shapeClip = clip;
// 获取renderNode的裁剪形状
const shapeClip = renderNode.shapeClip;

// 继承NodeController实现自定义UI控制器
class MyNodeController extends NodeController {
  private rootNode: FrameNode | null = null;

  makeNode(uiContext: UIContext): FrameNode | null {
    this.rootNode = new FrameNode(uiContext);

    const rootRenderNode = this.rootNode.getRenderNode();
    if (rootRenderNode !== null) {
      rootRenderNode.appendChild(renderNode);
    }

    return this.rootNode;
  }
}

@Entry
@Component
struct Index {
  private myNodeController: MyNodeController = new MyNodeController();

  build() {
    Column() {
      NodeContainer(this.myNodeController)
        .borderWidth(1)
      Button('setRectShape')
        .onClick(() => {
          shapeClip.setRectShape({
            left: 0,
            right: 150,
            top: 0,
            bottom: 150
          });
          renderNode.shapeClip = shapeClip;
        })
      Button('setRoundRectShape')
        .onClick(() => {
          shapeClip.setRoundRectShape({
            rect: {
              left: 0,
              top: 0,
              right: this.getUIContext().vp2px(150),
              bottom: this.getUIContext().vp2px(150)
            },
            corners: {
              topLeft: { x: 32, y: 32 },
              topRight: { x: 32, y: 32 },
              bottomLeft: { x: 32, y: 32 },
              bottomRight: { x: 32, y: 32 }
            }
          });
          renderNode.shapeClip = shapeClip;
        })
      Button('setCircleShape')
        .onClick(() => {
          shapeClip.setCircleShape({ centerY: 75, centerX: 75, radius: 75 });
          renderNode.shapeClip = shapeClip;
        })
      Button('setOvalShape')
        .onClick(() => {
          shapeClip.setOvalShape({
            left: 0,
            right: this.getUIContext().vp2px(150),
            top: 0,
            bottom: this.getUIContext().vp2px(100)
          });
          renderNode.shapeClip = shapeClip;
        })
      Button('setCommandPath')
        .onClick(() => {
          shapeClip.setCommandPath({ commands: 'M100 0 L0 100 L50 200 L150 200 L200 100 Z' });
          renderNode.shapeClip = shapeClip;
        })
    }
  }
}
```

### dispose^12+^

> phone 12+ | 2in1 13+ | tablet 12+ | tv 19+ | wearable 18+

dispose(): void

立即释放当前RenderNode。调用此方法后，RenderNode将解除与后端实体节点的引用关系，再次调用该节点的接口可能会出现crash或返回默认值。可通过[isDisposed](#isdisposed20)接口查询节点是否已释放。

**元服务API：** 从API version 12开始，该接口支持在元服务中使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**示例：**

```ts
import { RenderNode, FrameNode, NodeController } from '@kit.ArkUI';

const renderNode = new RenderNode();
renderNode.frame = { x: 0, y: 100, width: 100, height: 100 };
renderNode.backgroundColor = 0xffff0000;

// 继承NodeController实现自定义UI控制器
class MyNodeController extends NodeController {
  private rootNode: FrameNode | null = null;

  makeNode(uiContext: UIContext): FrameNode | null {
    this.rootNode = new FrameNode(uiContext);

    const rootRenderNode = this.rootNode!.getRenderNode();
    if (rootRenderNode !== null) {
      rootRenderNode.size = { width: 200, height: 200 };
      rootRenderNode.backgroundColor = 0xff00ff00;
      rootRenderNode.appendChild(renderNode);
    }

    return this.rootNode;
  }

  disposeRenderNode() {
    const rootRenderNode = this.rootNode!.getRenderNode();
    // 释放当前renderNode前，从父节点rootRenderNode中移除该renderNode
    if (rootRenderNode !== null) {
      rootRenderNode.removeChild(renderNode);
    }
    renderNode.dispose();
  }
}

@Entry
@Component
struct Index {
  private myNodeController: MyNodeController = new MyNodeController();

  build() {
    Column({ space: 4 }) {
      NodeContainer(this.myNodeController)
      Button('RenderNode dispose')
        .onClick(() => {
          this.myNodeController.disposeRenderNode();
        })
        .width('100%')
    }
  }
}
```

### markNodeGroup^12+^

> phone 12+ | 2in1 13+ | tablet 12+ | tv 19+ | wearable 18+

set markNodeGroup(isNodeGroup: boolean)

标记是否优先绘制节点及其子节点。若设置为true，则透明度等属性将在节点绘制完毕后再进行合成，适用于多个半透明节点重叠且需要正确合成透明度效果的场景。设置效果如下：

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/bf/v3/5oghP6TdQcSjl4jrPwqp2A/zh-cn_image_0000002779852022.png?HW-CC-KV=V1&HW-CC-Date=20261102T125517Z&HW-CC-Expire=31536000000&HW-CC-Sign=BEC79D9E8AEBD82B02F45F3341998AB3214E32ACECFCCC9CDCAC51B28B1CE207)

**元服务API：** 从API version 12开始，该接口支持在元服务中使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**参数：**

|参数名|类型|必填|说明|
|:----------|:------|:-|:-------------------------------------------------------|
|isNodeGroup|boolean|是|设置是否优先绘制节点及其子节点。 true表示优先绘制节点及其子节点，false表示不是优先绘制节点及其子节点。|

get markNodeGroup(): boolean

获取当前节点是否标记了优先绘制。

**元服务API：** 从API version 12开始，该接口支持在元服务中使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**返回值：**

|类型|说明|
|:------|:---------------------------------------------------------------|
|boolean|当前节点是否标记了优先绘制。 true表示当前节点标记了优先绘制，false表示当前节点没有标记优先绘制。 默认值为false。|

**示例：**

```ts
import { RenderNode, FrameNode, NodeController, DrawContext } from '@kit.ArkUI';
import { drawing } from '@kit.ArkGraphics2D';

// 继承RenderNode，实现自定义绘制方法
class MyRenderNode extends RenderNode {
  draw(context: DrawContext) {
    const canvas = context.canvas;
    const brush = new drawing.Brush();
    brush.setColor({ alpha: 255, red: 255, green: 0, blue: 0 });
    canvas.attachBrush(brush);
    canvas.drawRect({ left: 0, right: 200, top: 0, bottom: 200 });
    canvas.detachBrush();

    brush.setColor({ alpha: 255, red: 0, green: 255, blue: 0 });
    canvas.attachBrush(brush);
    canvas.drawRect({ left: 100, right: 300, top: 100, bottom: 300 });
    canvas.detachBrush();
  }
}

const renderNode = new MyRenderNode();
renderNode.frame = { x: 100, y: 100, width: 200, height: 200 };
renderNode.backgroundColor = 0xff0000ff;
// 标记当前renderNode为优先绘制
renderNode.markNodeGroup = true;
renderNode.opacity = 0.5;

const isNodeGroup = renderNode.markNodeGroup;

// 继承NodeController实现自定义UI控制器
class MyNodeController extends NodeController {
  private rootNode: FrameNode | null = null;

  makeNode(uiContext: UIContext): FrameNode | null {
    this.rootNode = new FrameNode(uiContext);

    const rootRenderNode = this.rootNode.getRenderNode();
    if (rootRenderNode !== null) {
      rootRenderNode.appendChild(renderNode);
    }

    return this.rootNode;
  }
}

@Entry
@Component
struct Index {
  private myNodeController: MyNodeController = new MyNodeController();

  build() {
    Row() {
      NodeContainer(this.myNodeController)
    }
  }
}
```

### lengthMetricsUnit^12+^

> phone 12+ | 2in1 13+ | tablet 12+ | tv 19+ | wearable 18+

set lengthMetricsUnit(unit: LengthMetricsUnit)

设置RenderNode各个属性使用的单位。适用于需要精确像素控制（如使用PX单位）或跟随系统默认排版（如使用DEFAULT单位）的场景。

**元服务API：** 从API version 12开始，该接口支持在元服务中使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**参数：**

|参数名|类型|必填|说明|
|:---|:--------------------------------------------------------------------------------------------------------------------------------|:-|:---------------------|
|unit|[LengthMetricsUnit](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-graphics#lengthmetricsunit12)|是|设置RenderNode各个属性使用的单位。|

get lengthMetricsUnit(): LengthMetricsUnit

获取RenderNode各个属性使用的单位。

**元服务API：** 从API version 12开始，该接口支持在元服务中使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**返回值：**

|类型|说明|
|:--------------------------------------------------------------------------------------------------------------------------------|:---------------------------------------------------|
|[LengthMetricsUnit](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-graphics#lengthmetricsunit12)|获取RenderNode各个属性使用的单位，默认值为LengthMetricsUnit.DEFAULT。|

**示例：**

```ts
import { RenderNode, FrameNode, NodeController, DrawContext } from '@kit.ArkUI';
import { drawing } from '@kit.ArkGraphics2D';
import { LengthMetricsUnit } from '@kit.ArkUI';

// 继承RenderNode，设置RenderNode各个属性使用的单位
class BaseRenderNode extends RenderNode {
  constructor() {
    super();
    this.lengthMetricsUnit = LengthMetricsUnit.PX;
  }
}

// 继承BaseRenderNode，实现自定义绘制方法
class MyRenderNode extends BaseRenderNode {
  draw(context: DrawContext) {
    const canvas = context.canvas;
    const brush = new drawing.Brush();
    brush.setColor({ alpha: 255, red: 255, green: 0, blue: 0 });
    canvas.attachBrush(brush);
    canvas.drawRect({ left: 0, right: 200, top: 0, bottom: 200 });
    canvas.detachBrush();
  }
}

const renderNode = new MyRenderNode();
renderNode.frame = { x: 100, y: 100, width: 200, height: 200 };
renderNode.backgroundColor = 0xff0000ff;
renderNode.rotation = { x: 0, y: 0, z: 45 };

// 继承NodeController实现自定义UI控制器
class MyNodeController extends NodeController {
  private rootNode: FrameNode | null = null;

  makeNode(uiContext: UIContext): FrameNode | null {
    this.rootNode = new FrameNode(uiContext);
    const rootRenderNode = this.rootNode.getRenderNode();
    if (rootRenderNode !== null) {
      rootRenderNode.appendChild(renderNode);
    }
    return this.rootNode;
  }
}

@Entry
@Component
struct Index {
  private myNodeController: MyNodeController = new MyNodeController();

  build() {
    Row() {
      NodeContainer(this.myNodeController)
    }
  }
}
```

### isDisposed^20+^

> phone 20+ | 2in1 20+ | tablet 20+ | tv 20+ | wearable 20+

isDisposed(): boolean

查询当前RenderNode对象是否已解除与后端实体节点的引用关系。当节点调用dispose接口后，再次调用其他接口可能会出现crash、返回默认值的情况，建议开发者在操作节点前调用此接口检查其有效性，避免潜在风险。

**元服务API：** 从API version 20开始，该接口支持在元服务中使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**返回值：**

|类型|说明|
|:------|:-------------------------------------------------------|
|boolean|后端实体节点是否解除引用。true表示节点已与后端实体节点解除引用，false表示节点未与后端实体节点解除引用。|

**示例：**

```ts
import { RenderNode, FrameNode, NodeController } from '@kit.ArkUI';

const renderNode = new RenderNode();
renderNode.frame = { x: 100, y: 100, width: 100, height: 100 };
renderNode.backgroundColor = 0xff2787d9;

// 继承NodeController实现自定义UI控制器
class MyNodeController extends NodeController {
  private rootNode: FrameNode | null = null;

  makeNode(uiContext: UIContext): FrameNode | null {
    this.rootNode = new FrameNode(uiContext);

    const rootRenderNode = this.rootNode!.getRenderNode();
    if (rootRenderNode !== null) {
      rootRenderNode.size = { width: 300, height: 300 };
      rootRenderNode.backgroundColor = 0xffd5d5d5;
      rootRenderNode.appendChild(renderNode);
    }

    return this.rootNode;
  }

  disposeRenderNode() {
    const rootRenderNode = this.rootNode!.getRenderNode();
    if (rootRenderNode !== null) {
      rootRenderNode.removeChild(renderNode);
    }
    renderNode.dispose();
  }

  isDisposed() : string {
    if (renderNode !== null) {
      // 检查当前renderNode是否已经与后端节点解除引用
      if (renderNode.isDisposed()) {
        return 'renderNode isDisposed is true';
      } else {
        return 'renderNode isDisposed is false';
      }
    }
    return 'renderNode is null';
  }
}

@Entry
@Component
struct Index {
  @State text: string = ''
  private myNodeController: MyNodeController = new MyNodeController();

  build() {
    Column({ space: 4 }) {
      NodeContainer(this.myNodeController)
      Button('RenderNode dispose')
        .onClick(() => {
          this.myNodeController.disposeRenderNode();
          this.text = '';
        })
        .width(200)
        .height(50)
      Button('RenderNode isDisposed')
        .onClick(() => {
          this.text = this.myNodeController.isDisposed();
        })
        .width(200)
        .height(50)
      Text(this.text)
        .fontSize(25)
    }
    .width('100%')
    .height('100%')
  }
}
```

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/75/v3/bRQ1XkmXSEqIiI1hbZ4IXQ/zh-cn_image_0000002779692054.gif?HW-CC-KV=V1&HW-CC-Date=20261102T125517Z&HW-CC-Expire=31536000000&HW-CC-Sign=D7FF259DE38C96549291CC1D51BC60ED9FD8D350DDBB9905742B8651F4C7BFCD)

### backgroundBlur

> phone 26.0.0+ | 2in1 26.0.0+ | tablet 26.0.0+ | tv 26.0.0+ | wearable 26.0.0+

set backgroundBlur(blurValue: BackgroundBlur | undefined)

设置当前RenderNode的背景模糊效果，对节点背景区域进行模糊处理。

**起始版本：** 26.0.0

**元服务API：** 从API版本26.0.0开始，该接口支持在元服务中使用。

**模型约束：** 此接口仅可在Stage模型下使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**参数：**

|参数名|类型|必填|说明|
|:--------|:------------------------------------------------------------------------------------------------------------------------------------|:-|:-------------------------|
|blurValue|[BackgroundBlur](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-graphics#backgroundblur) | undefined|是|背景模糊效果。undefined表示无背景模糊效果。|

get backgroundBlur(): BackgroundBlur

获取背景模糊效果。

**起始版本：** 26.0.0

**元服务API：** 从API版本26.0.0开始，该接口支持在元服务中使用。

**模型约束：** 此接口仅可在Stage模型下使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**返回值：**

|类型|说明|
|:------------------------------------------------------------------------------------------------------------------------|:----------------------|
|[BackgroundBlur](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-graphics#backgroundblur)|背景模糊效果。默认值为{radius: 0}。|

**示例：**

```ts
import { RenderNode, FrameNode, NodeController, DrawContext } from '@kit.ArkUI';
import { drawing } from '@kit.ArkGraphics2D';

// 继承RenderNode，实现自定义绘制方法
class MyRenderNode extends RenderNode {
  uiContext: UIContext;

  constructor(uiContext: UIContext) {
    super();
    this.uiContext = uiContext;
    this.frame = {
      x: 0,
      y: 0,
      width: 150,
      height: 150
    };
  }

  // 绘制RenderNode时调用此函数
  draw(context: DrawContext) {
    const canvas = context.canvas;
    const brush = new drawing.Brush();
    brush.setColor({
      alpha: 255,
      red: 0,
      green: 74,
      blue: 175
    });
    canvas.attachBrush(brush);
    canvas.drawRect({
      left: 100,
      right: 300,
      top: 100,
      bottom: 300
    });
    canvas.detachBrush();
  }
}

class MyNodeController extends NodeController {
  private rootNode: FrameNode | null = null;

  makeNode(uiContext: UIContext): FrameNode | null {
    this.rootNode = new FrameNode(uiContext);
    this.rootNode.commonAttribute
      .width(200)
      .height(200)
      .backgroundImage($r('app.media.cubic')) // 需要替换为开发者所需的图像资源文件。
      .backgroundImageSize({ width: 200, height: 200 });
    let renderNode = this.rootNode.getRenderNode();
    if (renderNode !== null) {
      let myRenderNode = new MyRenderNode(uiContext);
      // 设置背景模糊效果。
      myRenderNode.backgroundBlur = {
        radius: 20,
        grayscale: [50, 50]
      };
      renderNode.appendChild(myRenderNode);
      const backgroundBlurConfig = myRenderNode.backgroundBlur;
      console.info(`background blur radius: ${backgroundBlurConfig.radius} grayscale: [${backgroundBlurConfig.grayscale}]`);
    }
    return this.rootNode;
  }
}

@Entry
@Component
struct Index {
  private myNodeController: MyNodeController = new MyNodeController();

  build() {
    Column({ space: 10 }) {
      NodeContainer(this.myNodeController)
    }
    .width('100%')
    .height('100%')
    .padding(20)
  }
}
```

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/27/v3/vGLXvbt0TYmJ75qKk53cSA/zh-cn_image_0000002809011675.png?HW-CC-KV=V1&HW-CC-Date=20261102T125517Z&HW-CC-Expire=31536000000&HW-CC-Sign=F685DE348750A6B6C093BE819E575C80BDB77C7640FFD5170C2EAD7C17602E63)

### contentBlur

> phone 26.0.0+ | 2in1 26.0.0+ | tablet 26.0.0+ | tv 26.0.0+ | wearable 26.0.0+

set contentBlur(blurValue: ContentBlur | undefined)

设置当前RenderNode的内容模糊效果，对节点绘制内容进行模糊处理。

**起始版本：** 26.0.0

**元服务API：** 从API版本26.0.0开始，该接口支持在元服务中使用。

**模型约束：** 此接口仅可在Stage模型下使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**参数：**

|参数名|类型|必填|说明|
|:--------|:------------------------------------------------------------------------------------------------------------------------------|:-|:-------------------------|
|blurValue|[ContentBlur](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-graphics#contentblur) | undefined|是|内容模糊效果。undefined表示无内容模糊效果。|

get contentBlur(): ContentBlur

获取内容模糊效果。

**起始版本：** 26.0.0

**元服务API：** 从API版本26.0.0开始，该接口支持在元服务中使用。

**模型约束：** 此接口仅可在Stage模型下使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**返回值：**

|类型|说明|
|:------------------------------------------------------------------------------------------------------------------|:----------------------|
|[ContentBlur](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-graphics#contentblur)|内容模糊效果。默认值为{radius: 0}。|

**示例：**

```ts
import { RenderNode, FrameNode, NodeController, DrawContext } from '@kit.ArkUI';
import { drawing } from '@kit.ArkGraphics2D';

// 继承RenderNode，实现自定义绘制方法
class MyRenderNode extends RenderNode {
  uiContext: UIContext;

  constructor(uiContext: UIContext) {
    super();
    this.uiContext = uiContext;
    this.frame = {
      x: 0,
      y: 0,
      width: 150,
      height: 150
    };
  }

  // 绘制RenderNode时调用此函数
  draw(context: DrawContext) {
    const canvas = context.canvas;
    const brush = new drawing.Brush();
    brush.setColor({
      alpha: 255,
      red: 0,
      green: 74,
      blue: 175
    });
    canvas.attachBrush(brush);
    canvas.drawRect({
      left: 100,
      right: 300,
      top: 100,
      bottom: 300
    });
    canvas.detachBrush();
  }
}

class MyNodeController extends NodeController {
  private rootNode: FrameNode | null = null;

  makeNode(uiContext: UIContext): FrameNode | null {
    this.rootNode = new FrameNode(uiContext);
    this.rootNode.commonAttribute
      .width(200)
      .height(200)
      .backgroundImage($r('app.media.cubic')) // 需要替换为开发者所需的图像资源文件。
      .backgroundImageSize({ width: 200, height: 200 });
    let renderNode = this.rootNode.getRenderNode();
    if (renderNode !== null) {
      let myRenderNode = new MyRenderNode(uiContext);
      // 设置内容模糊效果。
      myRenderNode.contentBlur = {
        radius: 20,
        grayscale: [50, 50]
      };
      renderNode.appendChild(myRenderNode);
      const contentBlurConfig = myRenderNode.contentBlur;
      console.info(`content blur radius: ${contentBlurConfig.radius} grayscale: [${contentBlurConfig.grayscale}]`);
    }
    return this.rootNode;
  }
}

@Entry
@Component
struct Index {
  private myNodeController: MyNodeController = new MyNodeController();

  build() {
    Column({ space: 10 }) {
      NodeContainer(this.myNodeController)
    }
    .width('100%')
    .height('100%')
    .padding(20)
  }
}
```

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/b4/v3/GG8qGI35QJKsbxnsTou4pQ/zh-cn_image_0000002809051589.png?HW-CC-KV=V1&HW-CC-Date=20261102T125517Z&HW-CC-Expire=31536000000&HW-CC-Sign=308A3DDACA364BE0F921BFF5F6A7E5021966EFF17FB343FC010E20EFB199B45E)

### foregroundBlur

> phone 26.0.0+ | 2in1 26.0.0+ | tablet 26.0.0+ | tv 26.0.0+ | wearable 26.0.0+

set foregroundBlur(blurValue: ForegroundBlur | undefined)

设置当前RenderNode的前景模糊效果，对节点前景区域进行模糊处理。

**起始版本：** 26.0.0

**元服务API：** 从API版本26.0.0开始，该接口支持在元服务中使用。

**模型约束：** 此接口仅可在Stage模型下使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**参数：**

|参数名|类型|必填|说明|
|:--------|:------------------------------------------------------------------------------------------------------------------------------------|:-|:-------------------------|
|blurValue|[ForegroundBlur](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-graphics#foregroundblur) | undefined|是|前景模糊效果。undefined表示无前景模糊效果。|

get foregroundBlur(): ForegroundBlur

获取前景模糊效果。

**起始版本：** 26.0.0

**元服务API：** 从API版本26.0.0开始，该接口支持在元服务中使用。

**模型约束：** 此接口仅可在Stage模型下使用。

**系统能力：** SystemCapability.ArkUI.ArkUI.Full

**返回值：**

|类型|说明|
|:------------------------------------------------------------------------------------------------------------------------|:----------------------|
|[ForegroundBlur](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/js-apis-arkui-graphics#foregroundblur)|前景模糊效果。默认值为{radius: 0}。|

**示例：**

```ts
import { RenderNode, FrameNode, NodeController, DrawContext } from '@kit.ArkUI';
import { drawing } from '@kit.ArkGraphics2D';

// 继承RenderNode，实现自定义绘制方法
class MyRenderNode extends RenderNode {
  uiContext: UIContext;

  constructor(uiContext: UIContext) {
    super();
    this.uiContext = uiContext;
    this.frame = {
      x: 0,
      y: 0,
      width: 150,
      height: 150
    };
  }

  // 绘制RenderNode时调用此函数
  draw(context: DrawContext) {
    const canvas = context.canvas;
    const brush = new drawing.Brush();
    brush.setColor({
      alpha: 255,
      red: 0,
      green: 74,
      blue: 175
    });
    canvas.attachBrush(brush);
    canvas.drawRect({
      left: 100,
      right: 300,
      top: 100,
      bottom: 300
    });
    canvas.detachBrush();
  }
}

class MyNodeController extends NodeController {
  private rootNode: FrameNode | null = null;

  makeNode(uiContext: UIContext): FrameNode | null {
    this.rootNode = new FrameNode(uiContext);
    this.rootNode.commonAttribute
      .width(200)
      .height(200)
      .backgroundImage($r('app.media.cubic')) // 需要替换为开发者所需的图像资源文件。
      .backgroundImageSize({ width: 200, height: 200 });
    let renderNode = this.rootNode.getRenderNode();
    if (renderNode !== null) {
      let myRenderNode = new MyRenderNode(uiContext);
      // 设置前景模糊效果。
      myRenderNode.foregroundBlur = {
        radius: 20
      };
      renderNode.appendChild(myRenderNode);
      const foregroundBlurConfig = myRenderNode.foregroundBlur;
      console.info(`foreground blur radius: ${foregroundBlurConfig.radius}`);
    }
    return this.rootNode;
  }
}

@Entry
@Component
struct Index {
  private myNodeController: MyNodeController = new MyNodeController();

  build() {
    Column({ space: 10 }) {
      NodeContainer(this.myNodeController)
    }
    .width('100%')
    .height('100%')
    .padding(20)
  }
}
```

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/b3/v3/ITaDMRg3S9C_KAjrI0TVvA/zh-cn_image_0000002779852024.png?HW-CC-KV=V1&HW-CC-Date=20261102T125517Z&HW-CC-Expire=31536000000&HW-CC-Sign=69A9D0AC41AAA7511DAAB8D4E409E2D61531A813DB50F02605BD13F9C4C5A528)