自定义渲染节点 (RenderNode)

介绍

对于不具备自己的渲染环境的三方框架，尽管已实现前端解析、布局及事件处理等功能，但仍需依赖系统的基础渲染和动画能力。FrameNode上的通用属性与通用事件对这类框架而言是冗余的，会导致多次不必要的操作，涵盖布局、事件处理等逻辑。

自定义渲染节点 (RenderNode)是更加轻量的渲染节点，仅具备与渲染相关的功能它提供了设置基础渲染属性的能力，以及节点的动态添加、删除和自定义绘制的能力。

效果预览

首页	操作节点树	设置和获取渲染相关属性	自定义绘制

调整自定义绘制Canvas的变换矩阵	C++获取Canvas，并进行自定义绘制操作	设置标签	查询当前RenderNode是否解除引用

使用说明

在主界面，可以点击对应卡片，选择需要参考的示例。
进入示例界面，查看参考示例。
通过自动测试框架可进行测试及维护。

工程目录

entry/src/main/
├── cpp
│   ├── CMakeLists.txt
│   ├── native_bridge.cpp
│   └── types
│       └── libentry
│           └── Index.d.ts
└── ets
    ├── common
    │   ├── Card.ets
    │   ├── Route.ets
    │   └── resource.ets
    └── pages
        ├── CheckRenderNodeDisposed.ets
        ├── CustomDraw.ets
        ├── CustomDrawCanvas.ets
        ├── CustomDrawCanvasNative.ets
        ├── Index.ets
        ├── OperationNodeTree.ets
        ├── RenderingProperties.ets
        └── SetLabel.ets

具体实现

创建和删除节点。

RenderNode提供了节点创建和删除的能力。可以通过RenderNode的构造函数创建自定义的RenderNode节点。通过构造函数创建的节点对应一个实体的节点。同时，可以通过RenderNode中的dispose接口来实现与实体节点的绑定关系的解除。
操作节点树。

RenderNode提供了节点的增、删、查、改的能力，能够修改节点的子树结构；可以对所有RenderNode的节点的父子节点做出查询操作，并返回查询结果。
设置和获取渲染相关属性。

RenderNode中可以设置渲染相关的属性，包括：backgroundColor，clipToFrame，opacity，size，position，frame，pivot，scale，translation，rotation，transform，shadowColor，shadowOffset，shadowAlpha，shadowElevation，shadowRadius，borderStyle，borderWidth，borderColor，borderRadius，shapeMask，shapeClip，markNodeGroup等。具体属性支持范围参考RenderNode接口说明。
自定义绘制。

通过重写RenderNode中的draw方法，可以自定义RenderNode的绘制内容，通过invalidate接口可以主动触发节点的重新绘制。
调整自定义绘制Canvas的变换矩阵。

从API version 12开始，通过重写RenderNode中的draw方法，可以自定义RenderNode的绘制内容。

通过concatMatrix可以调整自定义绘制Canvas的变换矩阵。

依赖

不涉及

约束和限制

本示例支持标准系统上运行，支持设备：华为手机;
本示例支持API22版本SDK，版本号：6.0.2.54;
本示例已支持使DevEco Studio 5.1.1 Release (构建版本：5.1.1.840，构建 2025年10月20日)编译运行

下载

如需单独下载本工程，执行如下命令：

git init
git config core.sparsecheckout true
echo ArkUISample/NativeType/CustomRenderNode > .git/info/sparse-checkout
git remote add origin https://gitcode.com/harmonyos_samples/guide-snippets.git
git pull origin master