logo

G

  • 教程
  • API
  • 示例
  • 插件
  • 所有产品antv logo arrow
  • 6.1.26
  • 开始使用
  • 第一节:定义场景
  • 第二节:使用渲染器
  • 第三节:增加交互
  • 进阶内容
    • 场景图
    • 创造一个“太阳系”
    • 使用相机
    • 实现一个简单的动画
    • 使用插件
    • GPGPU 初体验
    • 进入 3D 世界
    • 使用 Box2D 物理引擎
    • 使用 matter.js 物理引擎
    • 使用 Yoga 布局引擎
    • 接管 D3 渲染
    • 接管 Observable Plot 渲染
    • 按需引入渲染器
    • 按需渲染
  • 高级话题
    • 性能优化
    • 自定义图形
    • 理解事件传播路径
    • 使用 React 定义图形
    • 导出画布内容
    • 使用轻量版

第二节:使用渲染器

上一篇
第一节:定义场景
下一篇
第三节:增加交互

资源

Ant Design
Galacea Effects
Umi-React 应用开发框架
Dumi-组件/文档研发工具
ahooks-React Hooks 库

社区

体验科技专栏
seeconfSEE Conf-蚂蚁体验科技大会

帮助

GitHub
StackOverflow

more products更多产品

Ant DesignAnt Design-企业级 UI 设计语言
yuque语雀-知识创作与分享工具
EggEgg-企业级 Node 开发框架
kitchenKitchen-Sketch 工具集
GalaceanGalacean-互动图形解决方案
xtech蚂蚁体验科技
© Copyright 2025 Ant Group Co., Ltd..备案号:京ICP备15032932号-38

Loading...

在该系列教程中,我们将逐步实现一个简单的可视化场景,展示节点和边,并让它们具备拖拽、拾取等基本交互能力。

在上一节我们定义了一个简单的场景,在本节中,我们将学习如何使用渲染器完成渲染。本节示例

完整 CodeSandbox 例子

选择渲染器

首先我们需要引入一个或多个渲染器,如果引入了多个,还可以在运行时切换。本例中我们只选择了一个 Canvas2D 渲染器:

import { Renderer } from '@antv/g-canvas';
const renderer = new Renderer();

创建画布

然后我们需要创建画布,使用上面引入的渲染器:

const canvas = new Canvas({
container: 'container', // DOM 节点id
width: 600, // 画布宽度
height: 500, // 画布高度
renderer,
});

向画布中添加图形

有了画布,我们可以把场景图中的两个节点和一条边加入画布,当然这一切要等待画布就绪之后。我们有两种方式获知画布何时就绪,一是监听 就绪事件,二是等待就绪的 Promise 返回:

canvas.addEventListener(CanvasEvent.READY, () => {
canvas.appendChild(node1);
canvas.appendChild(node2);
canvas.appendChild(edge);
});
// 或者
await canvas.ready;
canvas.appendChild(node1);
canvas.appendChild(node2);
canvas.appendChild(edge);

此时就能看到渲染效果了,不过有些奇怪,边出现在了节点之上,甚至挡住了文本:

这个问题是由我们加入画布的各个图形顺序导致,我们最后才将“边”加入画布,根据画家算法,它是最后绘制的,因此出现在了最顶层。

最简单的解决办法就是修改顺序,先绘制边,再绘制节点:

canvas.appendChild(edge);
canvas.appendChild(node1);
canvas.appendChild(node2);

此时效果就正常了:

或者,我们也可以通过 zIndex 手动调整。

设置展示次序

类似 CSS 中的 zIndex,我们可以手动设置两个节点的绘制顺序,让它们比边高(默认为 0)即可:

node1.style.zIndex = 1;
node2.style.zIndex = 1;

基础图形已经绘制出来了,下面让我们增加一些交互吧。