使用 React 定义图形
上一篇
理解事件传播路径
下一篇
导出画布内容
Loading...
react 通过 react-reconciler
提供了自定义 render 的能力,react-g
便是一个 react 到 g 的 render。
react-g
目前处于实验状态,欢迎试用和反馈。
npm i @antv/react-g
react-g 提供以下内置组件,可以直接引入使用,属性和原生的 g 对象是一致的:
Canvas
and Group
.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}><Circlex={100}y={200}r={size}fill="#1890FF"stroke="#F04864"lineWidth={4}onClick={() => {setSize(100);}}/></Canvas>);};export default App;
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}><Circleref={circleRef}x={100}y={200}r={size}fill="#1890FF"stroke="#F04864"lineWidth={4}onClick={() => {setSize(100);}}/></Canvas>);};export default App;
render
函数可以将 react-g 的组件渲染到已有的 g 对象实例中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 (<Circlex={100}y={200}r={size}fill="#1890FF"stroke="#F04864"lineWidth={4}onMouseenter={() => {setSize(100);}}onMouseleave={() => {setSize(50);}}/>);};const canvas = new GCanvas({container: 'container', // DOM 节点idwidth: 600,height: 500,renderer,});// canvas can also be group/shaperender(<CircleComponent />, canvas);