HarmonyOS开发：RenderNode渲染节点与自定义绘制

📌 核心要点：RenderNode是HarmonyOS图形渲染系统的核心抽象单元，通过节点树结构管理渲染层级，支持自定义绘制逻辑实现高性能图形渲染。

一、背景与动机

1.1 为什么需要RenderNode

在移动应用开发中，图形渲染性能直接影响用户体验。传统的视图系统在处理复杂图形、动画效果时存在以下痛点：

• 渲染效率低下：传统View层级过深时，测量、布局、绘制三阶段串行执行，造成性能瓶颈
• 自定义绘制复杂：Canvas API使用门槛高，状态管理混乱，难以实现复杂效果
• 动画性能差：频繁重绘触发整个视图树更新，CPU负载过高导致卡顿
• 跨平台一致性：不同平台渲染API差异大，难以保证视觉效果一致性

HarmonyOS引入RenderNode渲染节点机制，将渲染逻辑从视图系统中解耦，提供更底层的图形操作能力：

classDef nodeBase fill:#e1f5fe,stroke:#01579b,stroke-width:2px
classDef viewNode fill:#fff3e0,stroke:#e65100,stroke-width:2px
classDef renderNode fill:#e8f5e9,stroke:#1b5e20,stroke-width:2px
classDef canvasNode fill:#fce4ec,stroke:#880e4f,stroke-width:2px

flowchart TB
    subgraph 传统视图系统
        View[View视图]:::viewNode --> Measure[测量阶段]
        Measure --> Layout[布局阶段]
        Layout --> Draw[绘制阶段]
    end
    
    subgraph RenderNode系统
        RN[RenderNode]:::renderNode --> Props[属性设置]
        Props --> Ops[绘制操作]
        Ops --> Tree[节点树合成]
    end
    
    subgraph 渲染能力
        Canvas[Canvas]:::canvasNode --> Base[基础图形]
        Base --> Path[路径绘制]
        Path --> Effect[特效应用]
    end
    
    View -.->|性能瓶颈| RN
    RN --> Canvas

1.2 RenderNode的设计理念

RenderNode采用**保留模式渲染（Retained Mode）**设计思想：

二、核心原理

2.1 RenderNode架构体系

RenderNode是HarmonyOS图形渲染的基础单元，每个节点包含：

// RenderNode核心属性结构
interface RenderNodeProperties {
  // 变换属性
  translateX: number;      // X轴平移
  translateY: number;      // Y轴平移
  scaleX: number;          // X轴缩放
  scaleY: number;          // Y轴缩放
  rotation: number;        // 旋转角度
  
  // 渲染属性
  alpha: number;           // 透明度 [0, 1]
  clipToBounds: boolean;   // 是否裁剪到边界
  effectLayer: EffectLayer; // 特效层
  
  // 绘制内容
  recordingCanvas: RecordingCanvas; // 绘制命令记录器
}

节点树结构：

classDef rootNode fill:#bbdefb,stroke:#1565c0,stroke-width:3px
classDef branchNode fill:#c8e6c9,stroke:#2e7d32,stroke-width:2px
classDef leafNode fill:#ffccbc,stroke:#d84315,stroke-width:2px

flowchart TB
    Root[RootRenderNode<br/>根节点]:::rootNode
    
    Root --> Node1[RenderNode<br/>容器节点]:::branchNode
    Root --> Node2[RenderNode<br/>图片节点]:::branchNode
    Root --> Node3[RenderNode<br/>文字节点]:::branchNode
    
    Node1 --> Leaf1[RenderNode<br/>背景]:::leafNode
    Node1 --> Leaf2[RenderNode<br/>边框]:::leafNode
    Node1 --> Leaf3[RenderNode<br/>阴影]:::leafNode
    
    Node2 --> Leaf4[RenderNode<br/>图片内容]:::leafNode
    Node2 --> Leaf5[RenderNode<br/>圆角蒙版]:::leafNode

2.2 渲染流程详解

RenderNode的渲染流程分为三个阶段：

阶段一：记录阶段（Recording）

// 创建RecordingCanvas记录绘制命令
const canvas = new RecordingCanvas();
canvas.drawRect(0, 0, 100, 100, paint);
canvas.drawCircle(50, 50, 30, paint);
// 命令被记录而非立即执行

阶段二：合成阶段（Composition）

