React里的轻便小巧的画图工具

2023-10-14 08:44:19

在React中创建画图工具

创建一个React画图工具很简单，只需要几个步骤：

创建一个新的React项目。
在项目中安装canvas库。
创建一个新的React组件来渲染画布。
在组件中添加事件监听器来处理鼠标事件。
在事件监听器中，使用canvas API来绘制形状。

下面是一个简单的React画图工具的示例代码：

import React, { useState, useEffect, useRef } from "react";
import "./styles.css";

const Canvas = () => {
  const [isDrawing, setIsDrawing] = useState(false);
  const [color, setColor] = useState("black");
  const canvasRef = useRef(null);

  useEffect(() => {
    const canvas = canvasRef.current;
    const context = canvas.getContext("2d");

    canvas.addEventListener("mousedown", (e) => {
      setIsDrawing(true);
      context.beginPath();
      context.moveTo(e.clientX, e.clientY);
    });

    canvas.addEventListener("mousemove", (e) => {
      if (isDrawing) {
        context.lineTo(e.clientX, e.clientY);
        context.stroke();
      }
    });

    canvas.addEventListener("mouseup", () => {
      setIsDrawing(false);
    });

    return () => {
      canvas.removeEventListener("mousedown", () => {});
      canvas.removeEventListener("mousemove", () => {});
      canvas.removeEventListener("mouseup", () => {});
    };
  }, [isDrawing, color]);

  return (
    <div className="canvas-container">
      <canvas ref={canvasRef} width={800} height={600} />
    </div>
  );
};

export default Canvas;