¿Cómo crear una aplicación Paint en ReactJS?

En este artículo, crearemos una aplicación de pintura simple que le permite dibujar como en MS-Paint. A través de este artículo, aprenderemos cómo implementar y trabajar con canvas en React.js.

Nuestra aplicación contiene dos secciones, una para dibujar y la otra es un menú donde el usuario puede personalizar el color, el ancho y la opacidad del pincel.

Requisitos previos: Los requisitos previos para este proyecto son:

• Reaccionar
• Componentes funcionales
• Ganchos de reacción
• Lienzo HTML
• Javascript ES6

Creando una aplicación React:

• Paso 1: Cree una aplicación de reacción escribiendo el siguiente comando en la terminal:

npx create-react-app paint-app

• Paso 2: ahora, vaya a la carpeta del proyecto, es decir, aplicación de pintura, ejecutando el siguiente comando:

cd paint-app

Estructura del proyecto: Se verá así:

Nombre de archivo: App.js En este archivo implementaremos el lienzo y trabajaremos con él. Aquí creamos tres funciones: startDrawing(), endDrawing() y draw(). La idea principal es que cada vez que el botón del mouse está presionado, ejecutamos la función startDrawing para que el cursor conozca las coordenadas x e y (coordenadas iniciales) y cambiamos el estado isDrawing a verdadero. Ahora, cada vez que el usuario mueve el mouse, ejecutamos la función de dibujo que dibujará un trazo en las coordenadas x e y actuales. Si el usuario levanta el botón del mouse, ejecutamos la función endDrawing que cerrará la ruta del trazo y cambiará el estado isDrawing a falso simultáneamente. Ahora escriba el siguiente código en el componente App.js.

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 (
    <div className="App">
      <h1>Paint App</h1>
      <div className="draw-area">
        <Menu
          setLineColor={setLineColor}
          setLineWidth={setLineWidth}
          setLineOpacity={setLineOpacity}
        />
        <canvas
          onMouseDown={startDrawing}
          onMouseUp={endDrawing}
          onMouseMove={draw}
          ref={canvasRef}
          width={`1280px`}
          height={`720px`}
        />
      </div>
    </div>
  );
}
  
export default App;

Nombre de archivo: Menu.js Vamos a crear una barra de menú donde los usuarios puedan personalizar el color, el tamaño y la opacidad del pincel. Primero, cree una carpeta de componentes de nombre en la carpeta src . Luego cree un nombre de archivo Menu.jsx dentro de la carpeta de componentes. Importaremos este componente personalizado dentro del archivo App.js. Ahora escribe el siguiente código en Menu.jsx

import React from "react";
import "../App.css";
  
const Menu = ({ setLineColor, setLineWidth, 
setLineOpacity }) => {
  return (
    <div className="Menu">
      <label>Brush Color </label>
      <input
        type="color"
        onChange={(e) => {
          setLineColor(e.target.value);
        }}
      />
      <label>Brush Width </label>
      <input
        type="range"
        min="3"
        max="20"
        onChange={(e) => {
          setLineWidth(e.target.value);
        }}
      />
      <label>Brush Opacity</label>
      <input
        type="range"
        min="1"
        max="100"
        onChange={(e) => {
          setLineOpacity(e.target.value / 100);
        }}
      />
    </div>
  );
};
  
export default Menu;

Nombre de archivo: App.css Vamos a diseñar nuestra aplicación de pintura.

@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;
}

Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto.

npm start

Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida: