Construirea unui Calculator al zonei de geometrie JavaScript: Tutorial pentru dezvoltatori interactivi 2025
Creați un calculator interactiv al zonei poligonului folosind JavaScript. Formule de geometrie principală, calcule de coordonate și instrumente de măsurare bazate pe web atât pentru poligoane simple, cât și complexe.
Rendering article content...
Tags
Calculator de geometriecalculator de zonăcalculator din zona poligonuluicalculatorul zonei JavaScriptCalculați aria poligonuluiformula zonei de geometriecalculatorul interactiv al geometrieibiblioteca de geometrie JavaScriptalgoritmul ariei poligonuluiinstrumentul de calcul al zoneiAPI-ul de calcul al geometrieimăsurarea poligonuluiformularea de geometriecalculatorul bazat pe webzona poligonuluiformularul de calcul al geometrieicalculatorul bazat pe webzona poligonuluiformularul geometric pentru dezvoltatoricalculatorul bazat pe bazat Calculați zona JavaScriptCalculator de geometrie de coordonareinstrumente de geometrie a dezvoltatoruluicalculatorul zonei Google Maps
Un ghid aprofundat pentru crearea propriului dvs. calculator de geometrie interactivă folosind JavaScript, completat cu calcule de zonă pentru poligoane simple și complexe.
Introducere: De ce să construim un calculator de geometrie?
Calculele de geometrie constituie fundamentul numeroaselor aplicații din lumea reală-de la supraveghere și arhitectură la terenuri până la dezvoltarea jocurilor și sisteme de informații geografice.În calitate de dezvoltatori, de multe ori avem nevoie de instrumente fiabile pentru a calcula zonele diferitelor forme.În timp ce există multe calculatoare online disponibile, construirea propriilor oferte mai multe avantaje:
Personalizare completă pentru a se potrivi cu cerințele dvs. specifice ale proiectului
Flexibilitatea integrării cu aplicațiile web existente
Oportunitate de învățare pentru a înțelege geometria coordonată și gândirea algoritmică
Îmbunătățirea portofoliului pentru a vă prezenta abilitățile JavaScript
În acest tutorial cuprinzător, vom parcurge procesul de construire a unui calculator puternic și interactiv al zonei de geometrie folosind JavaScript.Până la sfârșit, veți avea o aplicație web complet funcțională, care calculează cu exactitate aria atât a poligonilor simpli, cât și a complexului, folosind geometria coordonatelor.
Ce vom construi
Calculatorul nostru de geometrie va:
Permiteți utilizatorilor să introducă coordonate de poligon printr -o interfață intuitivă
Calculați zonele atât pentru poligoane obișnuite, cât și neregulate
Susțineți mai multe unități de măsurare
Vizualizați formele folosind Canvas HTML
Oferiți rezultate clare și precise, cu rotunjire corectă
Lucrați pe toate browserele și dispozitivele majore
O previzualizare a calculatorului nostru final al zonei de geometrie JavaScript cu intrare interactivă a poligonului
Premise
Pentru a urma împreună cu acest tutorial, ar trebui să aveți:
Înțelegerea de bază a HTML, CSS și JavaScript
Familiaritatea cu manipularea Dom
Editor de text sau IDE (vs cod, text sublim, etc.)
Browser web modern
Opțional: Înțelegerea elementelor de bază ale geometriei coordonatelor
Înțelegerea matematicii din spatele calculelor zonei
Înainte de a ne scufunda în cod, să înțelegem principiile matematice care alimentează calculatorul nostru de geometrie.
Formula Shoelace pentru zona poligonului
Pentru calcularea zonei oricărui poligon (regulat sau neregulat), vom folosi formula Shoelace, cunoscută și sub denumirea de formulă a inspectorului sau a formulei de zonă a lui Gauss.Acest algoritm puternic funcționează pentru orice poligon definit de vârfurile sale, indiferent de cât de complexă ar putea fi forma.
Formula este exprimată ca:
Area = 0.5 * |∑(x_i * y_(i+1) - x_(i+1) * y_i)|
Unde:
x_i and y_i are the coordinates of the i-th vertex
Formula calculează jumătate din suma produselor încrucișate ale vârfurilor adiacente
Valoarea absolută asigură o zonă pozitivă
Această formulă funcționează prin „mersul” în jurul perimetrului poligonului, calculând produsele încrucișate între puncte consecutive.Când le rezumăm și le împărțim cu 2, obținem zona poligonului.
Configurarea proiectului
Să începem prin configurarea structurii de bază a calculatorului nostru de geometrie:
Structura 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">
<h2>Geometry Area Calculator</h2>
<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>
Stiluri CSS
Create a file named styles.css for styling our calculator:
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);
Reprezentarea vizuală a modului în care formula de șireni calculează aria unui poligon
Înțelegerea componentelor cheie
Să descompunem componentele majore ale calculatorului zonei noastre de geometrie:
Interacțiune cu pânză
Calculatorul nostru folosește un element de pânză HTML pentru crearea interactivă a poligonului.Utilizatorii pot:
Faceți clic pe pânză pentru a adăuga puncte
Trageți punctele existente pentru a regla pozițiile
Vezi vizualizarea în timp real a poligonului
Vizualizați o grilă de coordonate pentru referință
Pânza este configurată cu un sistem de coordonate în care (0,0) este în centru, ceea ce face intuitiv pentru utilizatori să lucreze atât cu coordonate pozitive, cât și negative.
Coordonează gestionarea intrării
Utilizatorii pot introduce coordonate în două moduri:
Intrare vizuală: Faceți clic direct pe pânză pentru a plasa puncte
Intrare manuală: Introduceți coordonate exacte în câmpurile de intrare
Cele două metode de intrare sunt sincronizate, permițând atât plasarea vizuală intuitivă, cât și intrarea numerică precisă.
Implementarea algoritmului Shoelace
Nucleul calculatorului nostru este implementarea formulei Shoelace:
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);
}
Această funcție:
Ia o serie de coordonate de vertex
Se buclează prin fiecare punct și următorul punct (înfășurându -se până la primul punct)
Aplică calculul produsului încrucișat
Ia valoarea absolută și se împarte cu 2 pentru a obține zona finală
Frumusețea acestui algoritm este că funcționează pentru orice poligon, indiferent dacă este convex sau concavă, atât timp cât nu se intersectează.
Adăugarea de funcții avansate
Acum că avem calculatorul de bază, să -l extindem cu câteva caracteristici avansate:
Conversia unității
Calculatorul nostru acceptă diferite unități de măsurare:
Pixeli: pentru măsurători bazate pe ecran
Contoare: pentru măsurători metrice din lumea reală
Picioare: pentru măsurători imperiale
Conversia unității se aplică după calculul zonei:
// 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;
}
Puteți personaliza factorii de conversie pe baza cerințelor dvs. specifice.
Interfața calculatorului care prezintă opțiuni de conversie a unității pentru diferite sisteme de măsurare
Etape de calcul detaliate
Pentru a ajuta utilizatorii să înțeleagă modul în care se calculează zona, oferim o defalcare detaliată a etapelor de calcul:
// 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>`;
}
Această transparență îi ajută pe utilizatori să verifice rezultatele și să afle despre principiile matematice din spatele calculelor din zona poligonului.
Testare și validare
Înainte de a lua în considerare finalul nostru de geometrie, să -l testăm cu unele forme cunoscute pentru a -i verifica exactitatea:
Cazul de testare 1: dreptunghi
Un dreptunghi simplu cu vârfuri la (0,0), (100,0), (100,50) și (0,50) ar trebui să aibă o suprafață de 5.000 de unități pătrate.
Cazul de testare 2: triunghiul
Un triunghi cu vârfuri la (0,0), (50.100) și (100,0) ar trebui să aibă o suprafață de 5.000 de unități pătrate.
Cazul de testare 3: poligon neregulat
Un poligon neregulat cu vârfuri la (0,0), (50.100), (100,50), (75,25) și (25,25) ar trebui să ne ofere suprafața corectă pe baza formulei de șireturi.
Pentru fiecare caz de testare, calculatorul nostru ar trebui:
Permiteți introducerea ușoară a coordonatelor de testare
Calculați zona corectă
Afișați pașii de calcul pentru verificare
Optimizarea dispozitivelor mobile
Pentru a face calculatorul nostru de geometrie pe deplin, putem adăuga următoarele îmbunătățiri:
Atingeți suportul pentru interacțiunea Canvas
Aspect receptiv care se adaptează la diferite dimensiuni ale ecranului
Interfață simplificată pentru ecrane mai mici
Aceste completări asigură că calculatorul nostru este utilizabil pe smartphone -uri și tablete, ceea ce îl face accesibil utilizatorilor de pe toate dispozitivele.
Îmbunătățiri suplimentare
Pentru a face calculatorul zonei noastre de geometrie și mai robust, luați în considerare implementarea acestor caracteristici suplimentare:
Forme prestabilite
Adăugați butoane pentru a crea rapid forme comune precum:
Pătrat
Dreptunghi
Triunghi
Cerc (aproximat ca poligon obișnuit)
Poligoni obișnuiți (Pentagon, Hexagon etc.)
Calculul zonei pentru cercuri
Extindeți calculatorul pentru a gestiona zonele de cerc folosind:
function calculateCircleArea(radius) {
return Math.PI * radius * radius;
}
Calculul perimetrului
Adăugați funcționalitate pentru a calcula perimetrul poligonilor:
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;
}
Salvarea și încărcarea poligoanelor
Implementați LocalStorage pentru a salva și încărca configurațiile poligonului:
// 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();
}
}
Aplicații practice
Diverse aplicații din lumea reală în care calculatoarele din zona de geometrie oferă soluții valoroase
Calculatorul nostru de zonă de geometrie JavaScript are numeroase aplicații practice:
Dezvoltare web
Hărți interactive și vizualizări de complot
Aplicații de supraveghere a terenurilor
Instrumente de planificare imobiliară
Aplicații de aspect și design de cameră
Educaţie
Predarea principiilor geometrice interactiv
Vizualizarea conceptelor matematice
Crearea de resurse interactive de învățare
Dezvoltarea jocului
Detectarea coliziunii pentru obiectele de joc
Proiectare la nivel și crearea mediului
Generarea procedurală a lumilor jocului
Concluzie
În acest tutorial cuprinzător, am construit un calculator puternic și interactiv al zonei de geometrie folosind JavaScript.Calculatorul nostru poate:
Calculați cu exactitate aria oricărui poligon folosind formula de șireturi
Oferiți o interfață vizuală intuitivă pentru crearea și modificarea formelor
Sprijinirea contribuției de coordonate manuale pentru măsurători precise
Convertiți între diferite unități de măsurare
Afișați pași detaliate de calcul în scopuri educaționale
Principiile și tehnicile pe care le -am acoperit - geometria coordonată, algoritmul SHOELACE, manipularea pânzei și designul interfeței de utilizator - sunt abilități valoroase care se extind dincolo de acest proiect specific.Le puteți aplica la diverse provocări de dezvoltare web, de la vizualizarea datelor la aplicații interactive.
Construind acest calculator de geometrie, nu numai că ați creat un instrument util, ci și -ați aprofundat înțelegerea conceptelor matematice și implementarea acestora în JavaScript.Simțiți -vă liber să extindeți calculatorul cu caracteristici suplimentare, să -i optimizați performanțele sau să -l integrați în propriile proiecte.
