@antv/g 图形引擎深度解析课程

                          ┌─────────────────────────────────────────────────────┐
                          │              应用层 (Application Layer)              │
                          │  G2 / G6 / L7 / S2 / 自定义可视化应用               │
                          └───────────────────────┬─────────────────────────────┘
                                                  │
                          ┌───────────────────────▼─────────────────────────────┐
                          │                核心 API (@antv/g)                  │
                          │  Canvas · Document · DisplayObject · Group          │
                          │  动画系统 · 事件系统 · 样式系统 · 场景图             │
                          └───────────────────────┬─────────────────────────────┘
                                                  │
                   ┌──────────────────────────────┼──────────────────────────────┐
                   │                              │                              │
          ┌────────▼────────┐          ┌──────────▼──────────┐        ┌──────────▼──────────┐
          │  基础核心 g-lite  │          │  渲染器 (Renderers)  │        │  插件 (Plugins)      │
          │                 │          │                     │        │                     │
          │ 场景图管理       │          │ g-canvas (Canvas2D) │        │ 3D 扩展             │
          │ DOM API 兼容    │          │ g-svg    (SVG)      │        │ 物理引擎            │
          │ 事件服务         │          │ g-webgl  (WebGL)    │        │ 布局引擎            │
          │ 渲染服务         │          │ g-webgpu (WebGPU)   │        │ 拖拽交互            │
          │ CSS 样式解析     │          │ g-canvaskit (Skia)  │        │ 手绘风格            │
          │ 变换 & 相机      │          │                     │        │ GPGPU 计算          │
          └─────────────────┘          └─────────────────────┘        └─────────────────────┘

核心特性

@antv/g 的设计目标是成为 AntV 可视化体系的坚实基座

🌐

DOM API 兼容

图形和事件系统完全对齐浏览器 DOM Element/Event API，可无缝集成 D3、Hammer.js 等 Web 生态库。

🎨

多渲染后端

同一套代码可运行在 Canvas2D、SVG、WebGL、WebGPU、CanvasKit 五种渲染后端上，运行时可切换。

🎬

Web Animations API

动画系统实现 W3C Web Animations API 标准，支持关键帧、缓动、时间轴等完整动画能力。

🧩

插件化架构

20+ 官方插件覆盖 3D 渲染、物理模拟、Flex 布局、手绘风格等，且支持自定义插件扩展。

⚡

高性能优化

内置脏矩形检测、视锥裁剪、空间索引等优化策略，轻松应对大规模图形场景。

📱

跨平台支持

支持浏览器、移动端、Node.js 服务端渲染，以及 WebXR (VR/AR) 等多种运行环境。

快速上手

以下是一个最简示例，展示如何创建画布并绑定绘制一个交互圆形：

// 安装依赖
// npm install @antv/g @antv/g-canvas

import { Canvas, Circle } from '@antv/g';
import { Renderer } from '@antv/g-canvas';

// 1. 创建 Canvas2D 渲染器
const renderer = new Renderer();

// 2. 创建画布
const canvas = new Canvas({
  container: 'container',
  width: 600,
  height: 400,
  renderer,
});

// 3. 创建圆形
const circle = new Circle({
  style: {
    cx: 300,
    cy: 200,
    r: 80,
    fill: '#1890ff',
    stroke: '#fff',
    lineWidth: 2,
  },
});

// 4. 添加到画布
canvas.appendChild(circle);

// 5. 添加交互
circle.addEventListener('mouseenter', () => {
  circle.style.fill = '#40a9ff';
});
circle.addEventListener('mouseleave', () => {
  circle.style.fill = '#1890ff';
});