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

有了场景图的知识,在本教程中我们来创造一个“太阳系”,月球绕着地球转、地球绕着太阳转。

其中会涉及以下 API:

  • 使用 appendChild 创建场景中各个节点的父子关系
  • 使用 translate 移动节点
  • 使用 rotate 让节点旋转
  • 使用 getElementsByName 在场景图中查询节点
  • 使用 addEventListener 监听画布事件

最终示例:

  • 官网示例
  • CodeSandbox 示例

创建场景图

它具有以下层次关系:

太阳系 solarSystem
| |
| 太阳 sun
|
地球轨道 earthOrbit
| |
| 地球 earth
|
月球轨道 moonOrbit
|
月球 moon

从 @antv/g 核心包中引入基础对象 Group 和 Circle。前者无可渲染实体,仅表示逻辑上的“容器”概念,适合“太阳系”、“地球轨道”、“月球轨道”这样的抽象概念,而后者用来表现太阳、地球和月球。当我们想表示“从属”关系时,就可以使用 appendChild,例如“太阳属于太阳系”:

import { Group, Circle } from '@antv/g';
// 太阳系
const solarSystem = new Group({
name: 'solarSystem',
});
// 地球轨道
const earthOrbit = new Group({
name: 'earthOrbit',
});
// 月球轨道
const moonOrbit = new Group({
name: 'moonOrbit',
});
// 太阳
const sun = new Circle({
name: 'sun',
style: {
r: 100,
},
});
// 地球
const earth = new Circle({
name: 'earth',
style: {
r: 50,
},
});
// 月球
const moon = new Circle({
name: 'moon',
style: {
r: 25,
},
});
// 太阳属于太阳系
solarSystem.appendChild(sun);
// 地球轨道也属于太阳系
solarSystem.appendChild(earthOrbit);
earthOrbit.appendChild(earth);
earthOrbit.appendChild(moonOrbit);
moonOrbit.appendChild(moon);

后续随时可以通过 getElementsByName 在场景图中查询节点:

canvas.getElementsByName('sun'); // [sun]

确定位置

此时我们使用 setPosition 将整个太阳系移动到画布中央,基于场景图内的父子关系,太阳、地球轨道、地球、月球轨道和月球都被移动到了 (300, 250),如下图(左)所示:

// 设置太阳系的位置
solarSystem.setPosition(300, 250);

保持太阳位置不变,我们沿 X 轴移动地球轨道 100,同样地球、月球轨道和月球也都被移动到了世界坐标系下(400, 250),如下图(中)所示:

earthOrbit.translate(100, 0);
// earthOrbit.getLocalPosition() --> (100, 0)
// earthOrbit.getPosition() --> (400, 250)

然后我们移动月球轨道,如下图(右)所示:

moonOrbit.translate(100, 0);

旋转起来

现在我们需要让地球和月球都旋转起来。首先使用 addEventListener 给画布添加一个事件监听器,监听 AFTER_RENDER 事件,该事件会在每一帧渲染完毕后触发。然后我们分别让太阳系和地球轨道在局部坐标系中沿 Z 轴旋转 1 度(你也可以让地球轨道转的更快点):

import { CanvasEvent } from '@antv/g';
// 当画布每一帧渲染完毕时...
canvas.addEventListener(CanvasEvent.AFTER_RENDER, () => {
// 太阳系自转
solarSystem.rotateLocal(1);
// 地球轨道自转
earthOrbit.rotateLocal(1);
});