logo

G

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

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

react 通过 react-reconciler 提供了自定义 render 的能力,react-g 便是一个 react 到 g 的 render。

react-g 目前处于实验状态,欢迎试用和反馈。

安装

npm i @antv/react-g

使用方式

react-g 提供以下内置组件,可以直接引入使用,属性和原生的 g 对象是一致的:

  • Container: Canvas and Group.
  • Shape: Text, Circle, Ellipse, Image, Line, Marker, Path, Polygon and Polyline.

基本用法

import { Renderer as CanvasRenderer } from '@antv/g-canvas';
import { Canvas, Circle } from '@antv/react-g';
import { useState } from 'react';
const renderer = new CanvasRenderer();
const App = () => {
const [size, setSize] = useState(50);
return (
<Canvas width={600} height={400} renderer={renderer}>
<Circle
x={100}
y={200}
r={size}
fill="#1890FF"
stroke="#F04864"
lineWidth={4}
onClick={() => {
setSize(100);
}}
/>
</Canvas>
);
};
export default App;

使用 ref 可以获取 g 中的对象实例

import { Renderer as CanvasRenderer } from '@antv/g-canvas';
import { Canvas, Circle } from '@antv/react-g';
import { useRef, useState } from 'react';
const renderer = new CanvasRenderer();
const App = () => {
const circleRef = useRef();
const [size, setSize] = useState(50);
return (
<Canvas width={600} height={400} renderer={renderer}>
<Circle
ref={circleRef}
x={100}
y={200}
r={size}
fill="#1890FF"
stroke="#F04864"
lineWidth={4}
onClick={() => {
setSize(100);
}}
/>
</Canvas>
);
};
export default App;

使用 render 函数可以将 react-g 的组件渲染到已有的 g 对象实例中

  • 将 react-g 组件渲染到任意的 g 实例(Canvas/Group/Shape)中
  • 意味着可以将 react-g 组件渲染到 g2,g6 等其他库中
import { Canvas as GCanvas } from '@antv/g';
import { Renderer as CanvasRenderer } from '@antv/g-canvas';
import { Circle, render } from '@antv/react-g';
import { useState } from 'react';
const renderer = new CanvasRenderer();
const CircleComponent = () => {
const [size, setSize] = useState(50);
return (
<Circle
x={100}
y={200}
r={size}
fill="#1890FF"
stroke="#F04864"
lineWidth={4}
onMouseenter={() => {
setSize(100);
}}
onMouseleave={() => {
setSize(50);
}}
/>
);
};
const canvas = new GCanvas({
container: 'container', // DOM 节点id
width: 600,
height: 500,
renderer,
});
// canvas can also be group/shape
render(<CircleComponent />, canvas);