logo

G

  • 教程
  • API
  • 示例
  • 插件
  • 所有产品antv logo arrow
  • 6.1.26
  • 开始使用
  • 第一节:定义场景
  • 第二节:使用渲染器
  • 第三节:增加交互
  • 进阶内容
    • 场景图
    • 创造一个“太阳系”
    • 使用相机
    • 实现一个简单的动画
    • 使用插件
    • GPGPU 初体验
    • 进入 3D 世界
    • 使用 Box2D 物理引擎
    • 使用 matter.js 物理引擎
    • 使用 Yoga 布局引擎
    • 接管 D3 渲染
    • 接管 Observable Plot 渲染
    • 按需引入渲染器
    • 按需渲染
  • 高级话题
    • 性能优化
    • 自定义图形
    • 理解事件传播路径
    • 使用 React 定义图形
    • 导出画布内容
    • 使用轻量版

使用轻量版

上一篇
导出画布内容

资源

Ant Design
Galacea Effects
Umi-React 应用开发框架
Dumi-组件/文档研发工具
ahooks-React Hooks 库

社区

体验科技专栏
seeconfSEE Conf-蚂蚁体验科技大会

帮助

GitHub
StackOverflow

more products更多产品

Ant DesignAnt Design-企业级 UI 设计语言
yuque语雀-知识创作与分享工具
EggEgg-企业级 Node 开发框架
kitchenKitchen-Sketch 工具集
GalaceanGalacean-互动图形解决方案
xtech蚂蚁体验科技
© Copyright 2025 Ant Group Co., Ltd..备案号:京ICP备15032932号-38

Loading...

浏览器在不断迭代新功能的过程中,体积会越来越大。尽管我们想实现一个“小浏览器”,但在体积敏感的场景下,用户仍希望使用最小功能集。这就要求我们对现有功能进行合理拆分,力图实现最小核心 + 渐进式增强的模式。

下图展示了 @antv/g 的 bundle 组成情况。

bundle viz

完整版 @antv/g 由以下几部分组成:

  • @antv/g-lite 包含 画布,基础图形,事件系统,插件系统 等核心功能
  • @antv/g-camera-api 提供完整相机动作和动画功能
  • @antv/g-web-animations-api 提供兼容 Web Animations API 的动画系统
  • @antv/g-css-typed-om-api 提供
  • @antv/g-css-layout-api 提供
  • @antv/g-dom-mutation-observer-api 提供 DOM Mutation Observer API

使用方式

精简版使用方式和完整版在核心功能使用上完全一致,例如创建画布、基础图形、使用渲染器等:

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

此时调用元素的动画方法将无任何效果:

circle.animate([], {});

需要手动引入 @antv/g-web-animations-api 后方可生效:

import { Canvas, Circle } from '@antv/g-lite';
import '@antv/g-web-animations-api';

其他渐进式功能可使用类似方式按需引入。

功能介绍

下面详细介绍下拆分后各部分的功能。

g-lite

包含 画布,基础图形,事件系统,插件系统 等核心功能。

以上功能的使用方式没有变化,示例:

import { Canvas, Circle } from '@antv/g-lite';
import { Renderer } from '@antv/g-canvas';
const canvas = new Canvas({
container: 'container',
width: 600,
height: 500,
renderer: new Renderer(),
});
const circle = new Circle({
style: { r: 100 },
});

g-camera-api

@antv/g-lite 中包含了一个简单的相机实现,但无法使用相机动作和相机动画:

camera.pan(); // throw new Error('Method not implemented.');
camera.createLandmark(); // throw new Error('Method not implemented.');

引入后方可正常使用。

g-web-animations-api

为基础图形提供兼容 Web Animations API 的动画能力。缺少该功能仍可以调用 object.animate() 方法,但无任何效果。

g-css-typed-om-api

CSS Typed OM API 允许使用 JS 操作解析后的属性值,它也是 CSS Houdini 的基础。以 width: '50%' 为例,字符串形式的属性值会被解析成 CSS.percent(50),方便进行下一步的计算。

我们提供了类似能力。

g-css-layout-api

参考 CSS Layout API 提供布局能力。

g-dom-mutation-observer-api

在 DOM API 中,当我们想感知 DOM 树节点的修改,例如新节点加入、属性值变更,可以使用 MutationObserver。

在 G 中我们同样实现了这个 API,用来监听场景图中的变化。

g-compat

在基础图形上提供兼容旧版本的方法,大部分在新版中都有兼容 DOM API 的实现。因此不推荐使用这些方法,后续随时可能移除:

  • getCount 获取子节点数目,新版使用 childElementCount
  • getParent 获取父节点,新版使用 parentElement
  • getChildren 获取子节点列表,新版使用 children
  • getFirst 获取第一个子节点,新版使用 firstElementChild
  • getLast 获取最后一个子节点,新版使用 lastElementChild
  • getChildByIndex 按索引获取子节点,新版使用 this.children[index]
  • add 添加子节点,新版使用 appendChild
  • setClip 设置裁剪图形,新版使用 clipPath
  • getClip 获取裁剪图形,同上
  • set 在初始化配置上存储键值对
  • get 在初始化配置上读取值
  • show 展示图形,新版使用 visibility
  • hide 隐藏图形,同上
  • moveTo 在世界坐标系下移动图形,新版使用 setPosition
  • move 同上
  • setZIndex 设置渲染次序,新版使用 zIndex