// 节点树遍历与合成
function compose(node: RenderNode): void {
  // 应用节点变换
  applyTransform(node);
  // 递归处理子节点
  for (const child of node.children) {
    compose(child);
  }
  // 合并绘制操作
  mergeDrawOps(node);
}

阶段三：光栅化阶段（Rasterization）

// GPU光栅化执行
function rasterize(ops: DrawOp[]): void {
  for (const op of ops) {
    gpu.execute(op); // 提交GPU执行
  }
}

2.3 RenderNode与Canvas的关系

classDef canvasClass fill:#e3f2fd,stroke:#1976d2,stroke-width:2px
classDef nodeClass fill:#f1f8e9,stroke:#388e3c,stroke-width:2px
classDef paintClass fill:#fff8e1,stroke:#f57f17,stroke-width:2px

classDiagram
    class RenderNode {
        +setTranslate(x, y)
        +setScale(x, y)
        +setRotation(degrees)
        +setAlpha(alpha)
        +beginRecording()
        +endRecording()
        +draw(canvas)
    }
    
    class RecordingCanvas {
        +drawRect()
        +drawCircle()
        +drawPath()
        +drawText()
        +clipPath()
        +save()
        +restore()
    }
    
    class Paint {
        +setColor()
        +setStyle()
        +setStrokeWidth()
        +setAntiAlias()
        +setShader()
    }
    
    RenderNode --> RecordingCanvas : 记录绘制
    RecordingCanvas --> Paint : 使用画笔

三、代码实战

3.1 基础RenderNode创建与使用

// 文件：RenderNodeBasicDemo.ets
import { RenderNode, RecordingCanvas, Paint, Color } from '@ohos.graphics';

@Entry
@Component
struct RenderNodeBasicDemo {
  private rootNode: RenderNode | null = null;
  
  aboutToAppear(): void {
    this.initRenderNode();
  }
  
  // 初始化RenderNode
  private initRenderNode(): void {
    // 创建根渲染节点
    this.rootNode = new RenderNode();
    
    // 设置节点属性
    this.rootNode.setTranslate(100, 100); // 设置位置
    this.rootNode.setAlpha(1.0);          // 设置透明度
    
    // 开始记录绘制内容
    const canvas = this.rootNode.beginRecording(200, 200);
    
    // 创建画笔对象
    const paint = new Paint();
    paint.setColor(Color.RED);
    paint.setAntiAlias(true);
    paint.setStyle(Paint.Style.FILL);
    
    // 绘制矩形背景
    canvas.drawRect(0, 0, 200, 200, paint);
    
    // 绘制圆形装饰
    paint.setColor(Color.WHITE);
    canvas.drawCircle(100, 100, 60, paint);
    
    // 结束记录
    this.rootNode.endRecording();
  }
  
