English | 简体中文

G

一款高效易用的可视化渲染引擎。

✨ 特性

• 更易用的 API。其中图形、事件系统兼容 DOM Element & Event API，动画系统兼容 Web Animations API。可以以极低的成本适配 Web 端已有的生态例如 D3、Hammer.js 手势库等。
• 适配 Web 端多种渲染环境。支持 Canvas2D / SVG / CanvasKit / WebGL / WebGPU 以及运行时切换，并支持服务端渲染。
• 高性能的渲染与计算。为可并行算法提供基于 WebGPU 的 GPGPU 支持。
  • webgpu-graph 使用 GPU 加速的图分析算法库
• 可扩展的插件机制以及丰富的插件集：
  • 渲染相关
    • g-plugin-canvas-renderer 基于 Canvas2D 渲染 2D 图形
    • g-plugin-svg-renderer 基于 SVG 渲染 2D 图形
    • g-plugin-device-renderer 基于 GPUDevice 渲染 2D 图形
    • g-plugin-html-renderer 渲染 DOM 元素
    • g-plugin-3d 基于 g-plugin-device-renderer 扩展 3D 能力
    • g-plugin-rough-canvas-renderer 使用 rough.js 和 Canvs2D 进行手绘风格渲染
    • g-plugin-rough-svg-renderer 使用 rough.js 和 SVG 进行手绘风格渲染
    • g-plugin-canvaskit-renderer 基于 Skia 渲染 2D 图形
  • 拾取
    • g-plugin-canvas-picker 基于 Canvas2D
    • g-plugin-svg-picker 基于 SVG
  • 交互
    • g-plugin-dom-interaction 基于 DOM API 绑定事件
    • g-plugin-control 为 3D 场景提供相机交互
    • g-plugin-dragndrop 基于 PointerEvents 提供 Drag 'n' Drop
  • 物理引擎
    • g-plugin-box2d 基于 Box2D
    • g-plugin-matterjs 基于 matter.js
    • g-plugin-physx 基于 PhysX
  • 布局引擎
    • g-plugin-yoga 基于 Yoga 提供 Flex 布局能力
  • GPGPU
    • g-plugin-gpgpu 基于 WebGPU 提供 GPGPU 能力
  • CSS 选择器
    • g-plugin-css-select 支持使用 CSS 选择器在场景图中检索

📦 安装

# 安装核心包
$ npm install @antv/g --save
# Canvas 渲染器
$ npm install @antv/g-canvas --save
# SVG 渲染器
$ npm install @antv/g-svg --save
# WebGL 渲染器
$ npm install @antv/g-webgl --save

🔨 使用

<div id="container"></div>

import { Circle, Canvas, CanvasEvent } from '@antv/g';
import { Renderer as CanvasRenderer } from '@antv/g-canvas';
// or
// import { Renderer as WebGLRenderer } from '@antv/g-webgl';
// import { Renderer as SVGRenderer } from '@antv/g-svg';

// 创建画布
const canvas = new Canvas({
    container: 'container',
    width: 500,
    height: 500,
    renderer: new CanvasRenderer(), // 选择一个渲染器
});

// 创建一个圆
const circle = new Circle({
    style: {
        cx: 100,
        cy: 100,
        r: 50,
        fill: 'red',
        stroke: 'blue',
        lineWidth: 5,
    },
});

canvas.addEventListener(CanvasEvent.READY, function () {
    // 加入画布
    canvas.appendChild(circle);

    // 监听 `click` 事件
    circle.addEventListener('click', function () {
        this.style.fill = 'green';
    });
});

⌨️ 开发

启动并预览示例：

git clone [email protected]:antvis/g.git
cd g
pnpm install
pnpm build
pnpm dev

API Spec

在项目根目录下启动开发服务器，例如 http-server:

http-server -p 9090

访问 localhost:9090/spec/api.html 即可预览 API Spec。

运行测试用例

构建并运行测试用例：

pnpm build
pnpm test

启动开发示例

构建并启动 vite 示例：

pnpm build
pnpm dev

受以下项目启发

• Sprite.js
• Pixi.js
• PlayCanvas
• WebKit