logo

G

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

使用 Box2D 物理引擎

上一篇
进入 3D 世界
下一篇
使用 matter.js 物理引擎

资源

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...

Box2D 物理引擎提供了一系列针对刚体的仿真计算,例如重力和表面摩擦力。另外,在任意时刻也可以施加外力改变图形的位置和旋转角度,这为我们实现一些基于真实物理规则的布局提供了帮助。

通过 g-plugin-box2d 插件的支持,我们可以给已有的大部分 2D 图形增加物理属性。

在该示例中,我们创建了一系列动态物体,让它们进行自由落体,最终停留在“U 形槽”中。

注册插件

创建一个渲染器并注册插件:

import { Canvas, CanvasEvent } from '@antv/g';
import { Renderer } from '@antv/g-canvas';
import { Plugin as PluginBox2D } from '@antv/g-plugin-box2d';
const renderer = new Renderer();
const plugin = new PluginBox2D();
renderer.registerPlugin(plugin);
const canvas = new Canvas({
container: 'container',
width: 600,
height: 500,
renderer,
});

此时我们的“物理世界”已经存在默认的重力 gravity,如果要修改它,可以这样做:

const plugin = new PluginBox2D({
gravity: [0, 200],
});

创建静态地面

我们使用 Line 创建一个平地,需要特别注意 rigid 属性,设置为 static 表明它不受重力等作用力影响:

const ground = new Line({
style: {
x1: 50,
y1: 400,
// 省略其他属性
rigid: 'static',
},
});
canvas.appendChild(ground);

创建动态弹力球

接下来我们创建一个受重力影响的“弹力球”,其中:

  • density 表示物体密度,单位为千克/立方米
  • restitution 表示弹力系数
const circle = new Circle({
style: {
fill: '#1890FF',
r: 50,
rigid: 'dynamic',
density: 10,
restitution: 0.5,
},
});
canvas.appendChild(circle);

运行效果

插件会自动完成仿真过程,你可以看到小球自由落体至地面并弹起。