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:
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.
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 ( <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
Javascript
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.
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; }
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: