Budování kalkulačky oblasti geometrie JavaScriptu: Interaktivní vývojář 2025
Vytvořte interaktivní kalkulačku oblasti polygonu pomocí JavaScriptu. Master geometrické vzorce, výpočty souřadnic a nástroje pro měření webových stránek pro jednoduché i komplexní polygony.
Rendering article content...
Tags
Kalkulačka geometriekalkulačka oblastikalkulačka polygonukalkulačka oblasti JavaScriptuvýpočet oblasti polygonuvzorec oblasti geometrieinteraktivní geometrická kalkulačkageometrická knihovna JavaScriptalgoritmus polygonůvývojová plochapolygónová plochapolygónová plochapolygónová plochapolygónová plochapolygónová plochapolygónová plochapolygónová plochapolygonská plochapolygónová plochapolygónová plochapolygónová plochapolygónová plochapolygonská plochapolygónová plochapolygónová plochapolygonská plochapolygonská oblastpolygonská plochapolygonská plochapolygonská plochapolygonská plochapolygonská plochageometrická plochaapi. Webová kalkulačkavypočítat JavaScript AreaKalkulačka souřadnic Geometrienástroje pro geometrii vývojářeKalkulačka oblasti Mapy Google Maps
Hloubkový průvodce vytvořením vlastní kalkulačky interaktivní geometrie pomocí JavaScriptu, kompletní s výpočty oblasti pro jednoduché a složité polygony.
Úvod: Proč sestavit kalkulačku geometrie?
Výpočty geometrie tvoří základ četných aplikací v reálném světě-od průzkumu půdy a architektury po vývoj her a geografické informační systémy.Jako vývojáři často potřebujeme spolehlivé nástroje pro výpočet oblastí různých tvarů.I když je k dispozici mnoho online kalkulaček, vytvoření vlastních nabídek několik výhod:
Úplné přizpůsobení, aby vyhovovalo vašim konkrétním požadavkům na projekt
Flexibilita integrace s vašimi stávajícími webovými aplikacemi
Naučit příležitost porozumět koordinaci geometrie a algoritmického myšlení
Vylepšení portfolia pro předvedení vašich dovedností JavaScriptu
V tomto komplexním tutoriálu projdeme procesem budování výkonné, interaktivní kalkulačky oblasti geometrie pomocí JavaScriptu.Nakonec budete mít plně funkční webovou aplikaci, která přesně vypočítá oblast jednoduchých i komplexních polygonů pomocí geometrie souřadnic.
Co budeme postavit
Naše kalkulačka geometrie bude:
Umožněte uživatelům zadávat souřadnice polygonu prostřednictvím intuitivního rozhraní
Vypočítejte oblasti pro pravidelné i nepravidelné polygony
Podporujte více měřicích jednotek
Vizualizujte tvary pomocí plátna HTML
Poskytněte jasné a přesné výsledky se správným zaokrouhlením
Pracujte ve všech hlavních prohlížečích a zařízeních
Náhled naší finální kalkulačky geometrie JavaScriptu s interaktivním vstupem polygonu
Předpoklady
Chcete -li sledovat tento tutoriál, měli byste mít:
Základní porozumění HTML, CSS a Javascriptu
Znalost manipulace s DOM
Textový editor nebo IDE (vs kód, vznešený text atd.)
Než se ponoříme do kódu, pochopte matematické principy, které pohánějí naši kalkulačku geometrie.
Vzorec tkaničky pro oblast polygonu
Pro výpočet oblasti jakéhokoli polygonu (pravidelného nebo nepravidelného) použijeme vzorec trýze, známý také jako vzorec inspektora nebo Gaussova vzorec.Tento výkonný algoritmus pracuje pro jakýkoli polygon definovaný jeho vrcholy, bez ohledu na to, jak složitý může být tvar.
Vzorec je vyjádřen jako:
Area = 0.5 * |∑(x_i * y_(i+1) - x_(i+1) * y_i)|
Kde:
x_i and y_i are the coordinates of the i-th vertex
Tento vzorec funguje „chůzí“ po obvodu polygonu a vypočítává křížové produkty mezi po sobě jdoucími body.Když je shrneme a rozdělíme na 2, dostaneme oblast polygonu.
Nastavení projektu
Začněme nastavením základní struktury naší kalkulačky geometrie:
Struktura 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>
Styl 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);
Vizuální reprezentace toho, jak vzorec tkanic počítá oblast polygonu
Porozumění klíčovým komponentám
Pojďme rozebrat hlavní komponenty naší kalkulačky oblasti geometrie:
Interakce plátna
Naše kalkulačka používá prvek plátna HTML pro interaktivní tvorbu polygonů.Uživatelé mohou:
Kliknutím na plátno přidejte body
Přetáhněte stávající body a upravte pozice
Viz vizualizace polygonu v reálném čase
Zobrazit souřadnicovou mřížku pro informaci
Na plátně je nastaveno souřadnicový systém, kde je (0,0) ve středu, takže je pro uživatele intuitivní pracovat s pozitivními i negativními souřadnicemi.
Správa vstupů souřadnic
Uživatelé mohou zadávat souřadnice dvěma způsoby:
Vizuální vstup: Klikněte přímo na plátno a umístíte body
Manuální vstup: Zadejte přesné souřadnice ve vstupních polích
Dvě vstupní metody jsou synchronizovány, což umožňuje intuitivní vizuální umístění a přesný numerický vstup.
Implementace algoritmu chločení
Jádrem naší kalkulačky je implementace vzorce boku:
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);
}
Tato funkce:
Přijímá řadu souřadnic vrcholů
Smyčky každým bodem a dalším bodem (obalení do prvního bodu)
Aplikuje výpočet křížového produktu
Má absolutní hodnotu a dělí se o 2, aby získala konečnou oblast
Krása tohoto algoritmu spočívá v tom, že funguje pro jakýkoli polygon, bez ohledu na to, zda je to konvexní nebo konkávní, pokud se protíná.
Přidání pokročilých funkcí
Nyní, když máme základní kalkulačku, pojďme na rozšíření některých pokročilých funkcí:
Převod jednotky
Naše kalkulačka podporuje různé jednotky měření:
Pixely: Pro měření založená na obrazovce
Měřiče: Pro měření metriky v reálném světě
Nohy: Pro císařská měření
Konverze jednotky se použije po výpočtu oblasti:
// 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;
}
Konverzní faktory si můžete přizpůsobit na základě vašich konkrétních požadavků.
Rozhraní kalkulačky ukazující možnosti převodu jednotky pro různé systémy měření
Podrobné kroky výpočtu
Abychom uživatelům pomohli pochopit, jak je oblast vypočítána, poskytujeme podrobné rozdělení kroků výpočtu:
// 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>`;
}
Tato transparentnost pomáhá uživatelům ověřit výsledky a dozvědět se o matematických principech výpočtů oblasti polygonů.
Testování a ověření
Než zvážíme naši kalkulačku geometrie kompletní, vyzkoušejte ji s některými známými tvary, abychom ověřili jeho přesnost:
Zkušební případ 1: obdélník
Jednoduchý obdélník s vrcholy při (0,0), (100,0), (100,50) a (0,50) by měl mít plochu 5 000 čtverečních jednotek.
Zkušební případ 2: trojúhelník
Trojúhelník s vrcholy při (0,0), (50 100) a (100,0) by měl mít plochu 5 000 čtverečních jednotek.
Zkušební případ 3: Nepravidelný polygon
Nepravidelný polygon s vrcholy při (0,0), (50 100), (100,50), (75,25) a (25,25) by nám měl dát správnou oblast založenou na vzorci tkanic.
Pro každý testovací případ by naše kalkulačka měla:
Povolit snadné vstup testovacích souřadnic
Vypočítejte správnou oblast
Zobrazit kroky výpočtu pro ověření
Optimalizace pro mobilní zařízení
Aby byla naše kalkulačka geometrie plně reagována, můžeme přidat následující vylepšení:
Dotkněte se podpory pro interakci plátna
Responzivní rozvržení, které se přizpůsobuje různým velikostem obrazovky
Zjednodušené rozhraní pro menší obrazovky
Tyto přírůstky zajišťují, že naše kalkulačka je použitelná na chytrých telefonech a tabletech, což je přístupné uživatelům na všech zařízeních.
Další vylepšení
Chcete -li, aby byla naše kalkulačka oblasti geometrie ještě robustnější, zvažte implementaci těchto dodatečných funkcí:
Přednastavené tvary
Přidejte tlačítka pro rychle vytvoření běžných tvarů jako:
Náměstí
Obdélník
Trojúhelník
Kruh (aproximovaný jako běžný polygon)
Pravidelné polygony (Pentagon, hexagon atd.)
Výpočet oblasti pro kruhy
Rozšiřte kalkulačku tak, aby manipulovala s kruhovými oblastmi:
function calculateCircleArea(radius) {
return Math.PI * radius * radius;
}
Výpočet obvodu
Přidejte funkčnost pro výpočet obvodu polygonů:
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;
}
Úspora a nakládání polygonů
Implementujte localStorage pro uložení a načítání konfigurací polygonu:
// 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();
}
}
Praktické aplikace
Různé aplikace v reálném světě, kde kalkulačky oblasti geometrie poskytují cenná řešení
Naše kalkulačka oblasti geometrie JavaScriptu má řadu praktických aplikací:
Vývoj webu
Interaktivní mapy a vizualizace vykreslení
Aplikace pro průzkum půdy
Nástroje pro plánování nemovitostí
Rozložení pokoje a návrhové aplikace
Školství
Výuka geometrických principů interaktivně
Vizualizace matematických konceptů
Vytváření interaktivních učebních zdrojů
Vývoj hry
Detekce kolize pro herní objekty
Návrh úrovně a vytváření prostředí
Procedurální generování herních světů
Závěr
V tomto komplexním tutoriálu jsme vytvořili výkonnou kalkulačku interaktivní geometrie pomocí JavaScriptu.Naše kalkulačka může:
Přesně vypočítejte oblast jakéhokoli polygonu pomocí vzorec boku
Poskytněte intuitivní vizuální rozhraní pro vytváření a úpravu tvarů
Podporujte vstup manuální souřadnice pro přesná měření
Převést mezi různými jednotkami měření
Zobrazit podrobné kroky výpočtu pro vzdělávací účely
Principy a techniky, které jsme zakryli - koordinátová geometrie, algoritmus thota, manipulace s plátno a design uživatelského rozhraní - jsou cenné dovednosti, které přesahují tento konkrétní projekt.Můžete je použít na různé výzvy pro vývoj webových stránek, od vizualizace dat po interaktivní aplikace.
Budováním této geometrické kalkulačky jste nejen vytvořili užitečný nástroj, ale také prohloubili vaše porozumění matematickým konceptům a jejich implementaci v JavaScriptu.Neváhejte rozšířit kalkulačku s dalšími funkcemi, optimalizovat její výkon nebo ji integrovat do svých vlastních projektů.
