如何在 ReactJS 中创建一个绘画应用程序？

在本文中，我们将构建一个简单的绘图应用程序，让您可以像在 MS-Paint 中一样进行绘图。通过本文，我们将学习如何在 React.js 中实现和使用画布。

我们的应用程序包含两个部分，一个用于绘图，另一个是用户可以自定义画笔颜色、宽度和不透明度的菜单。

先决条件：该项目的先决条件是：

• 反应
• 功能组件
• 反应钩子
• HTML 画布
• JavaScript ES6

创建一个 React 应用程序：

• 第 1 步：通过在终端中键入以下命令来创建一个反应应用程序：

npx create-react-app paint-app

• 第2步：现在，通过运行以下命令进入项目文件夹，即paint-app：

cd paint-app

项目结构：它看起来像这样：

文件名：App.js在这个文件中，我们将实现画布并使用它。这里我们创建了三个函数：startDrawing()、endDrawing() 和 draw()。主要思想是，每当鼠标按钮按下时，我们执行 startDrawing函数，以便光标知道 x 和 y 坐标（起始坐标），并将 isDrawing 状态切换为 true。现在，每当用户移动鼠标时，我们都会执行 draw函数，该函数将在当前 x 和 y 坐标中绘制一个笔划。如果用户抬起鼠标按钮，我们将执行 endDrawing函数，该函数将关闭笔画路径并同时将 isDrawing 状态切换为 false。现在在App.js组件中写下以下代码。

Javascript

import { useEffect, useRef, useState } from "react";
import Menu from "./components/Menu";
import "./App.css";
  
function App() {
  const canvasRef = useRef(null);
  const ctxRef = useRef(null);
  const [isDrawing, setIsDrawing] = useState(false);
  const [lineWidth, setLineWidth] = useState(5);
  const [lineColor, setLineColor] = useState("black");
  const [lineOpacity, setLineOpacity] = useState(0.1);
  
  // Initialization when the component
  // mounts for the first time
  useEffect(() => {
    const canvas = canvasRef.current;
    const ctx = canvas.getContext("2d");
    ctx.lineCap = "round";
    ctx.lineJoin = "round";
    ctx.globalAlpha = lineOpacity;
    ctx.strokeStyle = lineColor;
    ctx.lineWidth = lineWidth;
    ctxRef.current = ctx;
  }, [lineColor, lineOpacity, lineWidth]);
  
  // Function for starting the drawing
  const startDrawing = (e) => {
    ctxRef.current.beginPath();
    ctxRef.current.moveTo(
      e.nativeEvent.offsetX, 
      e.nativeEvent.offsetY
    );
    setIsDrawing(true);
  };
  
  // Function for ending the drawing
  const endDrawing = () => {
    ctxRef.current.closePath();
    setIsDrawing(false);
  };
  
  const draw = (e) => {
    if (!isDrawing) {
      return;
    }
    ctxRef.current.lineTo(
      e.nativeEvent.offsetX, 
      e.nativeEvent.offsetY
    );
      
    ctxRef.current.stroke();
  };
  
  return (
    

      
Paint App
      

        
        
      
    
  );
}
  
export default App;

文件名：Menu.js让我们创建一个菜单栏，用户可以在其中自定义画笔颜色、大小和不透明度。首先，在src文件夹下创建文件夹名称components 。然后在 components 文件夹中创建一个文件名Menu.jsx 。我们将在 App.js 文件中导入这个自定义组件。现在在Menu.jsx中写下以下代码

Javascript

import React from "react";
import "../App.css";
  
const Menu = ({ setLineColor, setLineWidth, 
setLineOpacity }) => {
  return (
    

      Brush Color 
       {
          setLineColor(e.target.value);
        }}
      />
      Brush Width 
       {
          setLineWidth(e.target.value);
        }}
      />
      Brush Opacity
       {
          setLineOpacity(e.target.value / 100);
        }}
      />
    
  );
};
  
export default Menu;

文件名：App.css让我们为我们的绘画应用设置样式。

CSS

@import url(
'https://fonts.googleapis.com/css2?family=Lobster&display=swap');
  
.App {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  background-image: linear-gradient(
    120deg, #fdfbfb 0%, #ebedee 100%);
}
  
h1 {
  font-family: 'Lobster', cursive;
  font-size: 50px;
  color: #4644f0;
}
  
.draw-area {
  width: 1280px;
  height: 720px;
  border: 2px solid #808080;
  position: relative;
  background-color: white;
}
  
.Menu {
  width: 650px;
  height: 50px;
  display: flex;
  justify-content: space-evenly;
  border-radius: 5px;
  align-items: center;
  background-color: #a3a3a32d;
  margin: auto;
  margin-top: 10px;
}

运行应用程序的步骤：使用以下命令从项目的根目录运行应用程序。

npm start

输出：现在打开浏览器并转到http://localhost:3000/ ，您将看到以下输出：