Proyecto | PizzaraJs

Introducción

El proyecto consiste en crear una aplicación web de una sola página (SPA) que permite dibujar figuras básicas como: círculo, triángulo, cuadrado, líneas y utilizar una herramienta de lápiz. Además, incluye opciones avanzadas como:

Modificación del color de los bordes y el fondo de cada figura.
Ajuste del grosor de los bordes para cada figura.

También se han implementado herramientas adicionales, como:

Gestión de capas.
Herramienta de borrador.
Exportar el lienzo en formato PNG o JPG.
Funcionalidades de rehacer y deshacer.
Exportar e importar lienzos en formato JSON.
Como características adicionales, se incluye la opción de dibujar una figura de corazón y agregar texto como herramienta.

El sitio es completamente adaptable (responsive), optimizado para dispositivos táctiles, tabletas, laptops y computadoras de escritorio. Además, incluye mejoras de accesibilidad como tooltips para cada herramienta.

Ver proyecto (GitHub Pages)

Funciones

El sitio web usa react-router-dom, componentes, custom hooks , context y provider para el funcionamiento del sitio con React. Además de usar e incluir módulos externos de npm para React.

Este sitio web tiene las siguientes funciones:

Dibujar trazos
Capas

Agregar
Eliminar
Ocultar
Activar

Dibujar formas

Círculo
Cuadrado
Triángulo
Corazón
Línea
Lápiz
Texto

Exportar e importar capas, trazos y formas en un archivo JSON
Deshacer y Rehacer capas, trazos y formas
Exportar a imagen PNG y JPG
Modificar herramientas para cada forma
Herramienta de borrador

Este conjunto de tecnologías y características para este sitio web:

Proyecto dockerizado. (*)
Proyecto vagratizado. (*)
Estilos de Tailwind CSS
Componentes funcionales de ReactJS
Hooks personalizados
Context y Provider
Canvas HTML 5
React Icons (Bootstrap)
React Tooltip
Etiquetas de Open Graph (para SEO)

¿Cómo funciona?

Al entrar al sitio web, por defecto se selecciona la herramienta de lápiz, que puedes comenzar a dibujar sobre la pizarra, el sitio web tiene un sistema de historial para deshacer y rehacer los trazos.

Al hacer clic en el botón, que está a un lado del logo, se mostrará las herramientas avanzadas, con que, puedes crear capas ocultar y mostrar capas, puedes exportar el dibujo en una imagen PNG o JPG, puedes exportar en un archivo JSON e importar un JSON de los trazos dibujados.

Adicionalmente, puedes presionar cambiar de herramienta para dibujar formas, tales como: