Construyendo una calculadora de área de geometría de JavaScript: Tutorial de desarrolladores interactivos 2025
Anh Quân
Creator
Tabla de contenido
- Introducción: ¿Por qué construir una calculadora de geometría?
- Lo que construiremos
- Requisitos previos
- Comprender las matemáticas detrás de los cálculos de área
- Configuración del proyecto
- Implementación de JavaScript
- Comprender los componentes clave
- Agregar características avanzadas
- Prueba y validación
- Optimización de dispositivos móviles
- Mejoras adicionales
- Aplicaciones prácticas
- Conclusión
- Recursos para un mayor aprendizaje
Una guía en profundidad para crear su propia calculadora de geometría interactiva utilizando JavaScript, completo con cálculos de área para polígonos simples y complejos.
Introducción: ¿Por qué construir una calculadora de geometría?
Los cálculos de geometría forman la base de numerosas aplicaciones del mundo real, desde la topografía y la arquitectura hasta el desarrollo de juegos y los sistemas de información geográfica.Como desarrolladores, a menudo necesitamos herramientas confiables para calcular las áreas de varias formas.Si bien hay muchas calculadoras en línea disponibles, la construcción de su propia ofrece varias ventajas:
- Personalización completa para adaptarse a los requisitos específicos del proyecto
- Flexibilidad de integración con sus aplicaciones web existentes
- Oportunidad de aprendizaje para comprender la geometría de coordenadas y el pensamiento algorítmico
- Mejora de la cartera para mostrar sus habilidades de JavaScript
En este tutorial integral, caminaremos por el proceso de construcción de una potente calculadora de área de geometría interactiva utilizando JavaScript.Al final, tendrá una aplicación web completamente funcional que calcula con precisión el área de polígonos simples y complejos utilizando la geometría de coordenadas.
Lo que construiremos
Nuestra calculadora de geometría:
- Permitir a los usuarios ingresar coordenadas Polígono a través de una interfaz intuitiva
- Calcular áreas para polígonos regulares e irregulares
- Apoyar múltiples unidades de medición
- Visualice las formas con lienzo HTML
- Proporcionar resultados claros y precisos con un redondeo adecuado
- Trabajar en todos los principales navegadores y dispositivos
Una vista previa de nuestra calculadora final de área de geometría de JavaScript con entrada de polígono interactivo
Requisitos previos
Para seguir junto con este tutorial, deberías tener:
- Comprensión básica de HTML, CSS y JavaScript
- Familiaridad con la manipulación DOM
- Editor de texto o IDE (vs código, texto sublime, etc.)
- Navegador web moderno
- Opcional: Comprensión de los conceptos básicos de geometría de coordenadas
Comprender las matemáticas detrás de los cálculos de área
Antes de sumergirnos en el código, comprendamos los principios matemáticos que alimentan nuestra calculadora de geometría.
La fórmula de los zapatos para el área de polígono
Para calcular el área de cualquier polígono (regular o irregular), usaremos la fórmula de los zapatos, también conocida como fórmula del topógrafo o la fórmula del área de Gauss.Este poderoso algoritmo funciona para cualquier polígono definido por sus vértices, independientemente de cuán compleja podría ser la forma.
La fórmula se expresa como:
Area = 0.5 * |∑(x_i * y_(i+1) - x_(i+1) * y_i)| Dónde:
x_iandy_iare the coordinates of the i-th vertex- La fórmula calcula la mitad de la suma de los productos cruzados de los vértices adyacentes
- El valor absoluto asegura un área positiva
Esta fórmula funciona "caminando" alrededor del perímetro del polígono, calculando productos cruzados entre puntos consecutivos.Cuando resumimos estos y dividimos por 2, obtenemos el área del polígono.
Configuración del proyecto
Comencemos configurando la estructura básica de nuestra calculadora de geometría:
Estructura html
Create a new file named index.html with the following structure:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Geometry Area Calculator</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="calculator-container">
<h1>Geometry Area Calculator</h1>
<div class="input-section">
<h2>Enter Polygon Coordinates</h2>
<p>Click on the canvas to add points or enter them manually below.</p>
<div class="canvas-container">
<canvas id="polygon-canvas" width="400" height="400"></canvas>
<button id="clear-canvas">Clear Canvas</button>
</div>
<div class="manual-input">
<div class="coordinates-container" id="coordinates-list">
<div class="coordinate-pair">
<input type="number" placeholder="X1" class="x-coord">
<input type="number" placeholder="Y1" class="y-coord">
<button class="remove-point">×</button>
</div>
</div>
<button id="add-point">Add Point</button>
</div>
<div class="units-selection">
<label for="units">Measurement Units:</label>
<select id="units">
<option value="pixels">Pixels</option>
<option value="meters">Meters</option>
<option value="feet">Feet</option>
</select>
</div>
<button id="calculate-area">Calculate Area</button>
</div>
<div class="results-section" id="results">
<!-- Results will be displayed here -->
</div>
</div>
<script src="script.js"></script>
</body>
</html>Estilo CSS
Create a file named styles.css for styling our calculator:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: #f5f5f5;
padding: 20px;
}
.calculator-container {
max-width: 800px;
margin: 0 auto;
background-color: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
margin-bottom: 30px;
}
h2 {
font-size: 1.5rem;
margin-bottom: 15px;
color: #444;
}
p {
margin-bottom: 20px;
color: #666;
}
.canvas-container {
margin-bottom: 30px;
text-align: center;
}
canvas {
border: 1px solid #ccc;
background-color: #f9f9f9;
}
.manual-input {
margin-bottom: 25px;
}
.coordinates-container {
max-height: 200px;
overflow-y: auto;
margin-bottom: 15px;
}
.coordinate-pair {
display: flex;
margin-bottom: 8px;
align-items: center;
}
input {
width: 80px;
padding: 8px;
margin-right: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
padding: 8px 15px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #45a049;
}
.remove-point {
background-color: #f44336;
padding: 8px 12px;
}
.remove-point:hover {
background-color: #d32f2f;
}
#clear-canvas {
margin-top: 10px;
}
.units-selection {
margin-bottom: 25px;
}
select {
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}
.results-section {
margin-top: 30px;
padding: 20px;
background-color: #f0f8ff;
border-radius: 6px;
display: none;
}
.results-section.active {
display: block;
}
.area-result {
font-size: 1.3rem;
margin-bottom: 15px;
}
.calculation-steps {
margin-top: 20px;
padding: 15px;
background-color: #f5f5f5;
border-radius: 4px;
font-family: monospace;
}Implementación de JavaScript
Now, let's create the script.js file that will power our geometry area calculator:
// DOM Elements
const canvas = document.getElementById('polygon-canvas');
const ctx = canvas.getContext('2d');
const clearCanvasBtn = document.getElementById('clear-canvas');
const addPointBtn = document.getElementById('add-point');
const coordinatesList = document.getElementById('coordinates-list');
const calculateBtn = document.getElementById('calculate-area');
const resultsSection = document.getElementById('results');
const unitsSelect = document.getElementById('units');
// Global Variables
let points = [];
let isDragging = false;
let dragIndex = -1;
// Canvas Setup
function setupCanvas() {
// Set canvas coordinate system (origin at center)
ctx.translate(canvas.width / 2, canvas.height / 2);
drawGrid();
// Event listeners for canvas interaction
canvas.addEventListener('mousedown', handleMouseDown);
canvas.addEventListener('mousemove', handleMouseMove);
canvas.addEventListener('mouseup', () => isDragging = false);
// Redraw canvas initially
redrawCanvas();
}
// Draw coordinate grid
function drawGrid() {
const width = canvas.width;
const height = canvas.height;
ctx.strokeStyle = '#e0e0e0';
ctx.lineWidth = 1;
// Vertical lines
for (let x = -width/2; x <= width/2; x += 20) {
ctx.beginPath();
ctx.moveTo(x, -height/2);
ctx.lineTo(x, height/2);
ctx.stroke();
}
// Horizontal lines
for (let y = -height/2; y <= height/2; y += 20) {
ctx.beginPath();
ctx.moveTo(-width/2, y);
ctx.lineTo(width/2, y);
ctx.stroke();
}
// X and Y axes (darker)
ctx.strokeStyle = '#aaa';
ctx.lineWidth = 2;
// X-axis
ctx.beginPath();
ctx.moveTo(-width/2, 0);
ctx.lineTo(width/2, 0);
ctx.stroke();
// Y-axis
ctx.beginPath();
ctx.moveTo(0, -height/2);
ctx.lineTo(0, height/2);
ctx.stroke();
}
// Handle mouse down event on canvas
function handleMouseDown(e) {
const rect = canvas.getBoundingClientRect();
const scaleX = canvas.width / rect.width;
const scaleY = canvas.height / rect.height;
const canvasX = (e.clientX - rect.left) * scaleX - canvas.width / 2;
const canvasY = (e.clientY - rect.top) * scaleY - canvas.height / 2;
// Check if clicking near an existing point (for dragging)
for (let i = 0; i < points.length; i++) {
const dx = points[i].x - canvasX;
const dy = points[i].y - canvasY;
const distance = Math.sqrt(dx * dx + dy * dy);
if (distance < 10) {
isDragging = true;
dragIndex = i;
return;
}
}
// If not dragging, add a new point
points.push({x: canvasX, y: canvasY});
updateCoordinateInputs();
redrawCanvas();
}
// Handle mouse move event on canvas
function handleMouseMove(e) {
if (!isDragging || dragIndex === -1) return;
const rect = canvas.getBoundingClientRect();
const scaleX = canvas.width / rect.width;
const scaleY = canvas.height / rect.height;
const canvasX = (e.clientX - rect.left) * scaleX - canvas.width / 2;
const canvasY = (e.clientY - rect.top) * scaleY - canvas.height / 2;
points[dragIndex] = {x: canvasX, y: canvasY};
updateCoordinateInputs();
redrawCanvas();
}
// Redraw the canvas with all points and connections
function redrawCanvas() {
// Clear the canvas
ctx.clearRect(-canvas.width/2, -canvas.height/2, canvas.width, canvas.height);
// Redraw the grid
drawGrid();
if (points.length === 0) return;
// Draw the polygon
ctx.beginPath();
ctx.moveTo(points[0].x, points[0].y);
for (let i = 1; i < points.length; i++) {
ctx.lineTo(points[i].x, points[i].y);
}
// Connect back to the first point if we have at least 3 points
if (points.length >= 3) {
ctx.lineTo(points[0].x, points[0].y);
// Fill the polygon with a semi-transparent color
ctx.fillStyle = 'rgba(76, 175, 80, 0.2)';
ctx.fill();
}
// Draw the polygon outline
ctx.strokeStyle = '#4CAF50';
ctx.lineWidth = 2;
ctx.stroke();
// Draw the points
for (let i = 0; i < points.length; i++) {
ctx.beginPath();
ctx.arc(points[i].x, points[i].y, 5, 0, Math.PI * 2);
ctx.fillStyle = '#4CAF50';
ctx.fill();
// Label the points
ctx.fillStyle = '#333';
ctx.font = '12px Arial';
ctx.fillText(`P${i+1}`, points[i].x + 8, points[i].y - 8);
}
}
// Update the coordinate inputs based on canvas points
function updateCoordinateInputs() {
// Clear all existing inputs
coordinatesList.innerHTML = '';
// Add new inputs for each point
for (let i = 0; i < points.length; i++) {
const pair = document.createElement('div');
pair.className = 'coordinate-pair';
const xInput = document.createElement('input');
xInput.type = 'number';
xInput.className = 'x-coord';
xInput.placeholder = `X${i+1}`;
xInput.value = Math.round(points[i].x);
xInput.dataset.index = i;
const yInput = document.createElement('input');
yInput.type = 'number';
yInput.className = 'y-coord';
yInput.placeholder = `Y${i+1}`;
yInput.value = Math.round(points[i].y);
yInput.dataset.index = i;
const removeBtn = document.createElement('button');
removeBtn.className = 'remove-point';
removeBtn.textContent = '×';
removeBtn.dataset.index = i;
pair.appendChild(xInput);
pair.appendChild(yInput);
pair.appendChild(removeBtn);
coordinatesList.appendChild(pair);
// Event listeners for manual input changes
xInput.addEventListener('change', updatePointFromInput);
yInput.addEventListener('change', updatePointFromInput);
removeBtn.addEventListener('click', removePoint);
}
}
// Update a point from manual input
function updatePointFromInput(e) {
const index = parseInt(e.target.dataset.index);
const value = parseFloat(e.target.value);
if (isNaN(value)) return;
if (e.target.className === 'x-coord') {
points[index].x = value;
} else {
points[index].y = value;
}
redrawCanvas();
}
// Remove a point
function removePoint(e) {
const index = parseInt(e.target.dataset.index);
points.splice(index, 1);
updateCoordinateInputs();
redrawCanvas();
}
// Add a new point via button
function addNewPoint() {
// Add a new point at (0, 0) or near the last point if one exists
if (points.length > 0) {
const lastPoint = points[points.length - 1];
points.push({x: lastPoint.x + 20, y: lastPoint.y + 20});
} else {
points.push({x: 0, y: 0});
}
updateCoordinateInputs();
redrawCanvas();
}
// Clear all points
function clearCanvas() {
points = [];
updateCoordinateInputs();
redrawCanvas();
resultsSection.style.display = 'none';
}
// Calculate area using the Shoelace formula
function calculatePolygonArea(vertices) {
if (vertices.length < 3) return 0;
let area = 0;
const n = vertices.length;
for (let i = 0; i < n; i++) {
const j = (i + 1) % n;
area += vertices[i].x * vertices[j].y;
area -= vertices[j].x * vertices[i].y;
}
return Math.abs(area / 2);
}
// Display the calculation results
function displayResults() {
if (points.length < 3) {
alert("You need at least 3 points to calculate area.");
return;
}
const area = calculatePolygonArea(points);
const selectedUnit = unitsSelect.value;
let unitSymbol = 'px²';
let convertedArea = area;
// Apply unit conversions if needed
if (selectedUnit === 'meters') {
unitSymbol = 'm²';
// Assuming 1 pixel = 0.01 meter for example
convertedArea = area * 0.0001;
} else if (selectedUnit === 'feet') {
unitSymbol = 'ft²';
// Assuming 1 pixel = 0.0328 feet
convertedArea = area * 0.001;
}
// Format the result
const formattedArea = convertedArea.toFixed(2);
// Create the result HTML
let resultHTML = `
<h2>Calculation Results</h2>
<div class="area-result">
<strong>Polygon Area:</strong> ${formattedArea} ${unitSymbol}
</div>
<p>Based on ${points.length} vertices</p>
<div class="calculation-steps">
<h3>Calculation Steps:</h3>
<p>Using the Shoelace formula: A = 0.5 × |∑(xᵢyᵢ₊₁ − xᵢ₊₁yᵢ)|</p>
<ol>
`;
// Add the calculation steps
for (let i = 0; i < points.length; i++) {
const j = (i + 1) % points.length;
const term = (points[i].x * points[j].y - points[j].x * points[i].y).toFixed(2);
resultHTML += `<li>Step ${i+1}: (${points[i].x} × ${points[j].y}) - (${points[j].x} × ${points[i].y}) = ${term}</li>`;
}
resultHTML += `
</ol>
<p>Summing all steps and taking absolute value: ${Math.abs(area).toFixed(2)}</p>
<p>Dividing by 2: ${(Math.abs(area)/2).toFixed(2)}</p>
</div>
`;
resultsSection.innerHTML = resultHTML;
resultsSection.style.display = 'block';
resultsSection.scrollIntoView({ behavior: 'smooth' });
}
// Initialize the application
function init() {
setupCanvas();
// Event listeners
clearCanvasBtn.addEventListener('click', clearCanvas);
addPointBtn.addEventListener('click', addNewPoint);
calculateBtn.addEventListener('click', displayResults);
}
// Start the app when the page loads
window.addEventListener('load', init);
Representación visual de cómo la fórmula de Shoelace calcula el área de un polígono
Comprender los componentes clave
Desglosemos los componentes principales de nuestra calculadora del área de geometría:
Interacción de lona
Nuestra calculadora utiliza un elemento de lona HTML para la creación de polígono interactivo.Los usuarios pueden:
- Haga clic en el lienzo para agregar puntos
- Arrastre los puntos existentes para ajustar las posiciones
- Ver visualización en tiempo real del polígono
- Ver una cuadrícula de coordenadas como referencia
El lienzo se configura con un sistema de coordenadas donde (0,0) está en el centro, lo que hace que sea intuitivo que los usuarios trabajen con coordenadas positivas y negativas.
Coordinar la gestión de insumos
Los usuarios pueden ingresar coordenadas de dos maneras:
- Entrada visual: haga clic directamente en el lienzo para colocar puntos
- Entrada manual: ingrese coordenadas exactas en los campos de entrada
Los dos métodos de entrada se sincronizan, lo que permite la colocación visual intuitiva y la entrada numérica precisa.
La implementación del algoritmo de zapato
El núcleo de nuestra calculadora es la implementación de la fórmula de zapato:
function calculatePolygonArea(vertices) {
if (vertices.length < 3) return 0;
let area = 0;
const n = vertices.length;
for (let i = 0; i < n; i++) {
const j = (i + 1) % n;
area += vertices[i].x * vertices[j].y;
area -= vertices[j].x * vertices[i].y;
}
return Math.abs(area / 2);
}Esta función:
- Toma una variedad de coordenadas de vértice
- Bucles a través de cada punto y el siguiente punto (envolviendo hasta el primer punto)
- Aplica el cálculo de productos cruzados
- Toma el valor absoluto y se divide por 2 para obtener el área final
La belleza de este algoritmo es que funciona para cualquier polígono, independientemente de si es convexo o cóncavo, siempre que no se cruze.
Agregar características avanzadas
Ahora que tenemos la calculadora básica funcionando, extendamos con algunas características avanzadas:
Conversión de unidades
Nuestra calculadora admite diferentes unidades de medición:
- Píxeles: para medidas basadas en pantalla
- Medidores: para mediciones métricas del mundo real
- Pies: para medidas imperiales
La conversión de la unidad se aplica después del cálculo del área:
// Apply unit conversions if needed
if (selectedUnit === 'meters') {
unitSymbol = 'm²';
// Assuming 1 pixel = 0.01 meter for example
convertedArea = area * 0.0001;
} else if (selectedUnit === 'feet') {
unitSymbol = 'ft²';
// Assuming 1 pixel = 0.0328 feet
convertedArea = area * 0.001;
}Puede personalizar los factores de conversión en función de sus requisitos específicos.
La interfaz de la calculadora que muestra las opciones de conversión de la unidad para diferentes sistemas de medición
Pasos de cálculo detallados
Para ayudar a los usuarios a comprender cómo se calcula el área, proporcionamos un desglose detallado de los pasos de cálculo:
// Add the calculation steps
for (let i = 0; i < points.length; i++) {
const j = (i + 1) % points.length;
const term = (points[i].x * points[j].y - points[j].x * points[i].y).toFixed(2);
resultHTML += `<li>Step ${i+1}: (${points[i].x} × ${points[j].y}) - (${points[j].x} × ${points[i].y}) = ${term}</li>`;
}Esta transparencia ayuda a los usuarios a verificar los resultados y aprender sobre los principios matemáticos detrás de los cálculos del área de polígono.
Prueba y validación
Antes de considerar nuestra calculadora de geometría completa, pruebemos con algunas formas conocidas para verificar su precisión:
Caso de prueba 1: rectángulo
Un rectángulo simple con vértices en (0,0), (100,0), (100,50) y (0,50) debe tener un área de 5,000 unidades cuadradas.
Caso de prueba 2: Triángulo
Un triángulo con vértices en (0,0), (50,100) y (100,0) debe tener un área de 5,000 unidades cuadradas.
Caso de prueba 3: polígono irregular
Un polígono irregular con vértices en (0,0), (50,100), (100,50), (75,25) y (25,25) debería darnos el área correcta basada en la fórmula de los zapatos.
Para cada caso de prueba, nuestra calculadora debe:
- Permitir una entrada fácil de las coordenadas de prueba
- Calcule el área correcta
- Muestra los pasos de cálculo para la verificación
Optimización de dispositivos móviles
Para que nuestra calculadora de geometría sea completamente sensible, podemos agregar las siguientes mejoras:
- Soporte táctil para la interacción de lienzo
- Diseño receptivo que se adapta a diferentes tamaños de pantalla
- Interfaz simplificada para pantallas más pequeñas
Estas adiciones aseguran que nuestra calculadora se pueda usar en teléfonos inteligentes y tabletas, lo que la hace accesible para los usuarios en todos los dispositivos.
Mejoras adicionales
Para que nuestra calculadora de área de geometría sea aún más robusta, considere implementar estas características adicionales:
Formas preestablecidas
Agregue botones para crear rápidamente formas comunes como:
- Cuadrado
- Rectángulo
- Triángulo
- Círculo (aproximado como un polígono regular)
- Polígonos regulares (Pentágono, Hexágono, etc.)
Cálculo de área para círculos
Extienda la calculadora para manejar las áreas del círculo usando:
function calculateCircleArea(radius) {
return Math.PI * radius * radius;
}Cálculo del perímetro
Agregue la funcionalidad para calcular el perímetro de los polígonos:
function calculatePolygonPerimeter(vertices) {
let perimeter = 0;
const n = vertices.length;
for (let i = 0; i < n; i++) {
const j = (i + 1) % n;
const dx = vertices[j].x - vertices[i].x;
const dy = vertices[j].y - vertices[i].y;
perimeter += Math.sqrt(dx * dx + dy * dy);
}
return perimeter;
}Guardar y cargar polígonos
Implementar LocalStorage para guardar y cargar configuraciones de polígono:
// Save polygon
function savePolygon(name) {
const polygonData = JSON.stringify(points);
localStorage.setItem(`polygon_${name}`, polygonData);
}
// Load polygon
function loadPolygon(name) {
const polygonData = localStorage.getItem(`polygon_${name}`);
if (polygonData) {
points = JSON.parse(polygonData);
updateCoordinateInputs();
redrawCanvas();
}
}Aplicaciones prácticas
Varias aplicaciones del mundo real donde las calculadoras del área de geometría proporcionan soluciones valiosas
Nuestra calculadora de área de geometría JavaScript tiene numerosas aplicaciones prácticas:
Desarrollo web
- Mapas interactivos y visualizaciones de la trama
- Aplicaciones de topografía de tierras
- Herramientas de planificación inmobiliaria
- Diseño de la habitación y aplicaciones de diseño
Educación
- Enseñar principios geométricos interactivamente
- Visualización de conceptos matemáticos
- Creación de recursos de aprendizaje interactivo
Desarrollo del juego
- Detección de colisión para objetos de juego
- Diseño de nivel y creación de entorno
- Generación de procedimientos de mundos de juegos
Conclusión
En este tutorial integral, hemos creado una potente calculadora de área de geometría interactiva utilizando JavaScript.Nuestra calculadora puede:
- Calcule con precisión el área de cualquier polígono utilizando la fórmula de los zapatos
- Proporcionar una interfaz visual intuitiva para crear y modificar formas
- Admitir entrada de coordenadas manuales para mediciones precisas
- Convertir entre diferentes unidades de medición
- Mostrar pasos de cálculo detallados para fines educativos
Los principios y técnicas que hemos cubierto (geometría de coordenadas, algoritmo de zapato, manipulación de lienzo y diseño de interfaz de usuario) son habilidades valiosas que se extienden más allá de este proyecto específico.Puede aplicarlos a varios desafíos de desarrollo web, desde la visualización de datos hasta las aplicaciones interactivas.
Al construir esta calculadora de geometría, no solo ha creado una herramienta útil, sino que también ha profundizado su comprensión de los conceptos matemáticos y su implementación en JavaScript.Siéntase libre de extender la calculadora con características adicionales, optimizar su rendimiento o integrarla en sus propios proyectos.
¡Feliz codificación!