Een JavaScript -geometriegebied bouwen: Interactieve ontwikkelaar tutorial 2025
Yên Chi
Creator
Inhoudsopgave
- Inleiding: Waarom een geometriecalculator bouwen?
- Wat we zullen bouwen
- Voorwaarden
- Inzicht in de wiskunde achter gebiedsberekeningen
- Projectinstelling
- JavaScript -implementatie
- Inzicht in de belangrijkste componenten
- Geavanceerde functies toevoegen
- Testen en validatie
- Optimaliseren voor mobiele apparaten
- Aanvullende verbeteringen
- Praktische toepassingen
- Conclusie
- Bronnen voor verder leren
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_iandy_iare 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"> <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>CSS -styling
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; }JavaScript -implementatie
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.
Gelukkig coderen!