{"id":13409168,"url":"https://github.com/antvis/g","last_synced_at":"2025-04-23T20:51:19.674Z","repository":{"id":37432385,"uuid":"111354216","full_name":"antvis/G","owner":"antvis","description":"💥 A flexible rendering engine for visualization.","archived":false,"fork":false,"pushed_at":"2025-04-14T03:08:54.000Z","size":74157,"stargazers_count":1117,"open_issues_count":32,"forks_count":209,"subscribers_count":53,"default_branch":"master","last_synced_at":"2025-04-18T13:28:37.057Z","etag":null,"topics":["2d-graphics","antv","antvis","canvas","visualization","webgl","webgpu"],"latest_commit_sha":null,"homepage":"https://g.antv.antgroup.com/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/antvis.png","metadata":{"files":{"readme":"README-zh_CN.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-11-20T02:52:38.000Z","updated_at":"2025-04-14T02:52:49.000Z","dependencies_parsed_at":"2023-10-01T18:54:05.932Z","dependency_job_id":"9605be55-03ea-41dd-9f5b-035db05618a0","html_url":"https://github.com/antvis/G","commit_stats":{"total_commits":831,"total_committers":42,"mean_commits":"19.785714285714285","dds":0.7376654632972323,"last_synced_commit":"2c3ed245208093549043217264c96520520dbe29"},"previous_names":[],"tags_count":8227,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antvis%2FG","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antvis%2FG/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antvis%2FG/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/antvis%2FG/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/antvis","download_url":"https://codeload.github.com/antvis/G/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":250460758,"owners_count":21434290,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["2d-graphics","antv","antvis","canvas","visualization","webgl","webgpu"],"created_at":"2024-07-30T20:00:58.509Z","updated_at":"2025-04-23T20:51:19.621Z","avatar_url":"https://github.com/antvis.png","language":"TypeScript","readme":"[English](./README.md) | 简体中文\n\n# G\n\n![CI](https://github.com/antvis/g/workflows/CI/badge.svg) [![Coverage Status](https://coveralls.io/repos/github/antvis/g/badge.svg?branch=next)](https://coveralls.io/github/antvis/g?branch=next) [![semantic-release: angular](https://img.shields.io/badge/semantic--release-angular-e10079?logo=semantic-release)](#badge)\n\n![TypeScript](https://img.shields.io/badge/language-typescript-blue.svg) ![License](https://img.shields.io/badge/license-MIT-000000.svg)\n\n[![npm package](https://img.shields.io/npm/v/@antv/g)](https://www.npmjs.com/package/@antv/g) [![npm downloads](http://img.shields.io/npm/dm/@antv/g)](https://www.npmjs.com/package/@antv/g) [![Percentage of issues still open](http://isitmaintained.com/badge/open/antvis/g.svg)](http://isitmaintained.com/project/antvis/g 'Percentage of issues still open') [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=shields)](https://github.com/antvis/g/pulls)\n\n一款高效易用的可视化渲染引擎。\n\n\u003cp\u003e\n  \u003ca href=\"https://g.antv.antgroup.com/examples/ecosystem/d3/#d3-force-directed-graph\"\u003e\u003cimg height=\"160\" src=\"https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*PovRRJtsBMIAAAAAAAAAAAAAARQnAQ\" alt=\"D3 force directed graph\"/\u003e\u003c/a\u003e\n\u003ca href=\"https://g.antv.antgroup.com/zh/examples/ecosystem/d3/#d3-barchart\"\u003e\u003cimg height=\"160\" src=\"https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*h6vDS6eRVFoAAAAAAAAAAAAAARQnAQ\" alt=\"D3 barchart\"/\u003e\u003c/a\u003e\n\u003ca href=\"https://g.antv.antgroup.com/zh/examples/plugins/rough/#rough-d3-barchart\"\u003e\u003cimg height=\"160\" src=\"https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*aJaFSrYOLXMAAAAAAAAAAAAAARQnAQ\" alt=\"D3 sketchy barchart\"/\u003e\u003c/a\u003e\n\u003ca href=\"https://g.antv.antgroup.com/zh/examples/plugins/yoga/#yoga-text\"\u003e\u003cimg height=\"160\" src=\"https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*IH1fSJN9fsMAAAAAAAAAAAAAARQnAQ\" alt=\"Yoga plugin\"/\u003e\u003c/a\u003e\n\u003ca href=\"https://g.antv.antgroup.com/zh/examples/plugins/physics-engine/#box2d\"\u003e\u003cimg height=\"160\" src=\"https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*Qw5OQLGQy_4AAAAAAAAAAAAAARQnAQ\" alt=\"Box2D physics engine plugin\"/\u003e\u003c/a\u003e\n\u003ca href=\"https://g.antv.antgroup.com/zh/examples/plugins/rough/#rough\"\u003e\u003cimg height=\"160\" src=\"https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*d4iiS5_3YVIAAAAAAAAAAAAAARQnAQ\" alt=\"Rough.js plugin\"/\u003e\u003c/a\u003e\n\u003ca href=\"https://g.antv.antgroup.com/zh/examples/plugins/canvaskit/#skottie\"\u003e\u003cimg height=\"160\" src=\"https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*_usaTqSm6vYAAAAAAAAAAAAAARQnAQ\" alt=\"Canvaskit plugin\"/\u003e\u003c/a\u003e\n\u003ca href=\"https://g.antv.antgroup.com/zh/examples/plugins/canvaskit/#canvaskit-particles\"\u003e\u003cimg height=\"160\" src=\"https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*919sR5Oxx_kAAAAAAAAAAAAAARQnAQ\" alt=\"Yoga plugin\"/\u003e\u003c/a\u003e\n\u003ca href=\"https://g.antv.antgroup.com/zh/examples/3d/geometry/#sphere\"\u003e\u003cimg height=\"160\" src=\"https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*bsj2S4upLBgAAAAAAAAAAAAAARQnAQ\" alt=\"Canvaskit plugin\"/\u003e\u003c/a\u003e\n\u003ca href=\"https://g.antv.antgroup.com/zh/examples/3d/3d-basic/#force-3d\"\u003e\u003cimg height=\"160\" src=\"https://gw.alipayobjects.com/mdn/rms_6ae20b/afts/img/A*3XFxQKWOeKoAAAAAAAAAAAAAARQnAQ\" alt=\"3D force directed graph\"/\u003e\u003c/a\u003e\n\u003c/p\u003e\n\n## ✨ 特性\n\n-   更易用的 API。其中图形、事件系统兼容 DOM Element \u0026 Event API，动画系统兼容 Web Animations API。可以以极低的成本适配 Web 端已有的生态例如 D3、Hammer.js 手势库等。\n-   适配 Web 端多种渲染环境。支持 Canvas2D / SVG / CanvasKit / WebGL / WebGPU 以及运行时切换，并支持服务端渲染。\n-   高性能的渲染与计算。为可并行算法提供基于 WebGPU 的 GPGPU 支持。\n    -   [webgpu-graph](https://g-next.antv.vision/zh/docs/api/gpgpu/webgpu-graph) 使用 GPU 加速的图分析算法库\n-   可扩展的插件机制以及丰富的插件集：\n    -   渲染相关\n        -   [g-plugin-canvas-renderer](https://g-next.antv.vision/zh/docs/plugins/canvas-renderer) 基于 Canvas2D 渲染 2D 图形\n        -   [g-plugin-svg-renderer](https://g-next.antv.vision/zh/docs/plugins/svg-renderer) 基于 SVG 渲染 2D 图形\n        -   [g-plugin-device-renderer](https://g-next.antv.vision/zh/docs/plugins/device-renderer) 基于 GPUDevice 渲染 2D 图形\n        -   [g-plugin-html-renderer](https://g-next.antv.vision/zh/docs/plugins/html-renderer) 渲染 DOM 元素\n        -   [g-plugin-3d](https://g-next.antv.vision/zh/docs/plugins/3d) 基于 g-plugin-device-renderer 扩展 3D 能力\n        -   [g-plugin-rough-canvas-renderer](https://g-next.antv.vision/zh/docs/plugins/rough-canvas-renderer) 使用 [rough.js](https://roughjs.com/) 和 Canvs2D 进行手绘风格渲染\n        -   [g-plugin-rough-svg-renderer](https://g-next.antv.vision/zh/docs/plugins/rough-svg-renderer) 使用 [rough.js](https://roughjs.com/) 和 SVG 进行手绘风格渲染\n        -   [g-plugin-canvaskit-renderer](https://g-next.antv.vision/zh/docs/plugins/canvaskit-renderer) 基于 [Skia](https://skia.org/docs/user/modules/quickstart) 渲染 2D 图形\n    -   拾取\n        -   [g-plugin-canvas-picker](https://g-next.antv.vision/zh/docs/plugins/canvas-picker) 基于 Canvas2D\n        -   [g-plugin-svg-picker](https://g-next.antv.vision/zh/docs/plugins/svg-picker) 基于 SVG\n    -   交互\n        -   [g-plugin-dom-interaction](https://g-next.antv.vision/zh/docs/plugins/dom-interaction) 基于 DOM API 绑定事件\n        -   [g-plugin-control](https://g-next.antv.vision/zh/docs/plugins/control) 为 3D 场景提供相机交互\n        -   [g-plugin-dragndrop](https://g-next.antv.vision/en/docs/plugins/dragndrop) 基于 PointerEvents 提供 Drag 'n' Drop\n    -   物理引擎\n        -   [g-plugin-box2d](https://g-next.antv.vision/zh/docs/plugins/box2d) 基于 Box2D\n        -   [g-plugin-matterjs](https://g-next.antv.vision/zh/docs/plugins/matterjs) 基于 matter.js\n        -   [g-plugin-physx](https://g-next.antv.vision/zh/docs/plugins/physx) 基于 PhysX\n    -   布局引擎\n        -   [g-plugin-yoga](https://g-next.antv.vision/zh/docs/plugins/yoga) 基于 Yoga 提供 Flex 布局能力\n    -   GPGPU\n        -   [g-plugin-gpgpu](https://g-next.antv.vision/zh/docs/plugins/gpgpu) 基于 WebGPU 提供 GPGPU 能力\n    -   CSS 选择器\n        -   [g-plugin-css-select](https://g-next.antv.vision/zh/docs/plugins/css-select) 支持使用 CSS 选择器在场景图中检索\n\n## 📦 安装\n\n```bash\n# 安装核心包\n$ npm install @antv/g --save\n# Canvas 渲染器\n$ npm install @antv/g-canvas --save\n# SVG 渲染器\n$ npm install @antv/g-svg --save\n# WebGL 渲染器\n$ npm install @antv/g-webgl --save\n```\n\n## 🔨 使用\n\n```html\n\u003cdiv id=\"container\"\u003e\u003c/div\u003e\n```\n\n```js\nimport { Circle, Canvas, CanvasEvent } from '@antv/g';\nimport { Renderer as CanvasRenderer } from '@antv/g-canvas';\n// or\n// import { Renderer as WebGLRenderer } from '@antv/g-webgl';\n// import { Renderer as SVGRenderer } from '@antv/g-svg';\n\n// 创建画布\nconst canvas = new Canvas({\n    container: 'container',\n    width: 500,\n    height: 500,\n    renderer: new CanvasRenderer(), // 选择一个渲染器\n});\n\n// 创建一个圆\nconst circle = new Circle({\n    style: {\n        cx: 100,\n        cy: 100,\n        r: 50,\n        fill: 'red',\n        stroke: 'blue',\n        lineWidth: 5,\n    },\n});\n\ncanvas.addEventListener(CanvasEvent.READY, function () {\n    // 加入画布\n    canvas.appendChild(circle);\n\n    // 监听 `click` 事件\n    circle.addEventListener('click', function () {\n        this.style.fill = 'green';\n    });\n});\n```\n\n## ⌨️ 开发\n\n启动并预览示例：\n\n```bash\ngit clone git@github.com:antvis/g.git\ncd g\npnpm install\npnpm build\npnpm dev\n```\n\n### API Spec\n\n在项目根目录下启动开发服务器，例如 `http-server`:\n\n```bash\nhttp-server -p 9090\n```\n\n访问 `localhost:9090/spec/api.html` 即可预览 API Spec。\n\n### 运行测试用例\n\n构建并运行测试用例：\n\n```bash\npnpm build\npnpm test\n```\n\n### 启动开发示例\n\n构建并启动 vite 示例：\n\n```bash\npnpm build\npnpm dev\n```\n\n## 受以下项目启发\n\n-   [Sprite.js](https://github.com/spritejs/spritejs)\n-   [Pixi.js](https://pixijs.com/)\n-   [PlayCanvas](https://playcanvas.com/)\n-   [WebKit](https://github.com/WebKit/WebKit/blob/main/Source/WebCore)\n","funding_links":[],"categories":["Repository"],"sub_categories":["Data Visualization"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fantvis%2Fg","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fantvis%2Fg","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fantvis%2Fg/lists"}