Construire une zone de géométrie JavaScript Calculatrice: Tutoriel de développeur interactif 2025
Créez une calculatrice interactive de la zone de polygone à l'aide de JavaScript. Formules de géométrie maître, calculs de coordonnées et outils de mesure basés sur le Web pour les polygones simples et complexes.
Rendering article content...
Calculatrice de géométriecalculateur de zonecalculateur de zone de polygonecalculateur de zone JavaScriptzone de polygoneformule de la zone de géométriecalculatrice de géométrie interactiveAPI de géométrie JavaScriptMesure de polygoneprogrammation de géométriezone de conduite Javascript JavaScriptcalculatrice de géométrie de coordonnéesoutils de géométrie du développeurcalculatrice de la zone Google Maps
Un guide approfondi pour créer votre propre calculatrice de géométrie interactive à l'aide de JavaScript, avec des calculs de zone pour des polygones simples et complexes.
Introduction: Pourquoi construire un calculatrice de géométrie?
Les calculs de géométrie constituent le fondement de nombreuses applications du monde réel - de l'arpentage des terres et de l'architecture au développement de jeux et aux systèmes d'information géographique.En tant que développeurs, nous avons souvent besoin d'outils fiables pour calculer les zones de différentes formes.Bien qu'il existe de nombreux calculatrices en ligne, construisant vos propres offres plusieurs avantages:
Personnalisation complète pour répondre aux exigences de projet spécifiques
Flexibilité d'intégration avec vos applications Web existantes
Possibilité d'apprentissage pour comprendre la géométrie des coordonnées et la pensée algorithmique
Amélioration du portefeuille pour présenter vos compétences JavaScript
Dans ce tutoriel complet, nous allons parcourir le processus de construction d'un calculateur de zone de géométrie interactif puissant à l'aide de JavaScript.À la fin, vous aurez une application Web entièrement fonctionnelle qui calcule avec précision la zone des polygones simples et complexes en utilisant la géométrie des coordonnées.
Ce que nous allons construire
Notre calculatrice de géométrie sera:
Permettre aux utilisateurs de saisir les coordonnées de polygone via une interface intuitive
Calculer les zones pour les polygones réguliers et irréguliers
Prise en charge de plusieurs unités de mesure
Visualisez les formes à l'aide de toile HTML
Fournir des résultats clairs et précis avec un arrondi approprié
Travailler sur tous les principaux navigateurs et appareils
Un aperçu de notre final Calculatrice de la zone de géométrie JavaScript avec entrée en polygone interactif
Condition préalable
Pour suivre ce tutoriel, vous devriez avoir:
Compréhension de base de HTML, CSS et JavaScript
Familiarité avec la manipulation de Dom
Éditeur de texte ou IDE (Code vs, texte sublime, etc.)
Navigateur Web moderne
Facultatif: compréhension des bases de la géométrie des coordonnées
Comprendre les mathématiques derrière les calculs de la région
Avant de plonger dans le code, comprenons les principes mathématiques qui alimentent notre calculatrice de géométrie.
La formule du lacet pour la zone de polygone
Pour calculer la zone de tout polygone (régulier ou irrégulier), nous utiliserons la formule du lacet, également connu sous le nom de formule de l'arpenteur ou la formule de la zone de Gauss.Cet algorithme puissant fonctionne pour tout polygone défini par ses sommets, quelle que soit la complexité de la forme.
La formule est exprimée comme suit:
Area = 0.5 * |∑(x_i * y_(i+1) - x_(i+1) * y_i)|
Où:
x_i and y_i are the coordinates of the i-th vertex
La formule calcule la moitié de la somme des produits croisés des sommets adjacents
La valeur absolue assure un domaine positif
Cette formule fonctionne en «marchant» autour du périmètre du polygone, en calculant les produits croisés entre les points consécutifs.Lorsque nous résumons et nous divisons par 2, nous obtenons la zone du polygone.
Configuration du projet
Commençons par configurer la structure de base de notre calculatrice de géométrie:
Structure 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>
Style 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);
Représentation visuelle de la façon dont la formule du shoelace calcule la zone d'un polygone
Comprendre les composants clés
Décomposons les principaux composants de notre calculatrice de la zone de géométrie:
Interaction toile
Notre calculatrice utilise un élément de toile HTML pour la création interactive du polygone.Les utilisateurs peuvent:
Cliquez sur la toile pour ajouter des points
Faites glisser les points existants pour ajuster les positions
Voir la visualisation en temps réel du polygone
Afficher une grille de coordonnées pour référence
La toile est configurée avec un système de coordonnées où (0,0) est au centre, ce qui rend intuitif pour que les utilisateurs travaillent avec des coordonnées positives et négatives.
Coordonner la gestion des entrées
Les utilisateurs peuvent saisir les coordonnées de deux manières:
Entrée visuelle: cliquez directement sur la toile pour placer les points
Entrée manuelle: entrez les coordonnées exactes dans les champs d'entrée
Les deux méthodes d'entrée sont synchronisées, permettant à la fois un placement visuel intuitif et une entrée numérique précise.
L'implémentation de l'algorithme du shoelace
Le cœur de notre calculatrice est la mise en œuvre de la formule du lacet:
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);
}
Cette fonction:
Prend un tableau de coordonnées de sommet
Boucles à travers chaque point et le point suivant (enveloppant le premier point)
Applique le calcul des produits croisés
Prend la valeur absolue et divise par 2 pour obtenir la zone finale
La beauté de cet algorithme est qu'elle fonctionne pour n'importe quel polygone, qu'elle soit convexe ou concave, tant qu'elle ne se croit pas.
Ajout de fonctionnalités avancées
Maintenant que nous avons la calculatrice de base qui fonctionne, étendons-le avec quelques fonctionnalités avancées:
Conversion unitaire
Notre calculatrice prend en charge différentes unités de mesure:
Pixels: pour les mesures basées sur l'écran
Mètres: pour les mesures métriques du monde réel
Pieds: pour les mesures impériales
La conversion unitaire est appliquée après le calcul de la zone:
// 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;
}
Vous pouvez personnaliser les facteurs de conversion en fonction de vos exigences spécifiques.
L'interface de calculatrice montrant des options de conversion unitaire pour différents systèmes de mesure
Étapes de calcul détaillées
Pour aider les utilisateurs à comprendre comment la zone est calculée, nous fournissons une ventilation détaillée des étapes 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>`;
}
Cette transparence aide les utilisateurs à vérifier les résultats et à découvrir les principes mathématiques derrière les calculs de la zone de polygone.
Tests et validation
Avant de considérer notre calculatrice de géométrie terminée, le testons avec certaines formes connues pour vérifier sa précision:
Cas de test 1: rectangle
Un rectangle simple avec des sommets à (0,0), (100,0), (100,50) et (0,50) devrait avoir une superficie de 5 000 unités carrés.
Cas de test 2: triangle
Un triangle avec des sommets à (0,0), (50 100) et (100,0) devrait avoir une superficie de 5 000 unités carrés.
Cas de test 3: polygone irrégulier
Un polygone irrégulier avec des sommets à (0,0), (50 100), (100,50), (75,25) et (25,25) devrait nous donner la zone correcte basée sur la formule du shoelace.
Pour chaque cas de test, notre calculatrice doit:
Autoriser une entrée facile des coordonnées de test
Calculez la bonne zone
Afficher les étapes de calcul de la vérification
Optimisation des appareils mobiles
Pour rendre notre calculatrice de géométrie entièrement réactive, nous pouvons ajouter les améliorations suivantes:
Support tactile pour l'interaction sur toile
Disposition réactive qui s'adapte à différentes tailles d'écran
Interface simplifiée pour les écrans plus petits
Ces ajouts garantissent que notre calculatrice est utilisable sur les smartphones et les tablettes, ce qui le rend accessible aux utilisateurs de tous les appareils.
Améliorations supplémentaires
Pour rendre notre calculatrice de zone de géométrie encore plus robuste, envisagez de mettre en œuvre ces fonctionnalités supplémentaires:
Formes prédéfinies
Ajoutez des boutons pour créer rapidement des formes communes comme:
Carré
Rectangle
Triangle
Cercle (approximatif comme un polygone ordinaire)
Polygones réguliers (pentagone, hexagone, etc.)
Calcul de la zone pour les cercles
Étendre la calculatrice pour gérer les zones du cercle en utilisant:
function calculateCircleArea(radius) {
return Math.PI * radius * radius;
}
Calcul du périmètre
Ajoutez des fonctionnalités pour calculer le périmètre des polygones:
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;
}
Économie et chargement des polygones
Implémentez LocalStorage pour enregistrer et charger les configurations de polygones:
// 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();
}
}
Applications pratiques
Diverses applications du monde réel où les calculatrices de la zone de géométrie fournissent des solutions précieuses
Notre calculatrice de la zone de géométrie JavaScript a de nombreuses applications pratiques:
Développement Web
Cartes interactives et visualisations de tracé
Applications d'arpentage terrestre
Outils de planification immobilière
Disposition et applications de conception de la salle
Éducation
Enseigner les principes géométriques de manière interactive
Visualiser les concepts mathématiques
Création de ressources d'apprentissage interactives
Développement de jeux
Détection de collision pour les objets de jeu
Conception de niveau et création d'environnement
Génération procédurale de mondes de jeu
Conclusion
Dans ce didacticiel complet, nous avons construit une calculatrice de zones de géométrie interactive puissante à l'aide de JavaScript.Notre calculatrice peut:
Calculez avec précision la zone de tout polygone à l'aide de la formule du lacet
Fournir une interface visuelle intuitive pour créer et modifier les formes
Entrée des coordonnées du manuel de support pour des mesures précises
Convertir entre différentes unités de mesure
Afficher les étapes de calcul détaillées à des fins éducatives
Les principes et techniques que nous avons couverts - la géométrie coordonnée, l'algorithme du lacet, la manipulation de la toile et la conception de l'interface utilisateur - sont des compétences précieuses qui s'étendent au-delà de ce projet spécifique.Vous pouvez les appliquer à divers défis de développement Web, de la visualisation des données aux applications interactives.
En construisant ce calculatrice de géométrie, vous avez non seulement créé un outil utile, mais vous avez également approfondi votre compréhension des concepts mathématiques et leur implémentation en JavaScript.N'hésitez pas à étendre la calculatrice avec des fonctionnalités supplémentaires, à optimiser ses performances ou à l'intégrer dans vos propres projets.
