反应-g

反应为 @ antv/ g

安装

npm i @antv/react-g

使用量

反应- g 提供主机组件 :

• 集装箱: Canvas 财务报告和审定财务报表 Group。 。 。 .
• 形状 : Text, (中文(简体) ), Circle, (中文(简体) ), Ellipse, (中文(简体) ), Image, (中文(简体) ), Line, (中文(简体) ), Marker, (中文(简体) ), Path, (中文(简体) ), Polygon 财务报告和审定财务报表 Polyline。 。 。 .

基本用途

import React, { useState } from 'react';
import { Canvas, Circle } from '@antv/react-g';
import { Renderer as CanvasRenderer } from '@antv/g-canvas';

const renderer = new CanvasRenderer();

const App = () => {
    const [size, setSize] = useState(50);
    return (
        <Canvas width={600} height={400} renderer={renderer}>
            <Circle
                cx={100}
                cy={200}
                r={size}
                fill="#1890FF"
                stroke="#F04864"
                lineWidth={4}
                onClick={() => {
                    setSize(100);
                }}
            />
        </Canvas>
    );
};

export default App;

使用 ref 访问形状实例

就像反应大小,你可以使用 ref 访问形状实例.

import React, { useState, useRef } from 'react';
import { Canvas, Circle } from '@antv/react-g';
import { Renderer as CanvasRenderer } from '@antv/g-canvas';

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}
                cx={100}
                cy={200}
                r={size}
                fill="#1890FF"
                stroke="#F04864"
                lineWidth={4}
                onClick={() => {
                    setSize(100);
                }}
            />
        </Canvas>
    );
};

export default App;

render 对目标克元素的反应-g组件

• 110. 反应-克-克-克-(Canvas/Group/Shape)/*/
• * 反应-克 * * g2,g6 * * *

import React, { useState } from 'react';
import { Canvas as GCanvas } from '@antv/g';
import { Circle, render } from '@antv/react-g';
import { Renderer as CanvasRenderer } from '@antv/g-canvas';

const renderer = new CanvasRenderer();

const CircleComponent = () => {
    const [size, setSize] = useState(50);
    return (
        <Circle
            cx={100}
            cy={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);