渲染器
阅读时间约 2 分钟
G6 默认使用 Canvas 作为渲染器,但也支持通过 SVG 和 WebGL 进行渲染,要切换到 SVG 或 WebGL 渲染器,只需在初始化时传入 renderer
参数即可。
使用 SVG 渲染器
- 安装渲染器依赖:
npm install @antv/g-svg
- 配置渲染器:
import { Renderer as SVGRenderer } from '@antv/g-svg';import { Graph } from '@antv/g6';const graph = new Graph({// ... other options// 这里所有的画布都会使用 SVG 渲染器renderer: () => new SVGRenderer(),});
使用 WebGL 渲染器
- 安装渲染器依赖:
npm install @antv/g-webgl
- 配置渲染器:
import { Renderer as WebGLRenderer } from '@antv/g-webgl';import { Graph } from '@antv/g6';const graph = new Graph({// ... other options// 这里所有的画布都会使用 WebGL 渲染器renderer: () => new WebGLRenderer(),});
分层使用不同的渲染器
G6 采用了分层画布进行渲染,因此 renderer
是一个回调函数,参数是画布类型,返回渲染器实例,如果你想在不同的画布上使用不同的渲染器,可以这样配置:
import { Renderer as SVGRenderer } from '@antv/g-svg';import { Renderer as WebGLRenderer } from '@antv/g-webgl';const graph = new Graph({// ... other optionsrenderer: (layer) => {// 主画布使用 WebGL 渲染器,其他画布使用 SVG 渲染器if (layer === 'main') return new WebGLRenderer();return new SVGRenderer();},});
动态切换渲染器
G6 没有提供单独的 API 来切换渲染器,但你仍可以通过 setOptions
方法来更新 renderer
参数:
import { Renderer as SVGRenderer } from '@antv/g-svg';import { Renderer as WebGLRenderer } from '@antv/g-webgl';// 初始化时使用 WebGL 渲染器const graph = new Graph({// ... other optionsrenderer: () => new WebGLRenderer(),});await graph.render();// 切换到 SVG 渲染器graph.setOptions({renderer: () => new SVGRenderer(),});