logo

G

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

按需引入渲染器

上一篇
接管 Observable Plot 渲染
下一篇
按需渲染

资源

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...

通过场景图描述待渲染对象后,我们需要将它们交给渲染器。使用何种渲染器由用户按需引入,并且可以在运行时切换。

按需引入渲染器

目前我们提供了多种渲染器,用户可以像插件一样按需引入,但至少需要一种:

import { Renderer as CanvasRenderer } from '@antv/g-canvas';
import { Renderer as WebGLRenderer } from '@antv/g-webgl';

这样在创建画布时可以选择引入的渲染器之一,例如我们引入了 Canvas 和 WebGL 渲染器,就可以在两者之间选择:

import { Canvas } from '@antv/g';
const canvas = new Canvas({
container: 'container',
width: 600,
height: 500,
// renderer: new CanvasRenderer(),
renderer: new WebGLRenderer(),
});

很多渲染引擎会为用户选择默认渲染器,例如 Pixi.js 会优先使用 WebGL,如果不支持则降级成 Canvas。在 G 中这个选择权交给用户。

运行时切换

如果引入了多个渲染器,可以在运行时切换。目前 G 官网中的所有 DEMO 都可以在 renderer 面板中切换,并不会中断动画效果。再比如 G6 中可以通过节点和边的数目动态判断,是否需要切换到 WebGL 渲染器。

import { Renderer as WebGLRenderer } from '@antv/g-webgl';
import { Renderer as SvgRenderer } from '@antv/g-svg';
const webglRenderer = new WebGLRenderer();
const svgRenderer = new SvgRenderer();
if (tooManyShapes) {
canvas.setRenderer(webglRenderer);
} else {
canvas.setRenderer(svgRenderer);
}