English | 简体中文

G

As the underlying rendering engine of AntV, G is dedicated to provide consistent and high performance 2D / 3D graphics rendering capabilities for upper layer products, adapting all underlying rendering APIs (Canvas2D / SVG / WebGL / WebGPU / CanvasKit / Node.js) on the web side. In particular, it provides GPGPU support for algorithms suitable for parallel computing in graph scenarios.

✨ Features

Easy-to-use API。The graphics and event system is compatible with DOM Element & Event API, and the animation system is compatible with Web Animations API, which can be adapted to the existing ecosystem of Web side such as D3, Hammer.js gesture library, etc. at a very low cost.

Support multiple rendering environments。Support Canvas2D / SVG / WebGL / WebGPU / CanvasKit and runtime switching, and also server-side rendering.

High performance rendering and computing。WebGPU-based GPGPU support for parallelizable algorithms. webgpu-graph is a library of graph analysis algorithms using GPU acceleration.

Extensible plug-in mechanism and rich set of plug-ins：

• Rendering Related
  • g-plugin-canvas-renderer Rendering 2D graphics based on Canvas2D.
  • g-plugin-svg-renderer Rendering 2D graphics based on SVG.
  • g-plugin-device-renderer Rendering 2D graphics based on GPUDevice.
  • g-plugin-html-renderer Rendering DOM with HTML.
  • g-plugin-3d Extended 3D capabilities.
  • g-plugin-rough-canvas-renderer Perform hand-drawn style rendering with rough.js and Canvs2D.
  • g-plugin-rough-svg-renderer Perform hand-drawn style rendering with rough.js and SVG.
  • g-plugin-canvaskit-renderer Rendering 2D graphics based on Skia.
• Picking
  • g-plugin-canvas-picker Do picking with Canvas2D and mathematical calculations.
  • g-plugin-svg-picker Do picking with SVG and DOM API.
• Interaction
  • g-plugin-dom-interaction Binds event listeners with DOM API.
  • g-plugin-control Provides camera interaction for 3D scenes.
  • g-plugin-dragndrop Provides Drag 'n' Drop based on PointerEvents.
• Physics Engine
  • g-plugin-box2d Based on Box2D.
  • g-plugin-matterjs Based on matter.js.
  • g-plugin-physx Based on PhysX.
• Layout Engine
  • g-plugin-yoga Provides Flex layout capabilities based on Yoga.
• GPGPU
  • g-plugin-gpgpu Provides GPGPU capabilities based on WebGPU.
• CSS Selector
  • g-plugin-css-select Supports for retrieval in the scene graph using CSS selectors.
• A11y
  • g-plugin-a11y Provides accessibility features.

📦 Install

1# Install Core
2$ npm install @antv/g --save
3# Canvas Renderer
4$ npm install @antv/g-canvas --save
5# SVG Renderer
6$ npm install @antv/g-svg --save
7# WebGL Renderer
8$ npm install @antv/g-webgl --save

🔨 Usage

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

1import { Circle, Canvas, CanvasEvent } from '@antv/g';
2import { Renderer as CanvasRenderer } from '@antv/g-canvas';
3// or
4// import { Renderer as WebGLRenderer } from '@antv/g-webgl';
5// import { Renderer as SVGRenderer } from '@antv/g-svg';
6
7// create a canvas
8const canvas = new Canvas({
9    container: 'container',
10    width: 500,
11    height: 500,
12    renderer: new CanvasRenderer(), // select a renderer
13});
14
15// create a circle
16const circle = new Circle({
17    style: {
18        cx: 100,
19        cy: 100,
20        r: 50,
21        fill: 'red',
22        stroke: 'blue',
23        lineWidth: 5,
24    },
25});
26
27canvas.addEventListener(CanvasEvent.READY, function () {
28    // append to canvas
29    canvas.appendChild(circle);
30
31    // add listener for `click` event
32    circle.addEventListener('click', function () {
33        this.style.fill = 'green';
34    });
35});

⌨️ Development

Start previewing demos:

1git clone git@github.com:antvis/g.git
2cd g
3pnpm install
4pnpm build
5pnpm dev

API Spec

Start a dev-server on root dir, eg. http-server:

1http-server -p 9090

Open api.html on localhost:9090/spec/api.html.

Run test cases

Build and run test cases:

1pnpm build
2pnpm test

Run demos

Preview our dev demos:

1pnpm build
2pnpm dev

Inspired by

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

Contributors

dengfuping	xiaoiver	dxq613	dependabot-preview[bot]	zhanba	afc163
limichange	entronad	hustcc	tangying1027	zengyue	simaQ
lessmost	visiky	lxfu1	ICMI	Deturium	Yanyan-Wang
yiiiiiiqianyao	moayuisuda	elaine1234	mxz96102	DrugsZ	baizn
terence55	tyr1dev	budlion	luoxupan	ikxin	Leannechn

_dev-itsheng

This project follows the git-contributor spec, auto updated at Wed Jun 21 2023 13:21:24 GMT+0800.