Een JavaScript -geometriegebied bouwen: Interactieve ontwikkelaar tutorial 2025
Maak een interactieve polygoongebiedscalculator met behulp van JavaScript. Mastergeometrie-formules, coördinaten berekeningen en webgebaseerde meethulpmiddelen voor zowel eenvoudige als complexe polygonen.
Rendering article content...
Tags
geometry calculatorarea calculatorpolygon area calculatorjavascript area calculatorcalculate polygon areageometry area formulainteractive geometry calculatorjavascript geometry librarypolygon area algorithmarea calculation toolgeometry calculation apipolygon measurementgeometry programmingjavascript polygon areageometry formulas for developersweb-based calculatorBereken het gebied JavaScriptcoördinaat geometriecalculatorontwikkelaarsgeometriehulpmiddelenGoogle Maps Area Calculator
Een diepgaande gids voor het maken van uw eigen interactieve geometriecalculator met behulp van JavaScript, compleet met gebiedsberekeningen voor eenvoudige en complexe polygonen.
Inleiding: Waarom een geometriecalculator bouwen?
Geometrieberekeningen vormen de basis van tal van real-world toepassingen-van landonderzoek en architectuur tot spelontwikkeling en geografische informatiesystemen.Als ontwikkelaars hebben we vaak betrouwbare hulpmiddelen nodig om de gebieden van verschillende vormen te berekenen.Hoewel er veel online rekenmachines beschikbaar zijn, biedt het bouwen van uw eigen aanbiedingen verschillende voordelen:
Volledige aanpassing om aan uw specifieke projectvereisten te voldoen
Integratieflexibiliteit met uw bestaande webtoepassingen
Leergelegenheid om de coördinaat geometrie en algoritmisch denken te begrijpen
Portfolio -verbetering om uw JavaScript -vaardigheden te presenteren
In deze uitgebreide zelfstudie lopen we door het proces van het bouwen van een krachtige, interactieve geometrie -gebiedscalculator met behulp van JavaScript.Tegen het einde hebt u een volledig functionele webtoepassing die het gebied van zowel eenvoudige als complexe polygonen nauwkeurig berekent met behulp van coördinatengeometrie.
Wat we zullen bouwen
Onze geometriecalculator zal:
Sta gebruikers in staat om polygooncoördinaten in te voeren via een intuïtieve interface
Bereken gebieden voor zowel gewone als onregelmatige polygonen
Ondersteuning van meerdere meeteenheden
Visualiseer de vormen met HTML -canvas
Bied duidelijke, nauwkeurige resultaten met de juiste afronding
Werk op alle grote browsers en apparaten
Een preview van ons laatste JavaScript -geometriegebiedcalculator met interactieve polygooninvoer
Voorwaarden
Om deze tutorial te volgen, zou je moeten hebben:
Basis begrip van HTML, CSS en JavaScript
Bekendheid met DOM -manipulatie
Teksteditor of IDE (vs code, sublieme tekst, enz.)
Moderne webbrowser
Optioneel: inzicht in de basisprincipes van de geometrie van geometrie
Inzicht in de wiskunde achter gebiedsberekeningen
Laten we, voordat we in code duiken, de wiskundige principes begrijpen die onze geometriecalculator voeden.
De schoenvatformule voor polygoongebied
Voor het berekenen van het gebied van een polygoon (regelmatig of onregelmatig), zullen we de schoenvatformule gebruiken, ook bekend als de formule van de landmeter of de gebiedsformule van Gauss.Dit krachtige algoritme werkt voor elke polygoon die wordt gedefinieerd door zijn hoekpunten, ongeacht hoe complex de vorm kan zijn.
De formule wordt uitgedrukt als:
Area = 0.5 * |∑(x_i * y_(i+1) - x_(i+1) * y_i)|
Waar:
x_i and y_i are the coordinates of the i-th vertex
De formule berekent de helft van de som van de kruisproducten van aangrenzende hoekpunten
De absolute waarde zorgt voor een positief gebied
Deze formule werkt door te "lopen" rond de omtrek van de polygoon, waarbij kruisproducten tussen opeenvolgende punten worden berekend.Wanneer we deze samenvatten en door 2 delen, krijgen we het gebied van de polygoon.
Projectinstelling
Laten we beginnen met het instellen van de basisstructuur van onze geometriecalculator:
HTML -structuur
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>
CSS -styling
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);
Visuele weergave van hoe de schoenvatformule het gebied van een polygoon berekent
Inzicht in de belangrijkste componenten
Laten we de belangrijkste componenten van onze calculator van het geometrie -gebied afbreken:
Canvas interactie
Onze calculator maakt gebruik van een HTML -canvas -element voor interactieve polygoncreatie.Gebruikers kunnen:
Klik op het canvas om punten toe te voegen
Sleep bestaande punten om posities aan te passen
Zie realtime visualisatie van de polygoon
Bekijk een coördinaatrooster ter referentie
Het canvas is opgezet met een coördinatensysteem waarbij (0,0) zich in het midden bevindt, waardoor gebruikers intuïtief zijn om met zowel positieve als negatieve coördinaten te werken.
Coördineer input management
Gebruikers kunnen coördinaten op twee manieren invoeren:
Visuele invoer: klik direct op het canvas om punten te plaatsen
Handmatige invoer: Voer exacte coördinaten in de invoervelden in
De twee invoermethoden worden gesynchroniseerd, waardoor zowel intuïtieve visuele plaatsing als precieze numerieke invoer mogelijk is.
De implementatie van het schoenvetentme -algoritme
De kern van onze calculator is de implementatie van de schoenvatformule:
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);
}
Deze functie:
Neemt een reeks hoekpuntcoördinaten
Lussen door elk punt en het volgende punt (rondhangen naar het eerste punt)
Past de kruisproductberekening toe
Neemt de absolute waarde aan en verdeelt met 2 om het uiteindelijke gebied te krijgen
Het mooie van dit algoritme is dat het werkt voor elke polygoon, ongeacht of het convex of concave is, zolang het zichzelf niet kruist.
Geavanceerde functies toevoegen
Nu we de basiscalculator hebben, laten we deze uitbreiden met enkele geavanceerde functies:
Eenheidsconversie
Onze calculator ondersteunt verschillende meeteenheden:
Pixels: voor op scherm gebaseerde metingen
Meters: voor real-world metrische metingen
Voeten: voor keizerlijke metingen
De conversie van de eenheid wordt toegepast na de gebiedsberekening:
// 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;
}
U kunt de conversiefactoren aanpassen op basis van uw specifieke vereisten.
De rekenmachine -interface met een unit -conversie -opties voor verschillende meetsystemen
Gedetailleerde berekeningstappen
Om gebruikers te helpen begrijpen hoe het gebied wordt berekend, bieden we een gedetailleerde uitsplitsing van de berekeningstappen:
// 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>`;
}
Deze transparantie helpt gebruikers de resultaten te verifiëren en te leren over de wiskundige principes achter de berekeningen van polygoongebied.
Testen en validatie
Laten we, voordat we onze geometriecalculator overwegen, deze testen met enkele bekende vormen om de nauwkeurigheid ervan te verifiëren:
Testcase 1: rechthoek
Een eenvoudige rechthoek met hoekpunten bij (0,0), (100,0), (100,50) en (0,50) moet een oppervlakte van 5.000 vierkante eenheden hebben.
Test Case 2: Triangle
Een driehoek met hoekpunten bij (0,0), (50,100) en (100,0) zou een oppervlakte van 5.000 vierkante eenheden moeten hebben.
Testcase 3: onregelmatige polygoon
Een onregelmatige polygoon met hoekpunten op (0,0), (50.100), (100,50), (75,25) en (25,25) zouden ons het juiste gebied moeten geven op basis van de schoenvindformule.
Voor elke testcase moet onze rekenmachine:
Laat de testcoördinaten eenvoudige invoer toe
Bereken het juiste gebied
Geef de berekeningstappen weer voor verificatie
Optimaliseren voor mobiele apparaten
Om onze geometriecalculator volledig te reageren, kunnen we de volgende verbeteringen toevoegen:
Raak ondersteuning voor canvas -interactie aan
Responsieve lay -out die zich aanpast aan verschillende schermformaten
Vereenvoudigde interface voor kleinere schermen
Deze toevoegingen zorgen ervoor dat onze rekenmachine bruikbaar is op smartphones en tablets, waardoor deze toegankelijk is voor gebruikers op alle apparaten.
Aanvullende verbeteringen
Overweeg om deze aanvullende functies nog robuuster te maken om onze geometriegebied nog robuuster te maken:
Vooraf ingestelde vormen
Voeg knoppen toe om snel gemeenschappelijke vormen te maken, zoals:
Vierkant
Rechthoek
Driehoek
Cirkel (benaderd als een normale polygoon)
Regelmatige polygonen (Pentagon, zeshoek, enz.)
Gebiedsberekening voor cirkels
Breid de rekenmachine uit om cirkelgebieden te verwerken met behulp van:
function calculateCircleArea(radius) {
return Math.PI * radius * radius;
}
Perimeterberekening
Functionaliteit toevoegen om de omtrek van polygonen te berekenen:
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;
}
Polygonen opslaan en laden
Implementeer LocalStorage om polygoonconfiguraties op te slaan en te laden:
// 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();
}
}
Praktische toepassingen
Verschillende real-world toepassingen waarbij rekenmachines voor geometrie waardevolle oplossingen bieden
Onze JavaScript Geometry Area -calculator heeft tal van praktische toepassingen:
Webontwikkeling
Interactieve kaarten en plot visualisaties
Landonderzoektoepassingen
Tools voor onroerend goed planning
Kamerindeling en ontwerptoepassingen
Onderwijs
Geometrische principes interactief onderwijzen
Wiskundige concepten visualiseren
Interactieve leermiddelen creëren
Spelontwikkeling
Botsingsdetectie voor game -objecten
Levelontwerp en milieucreatie
Procedurele generatie van spelwerelden
Conclusie
In deze uitgebreide zelfstudie hebben we een krachtige, interactieve geometrie -gebiedscalculator gebouwd met behulp van JavaScript.Onze rekenmachine kan:
Bereken nauwkeurig het gebied van een polygoon met behulp van de schoenvatformule
Bied een intuïtieve visuele interface voor het maken en wijzigen van vormen
Ondersteuning handmatige coördinaatinvoer voor precieze metingen
Converteren tussen verschillende meeteenheden
Toon gedetailleerde berekeningstappen voor educatieve doeleinden
De principes en technieken die we hebben behandeld - coördinaat geometrie, het schoenvatalgoritme, canvasmanipulatie en gebruikersinterfaceontwerp - zijn waardevolle vaardigheden die verder gaan dan dit specifieke project.U kunt ze toepassen op verschillende uitdagingen op het gebied van webontwikkeling, van datavisualisatie tot interactieve toepassingen.
Door deze geometriecalculator te bouwen, hebt u niet alleen een nuttig hulpmiddel gemaakt, maar heeft u ook uw begrip van wiskundige concepten en hun implementatie in JavaScript verdiept.Voel je vrij om de calculator uit te breiden met extra functies, de prestaties te optimaliseren of te integreren in je eigen projecten.
