绘制与渲染

绘制与渲染概述

G6 提供了一系列绘制和渲染相关的 API，用于控制图形元素的显示过程。在 G6 中，绘制和渲染是两个不同的概念：

绘制(draw): 仅负责将图形元素绘制到画布上，不涉及布局计算
渲染(render): 完整的渲染流程，包括数据处理、布局计算和最终绘制

理解这些 API 的区别对于优化性能和实现特定效果至关重要。

API 参考

Graph.draw()

绘制元素，但不执行布局计算。

draw(): Promise<void>;

说明

draw 方法仅执行元素的绘制过程，不会重新计算布局。

⚠️ 注意: draw 为异步方法，需要使用 await 或 Promise 链式调用来确保绘制完成后再执行后续操作。

示例 1: 基础用法

// 基本用法
await graph.draw();

示例 2: 修改节点样式后重新绘制

// 修改节点样式后重新绘制
graph.updateNodeData([
  {
    id: 'node1',
    style: {
      fill: 'red',
      stroke: 'blue',
      lineWidth: 2,
    },
  },
]);

// 仅绘制更新后的样式，不重新布局
await graph.draw();

示例 3: 批量更新多个元素后一次性绘制

// 更新多个节点
graph.updateNodeData([{ id: 'node1', style: { fill: 'red' } }]);
graph.updateNodeData([{ id: 'node2', style: { fill: 'blue' } }]);

// 更新边
graph.updateEdgeData([{ id: 'edge1', style: { stroke: 'green' } }]);

// 批量操作完成后绘制
await graph.draw();

示例 4: 使用事件监听绘制完成

import { GraphEvent } from '@antv/g6';

graph.on(GraphEvent.AFTER_DRAW, () => {
  console.log('绘制完成');
});

await graph.draw();

Graph.render()

执行完整的渲染流程，包括数据处理、布局计算和绘制。

render(): Promise<void>;

说明

render 方法会执行完整的渲染流程：

处理数据更新
绘制元素到画布上
执行布局算法

示例 1: 基本用法

// 基本用法
await graph.render();

示例 2: 添加新数据后渲染

graph.addData({
  nodes: [{ id: 'node3' }, { id: 'node4' }],
  edges: [{ id: 'edge2', source: 'node1', target: 'node3' }],
});
await graph.render();

示例 3: 监听渲染事件

import { GraphEvent } from '@antv/g6';

// 渲染开始前
graph.on(GraphEvent.BEFORE_RENDER, () => {
  console.log('渲染开始...');
  // 显示加载指示器
  showLoadingIndicator();
});

// 渲染完成后
graph.on(GraphEvent.AFTER_RENDER, () => {
  console.log('渲染完成');
  // 隐藏加载指示器
  hideLoadingIndicator();
});

graph.render();

Graph.clear()

清空画布上的所有元素，包括节点、边和其他图形元素。

clear(): Promise<void>;

说明

此方法会删除图中的所有元素，但保留画布配置和样式。这是一个异步方法，返回一个 Promise。

示例

// 基本用法
await graph.clear();

使用技巧

draw 与 render 的选择

使用 draw() 当:
- 仅修改了元素样式或状态，不需要重新计算位置
- 性能敏感，希望避免不必要的布局计算
使用 render() 当:
- 初始化图表
- 更改了布局配置
- 添加或删除了大量节点/边
- 需要重新计算所有元素位置