Construisez une calculatrice de zone de géométrie JavaScript

Tableau des matières

Introduction: Pourquoi construire un calculatrice de géométrie?
Ce que nous allons construire
Condition préalable
Comprendre les mathématiques derrière les calculs de la région
Configuration du projet
Implémentation JavaScript
Comprendre les composants clés
Ajout de fonctionnalités avancées
Tests et validation
Optimisation des appareils mobiles
Améliorations supplémentaires
Applications pratiques
Conclusion
Ressources pour un apprentissage plus approfondi

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:

* {
 	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;
}

Implémentation 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);

Polygon Area Calculation with Shoelace Formula

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

Real-world Applications of Geometry Calculators

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.

Bonne codage!

Construire une zone de géométrie JavaScript Calculatrice: Tutoriel de développeur interactif 2025

Anh Quân