  build() {
    Column() {
      // 使用自定义组件渲染RenderNode
      RenderNodeView({ node: this.rootNode })
        .width(300)
        .height(300)
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
}

// 自定义RenderNode渲染组件
@Component
struct RenderNodeView {
  @Prop node: RenderNode | null;
  
  build() {
    Canvas(this.node)
      .width('100%')
      .height('100%')
  }
}

3.2 RenderNode树形结构构建

// 文件：RenderNodeTreeDemo.ets
import { RenderNode, RecordingCanvas, Paint, Color, Path } from '@ohos.graphics';

// 卡片渲染节点管理器
class CardRenderNodeManager {
  private rootRenderNode: RenderNode;
  private backgroundNode: RenderNode;
  private contentNode: RenderNode;
  private shadowNode: RenderNode;
  
  constructor() {
    this.rootRenderNode = new RenderNode();
    this.backgroundNode = new RenderNode();
    this.contentNode = new RenderNode();
    this.shadowNode = new RenderNode();
    
    this.setupNodeTree();
  }
  
  // 设置节点树结构
  private setupNodeTree(): void {
    // 构建层级关系：阴影 -> 背景 -> 内容
    this.rootRenderNode.addChild(this.shadowNode);
    this.rootRenderNode.addChild(this.backgroundNode);
    this.rootRenderNode.addChild(this.contentNode);
    
    // 设置各节点属性
    this.setupShadowNode();
    this.setupBackgroundNode();
    this.setupContentNode();
  }
  
  // 设置阴影节点
  private setupShadowNode(): void {
    this.shadowNode.setTranslate(4, 4); // 偏移模拟阴影
    this.shadowNode.setAlpha(0.3);
    
    const canvas = this.shadowNode.beginRecording(300, 200);
    const paint = new Paint();
    paint.setColor(Color.BLACK);
    paint.setAntiAlias(true);
    
    // 绘制圆角矩形阴影
    const path = new Path();
    path.addRoundRect(0, 0, 300, 200, 16, 16);
    canvas.drawPath(path, paint);
    
    this.shadowNode.endRecording();
  }
  
  // 设置背景节点
  private setupBackgroundNode(): void {
    const canvas = this.backgroundNode.beginRecording(300, 200);
    const paint = new Paint();
    
    // 渐变背景
    const shader = Shader.createLinearGradient(
      0, 0, 0, 200,
      [Color.parse('#667eea'), Color.parse('#764ba2')],
      [0, 1]
    );
    paint.setShader(shader);
    paint.setAntiAlias(true);
    
    const path = new Path();
    path.addRoundRect(0, 0, 300, 200, 16, 16);
    canvas.drawPath(path, paint);
    
    this.backgroundNode.endRecording();
  }
  
  // 设置内容节点
  private setupContentNode(): void {
    this.contentNode.setTranslate(20, 20);
    
    const canvas = this.contentNode.beginRecording(260, 160);
    const paint = new Paint();
    paint.setColor(Color.WHITE);
    paint.setTextSize(24);
    paint.setAntiAlias(true);
    
    // 绘制标题文字
    canvas.drawText('RenderNode卡片示例', 0, 30, paint);
    
    // 绘制分隔线
    paint.setStrokeWidth(1);
    paint.setStyle(Paint.Style.STROKE);
    paint.setColor(Color.parse('rgba(255,255,255,0.3)'));
    canvas.drawLine(0, 45, 260, 45, paint);
    
    // 绘制内容文字
    paint.reset();
    paint.setColor(Color.WHITE);
    paint.setTextSize(14);
    canvas.drawText('使用RenderNode构建高性能UI组件', 0, 70, paint);
    
    this.contentNode.endRecording();
  }
  
  // 获取根节点
  getRootNode(): RenderNode {
    return this.rootRenderNode;
  }
  
  // 更新卡片位置（动画使用）
  updatePosition(x: number, y: number): void {
    this.rootRenderNode.setTranslate(x, y);
  }
  
  // 更新卡片透明度
  updateAlpha(alpha: number): void {
    this.rootRenderNode.setAlpha(alpha);
  }
}

@Entry
@Component
struct RenderNodeTreeDemo {
  private nodeManager: CardRenderNodeManager = new CardRenderNodeManager();
  
  build() {
    Column() {
      RenderNodeView({ node: this.nodeManager.getRootNode() })
        .width(350)
        .height(250)
      
      Row() {
        Button('移动动画')
          .onClick(() => this.playMoveAnimation())
        
        Button('淡入淡出')
          .onClick(() => this.playFadeAnimation())
      }
      .margin({ top: 20 })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
  
  // 播放移动动画
  private playMoveAnimation(): void {
    let progress = 0;
    const animate = () => {
      progress += 0.02;
      if (progress <= 1) {
        const x = 50 + Math.sin(progress * Math.PI * 2) * 100;
        const y = 50 + Math.cos(progress * Math.PI * 2) * 50;
        this.nodeManager.updatePosition(x, y);
        requestAnimationFrame(animate);
      }
    };
    animate();
  }
  
  // 播放淡入淡出动画
  private playFadeAnimation(): void {
    let alpha = 1;
    let fading = true;
    const animate = () => {
      if (fading) {
        alpha -= 0.02;
        if (alpha <= 0) {
          alpha = 0;
          fading = false;
        }
      } else {
        alpha += 0.02;
        if (alpha >= 1) {
          alpha = 1;
          return;
        }
      }
      this.nodeManager.updateAlpha(alpha);
      requestAnimationFrame(animate);
    };
    animate();
  }
}

3.3 自定义绘制实现复杂效果

// 文件：CustomDrawDemo.ets
import { RenderNode, RecordingCanvas, Paint, Color, Path, Shader, MaskFilter } from '@ohos.graphics';

// 自定义绘制：水波纹效果
class WaterRippleRenderer {
  private node: RenderNode;
  private ripples: RippleData[] = [];
  
  constructor() {
    this.node = new RenderNode();
  }
  
  // 添加水波纹
  addRipple(x: number, y: number): void {
    this.ripples.push({
      centerX: x,
      centerY: y,
      radius: 0,
      maxRadius: 200,
      alpha: 1.0
    });
  }
  
  // 更新并绘制
  update(): void {
    // 更新波纹状态
    this.ripples = this.ripples.filter(ripple => {
      ripple.radius += 5;
      ripple.alpha = 1 - ripple.radius / ripple.maxRadius;
      return ripple.alpha > 0;
    });
    
    // 重新绘制
    this.drawRipples();
  }
  
  // 绘制水波纹
  private drawRipples(): void {
    const canvas = this.node.beginRecording(400, 400);
    
    // 绘制背景
    const bgPaint = new Paint();
    bgPaint.setColor(Color.parse('#1a1a2e'));
    canvas.drawRect(0, 0, 400, 400, bgPaint);
    
    // 绘制每个波纹
    for (const ripple of this.ripples) {
      const paint = new Paint();
      paint.setColor(Color.parse(`rgba(102, 126, 234, ${ripple.alpha})`));
      paint.setStyle(Paint.Style.STROKE);
      paint.setStrokeWidth(2);
      paint.setAntiAlias(true);
      
      canvas.drawCircle(ripple.centerX, ripple.centerY, ripple.radius, paint);
    }
    
    this.node.endRecording();
  }
  
  getNode(): RenderNode {
    return this.node;
  }
}

interface RippleData {
  centerX: number;
  centerY: number;
  radius: number;
  maxRadius: number;
  alpha: number;
}

// 自定义绘制：进度环
class ProgressRingRenderer {
  private node: RenderNode;
  private progress: number = 0;
  private radius: number = 80;
  private strokeWidth: number = 12;
  
  constructor() {
    this.node = new RenderNode();
  }
  
  // 设置进度
  setProgress(progress: number): void {
    this.progress = Math.max(0, Math.min(100, progress));
    this.drawProgressRing();
  }
  
  // 绘制进度环
  private drawProgressRing(): void {
    const canvas = this.node.beginRecording(200, 200);
    const centerX = 100;
    const centerY = 100;
    
    // 绘制背景环
    const bgPaint = new Paint();
    bgPaint.setColor(Color.parse('#2d2d44'));
    bgPaint.setStyle(Paint.Style.STROKE);
    bgPaint.setStrokeWidth(this.strokeWidth);
    bgPaint.setAntiAlias(true);
    canvas.drawCircle(centerX, centerY, this.radius, bgPaint);
    
    // 绘制进度弧
    const progressPaint = new Paint();
    const shader = Shader.createLinearGradient(
      0, 0, 200, 200,
      [Color.parse('#667eea'), Color.parse('#764ba2')],
      [0, 1]
    );
    progressPaint.setShader(shader);
    progressPaint.setStyle(Paint.Style.STROKE);
    progressPaint.setStrokeWidth(this.strokeWidth);
    progressPaint.setStrokeCap(Paint.Cap.ROUND);
    progressPaint.setAntiAlias(true);
    
    // 计算弧度
    const startAngle = -90; // 从顶部开始
    const sweepAngle = (this.progress / 100) * 360;
    
    const path = new Path();
    path.addArc(
      centerX - this.radius,
      centerY - this.radius,
      centerX + this.radius,
      centerY + this.radius,
      startAngle,
      sweepAngle
    );
    canvas.drawPath(path, progressPaint);
    
    // 绘制进度文字
    const textPaint = new Paint();
    textPaint.setColor(Color.WHITE);
    textPaint.setTextSize(32);
    textPaint.setTextAlign(Paint.Align.CENTER);
    textPaint.setAntiAlias(true);
    canvas.drawText(`${Math.round(this.progress)}%`, centerX, centerY + 10, textPaint);
    
    this.node.endRecording();
  }
  
  getNode(): RenderNode {
    this.drawProgressRing();
    return this.node;
  }
}

@Entry
@Component
struct CustomDrawDemo {
  private waterRippleRenderer: WaterRippleRenderer = new WaterRippleRenderer();
  private progressRingRenderer: ProgressRingRenderer = new ProgressRingRenderer();
  @State currentProgress: number = 0;
  
  build() {
    Column({ space: 30 }) {
      // 水波纹效果
      Column() {
        Text('水波纹效果')
          .fontColor(Color.White)
          .margin({ bottom: 10 })
        
        RenderNodeView({ node: this.waterRippleRenderer.getNode() })
          .width(400)
          .height(400)
          .onClick((event) => {
            this.waterRippleRenderer.addRipple(event.x, event.y);
          })
      }
      
      // 进度环效果
      Column() {
        Text('进度环效果')
          .fontColor(Color.White)
          .margin({ bottom: 10 })
        
        RenderNodeView({ node: this.progressRingRenderer.getNode() })
          .width(200)
          .height(200)
        
        Slider({ value: this.currentProgress, min: 0, max: 100 })
          .width(200)
          .onChange((value) => {
            this.currentProgress = value;
            this.progressRingRenderer.setProgress(value);
          })
      }
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
    .backgroundColor('#0f0f1a')
    .onAppear(() => {
      // 启动水波纹更新循环
      this.startRippleLoop();
    })
  }
  
  // 水波纹更新循环
  private startRippleLoop(): void {
    const loop = () => {
      this.waterRippleRenderer.update();
      requestAnimationFrame(loop);
    };
    loop();
  }
}

3.4 RenderNode性能优化实践

// 文件：RenderNodeOptimization.ets
import { RenderNode, RecordingCanvas, Paint, Color } from '@ohos.graphics';

// 性能优化：节点池复用
class RenderNodePool {
  private pool: RenderNode[] = [];
  private maxSize: number;
  
  constructor(maxSize: number = 50) {
    this.maxSize = maxSize;
  }
  
  // 获取节点
  acquire(): RenderNode {
    if (this.pool.length > 0) {
      return this.pool.pop()!;
    }
    return new RenderNode();
  }
  
  // 释放节点
  release(node: RenderNode): void {
    if (this.pool.length < this.maxSize) {
      // 重置节点状态
      node.setTranslate(0, 0);
      node.setScale(1, 1);
      node.setRotation(0);
      node.setAlpha(1);
      node.clearChildren();
      this.pool.push(node);
    }
  }
}

// 性能优化：批量绘制管理器
class BatchDrawManager {
  private rootNode: RenderNode;
  private itemNodes: Map<number, RenderNode> = new Map();
  private nodePool: RenderNodePool;
  
  constructor() {
    this.rootNode = new RenderNode();
    this.nodePool = new RenderNodePool(100);
  }
  
  // 批量更新数据
  updateItems(items: ItemData[]): void {
    // 回收不再使用的节点
    const usedIds = new Set(items.map(item => item.id));
    for (const [id, node] of this.itemNodes) {
      if (!usedIds.has(id)) {
        this.rootNode.removeChild(node);
        this.nodePool.release(node);
        this.itemNodes.delete(id);
      }
    }
    
    // 更新或创建节点
    for (let i = 0; i < items.length; i++) {
      const item = items[i];
      let node = this.itemNodes.get(item.id);
      
      if (!node) {
        node = this.nodePool.acquire();
        this.itemNodes.set(item.id, node);
        this.rootNode.addChild(node);
      }
      
      // 更新节点位置
      node.setTranslate(item.x, item.y);
      
      // 仅当内容变化时重新绘制
      if (item.dirty) {
        this.drawItem(node, item);
        item.dirty = false;
      }
    }
  }
  
  // 绘制单个项目
  private drawItem(node: RenderNode, item: ItemData): void {
    const canvas = node.beginRecording(item.width, item.height);
    const paint = new Paint();
    paint.setColor(item.color);
    paint.setAntiAlias(true);
    
    // 根据类型绘制不同内容
    switch (item.type) {
      case 'rect':
        canvas.drawRect(0, 0, item.width, item.height, paint);
        break;
      case 'circle':
        canvas.drawCircle(item.width / 2, item.height / 2, 
                          Math.min(item.width, item.height) / 2, paint);
        break;
      case 'rounded':
        const path = new Path();
        path.addRoundRect(0, 0, item.width, item.height, 8, 8);
        canvas.drawPath(path, paint);
        break;
    }
    
    node.endRecording();
  }
  
  getRootNode(): RenderNode {
    return this.rootNode;
  }
}

interface ItemData {
  id: number;
  x: number;
  y: number;
  width: number;
  height: number;
  color: Color;
  type: 'rect' | 'circle' | 'rounded';
  dirty: boolean;
}

@Entry
@Component
struct RenderNodeOptimization {
  private batchManager: BatchDrawManager = new BatchDrawManager();
  @State itemCount: number = 100;
  
  aboutToAppear(): void {
    this.initItems();
  }
  
  private initItems(): void {
    const items: ItemData[] = [];
    for (let i = 0; i < this.itemCount; i++) {
      items.push({
        id: i,
        x: (i % 10) * 80 + 10,
        y: Math.floor(i / 10) * 80 + 10,
        width: 70,
        height: 70,
        color: Color.parse(`hsl(${(i * 37) % 360}, 70%, 50%)`),
        type: ['rect', 'circle', 'rounded'][i % 3] as 'rect' | 'circle' | 'rounded',
        dirty: true
      });
    }
    this.batchManager.updateItems(items);
  }
  
  build() {
    Column() {
      RenderNodeView({ node: this.batchManager.getRootNode() })
        .width(820)
        .height(820)
      
      Row({ space: 10 }) {
        Button('随机移动')
          .onClick(() => this.randomizePositions())
        Button('改变颜色')
          .onClick(() => this.changeColors())
      }
      .margin({ top: 20 })
    }
    .width('100%')
    .height('100%')
    .justifyContent(FlexAlign.Center)
  }
  
  private randomizePositions(): void {
    // 更新位置逻辑...
  }
  
  private changeColors(): void {
    // 更新颜色逻辑...
  }
}

四、踩坑与注意事项

4.1 常见问题与解决方案

classDef problemNode fill:#ffebee,stroke:#c62828,stroke-width:2px
classDef solutionNode fill:#e8f5e9,stroke:#2e7d32,stroke-width:2px

flowchart TB
    P1[问题：内存泄漏]:::problemNode
    P2[问题：绘制不显示]:::problemNode
    P3[问题：性能卡顿]:::problemNode
    P4[问题：动画闪烁]:::problemNode
    
    S1[解决：及时调用endRecording<br/>使用节点池复用]:::solutionNode
    S2[解决：检查beginRecording尺寸<br/>确认Paint配置正确]:::solutionNode
    S3[解决：减少重绘次数<br/>使用脏标记优化]:::solutionNode
    S4[解决：开启抗锯齿<br/>使用硬件加速层]:::solutionNode
    
    P1 --> S1
    P2 --> S2
    P3 --> S3
    P4 --> S4

4.2 关键注意事项

1. 内存管理

// ❌ 错误：忘记结束记录
const canvas = node.beginRecording(100, 100);
canvas.drawRect(0, 0, 100, 100, paint);
// 缺少 node.endRecording() 导致内存泄漏

// ✅ 正确：确保配对调用
const canvas = node.beginRecording(100, 100);
try {
  canvas.drawRect(0, 0, 100, 100, paint);
} finally {
  node.endRecording();
}

2. 线程安全

// RenderNode操作应在UI线程执行
@Entry
@Component
struct ThreadSafetyDemo {
  private node: RenderNode = new RenderNode();
  
  aboutToAppear(): void {
    // ❌ 错误：在worker线程操作
    // worker.postMessage({ node: this.node });
    
    // ✅ 正确：在UI线程更新
    taskpool.execute(() => {
      // 计算数据
      return computeData();
    }).then(data => {
      // UI线程更新节点
      this.updateNode(data);
    });
  }
}

3. 性能陷阱

// ❌ 错误：频繁完整重绘
function update() {
  const canvas = node.beginRecording(width, height);
  drawEverything(canvas); // 每次绘制所有内容
  node.endRecording();
}

// ✅ 正确：增量更新
function updateDirty(dirtyRect: Rect) {
  const canvas = node.beginRecording(dirtyRect.width, dirtyRect.height);
  drawDirtyContent(canvas, dirtyRect); // 只绘制变化部分
  node.endRecording();
}

五、总结

5.1 RenderNode核心优势

5.2 最佳实践总结

1. 合理规划节点树：根据UI结构设计节点层级，避免过深嵌套
2. 复用节点对象：使用节点池减少对象创建开销
3. 增量更新策略：通过脏标记实现局部重绘
4. 属性动画优先：优先使用节点属性实现动画，而非重绘
5. 线程模型遵守：确保RenderNode操作在UI线程执行

RenderNode作为HarmonyOS图形渲染的核心机制，为开发者提供了高性能、灵活的图形绘制能力。通过深入理解其原理并遵循最佳实践，可以构建出流畅、高效的图形渲染应用。