当前位置：首页 > React

react实现画图

2026-01-26 15:40:29React

React 实现画图的方法

React 可以通过多种方式实现画图功能，以下是几种常见的方法：

使用 Canvas API

Canvas API 是 HTML5 提供的原生画图工具，适合绘制复杂的图形或动画。

react实现画图

import React, { useRef, useEffect } from 'react';

const CanvasDrawing = () => {
  const canvasRef = useRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext('2d');

    // 绘制矩形
    ctx.fillStyle = 'blue';
    ctx.fillRect(10, 10, 100, 100);

    // 绘制圆形
    ctx.beginPath();
    ctx.arc(200, 60, 50, 0, Math.PI * 2);
    ctx.fillStyle = 'red';
    ctx.fill();
  }, []);

  return <canvas ref={canvasRef} width={300} height={150} />;
};

export default CanvasDrawing;

使用 SVG

SVG 是一种矢量图形格式，适合绘制可缩放的图形。

import React from 'react';

const SVGDrawing = () => {
  return (
    <svg width="300" height="150">
      <rect x="10" y="10" width="100" height="100" fill="blue" />
      <circle cx="200" cy="60" r="50" fill="red" />
    </svg>
  );
};

export default SVGDrawing;

使用第三方库

如果需要更高级的功能，可以使用第三方库如 react-konva 或 fabric.js。

react实现画图

react-konva 示例：

import React from 'react';
import { Stage, Layer, Rect, Circle } from 'react-konva';

const KonvaDrawing = () => {
  return (
    <Stage width={300} height={150}>
      <Layer>
        <Rect x={10} y={10} width={100} height={100} fill="blue" />
        <Circle x={200} y={60} radius={50} fill="red" />
      </Layer>
    </Stage>
  );
};

export default KonvaDrawing;

使用 D3.js

D3.js 是一个强大的数据可视化库，适合绘制数据驱动的图形。

import React, { useRef, useEffect } from 'react';
import * as d3 from 'd3';

const D3Drawing = () => {
  const svgRef = useRef(null);

  useEffect(() => {
    const svg = d3.select(svgRef.current);

    svg.append('rect')
      .attr('x', 10)
      .attr('y', 10)
      .attr('width', 100)
      .attr('height', 100)
      .attr('fill', 'blue');

    svg.append('circle')
      .attr('cx', 200)
      .attr('cy', 60)
      .attr('r', 50)
      .attr('fill', 'red');
  }, []);

  return <svg ref={svgRef} width={300} height={150} />;
};

export default D3Drawing;