Budowanie kalkulatora obszaru geometrii JavaScript: Interactive Developer Tutorial 2025
Utwórz interaktywny kalkulator obszaru wielokąta za pomocą JavaScript. Formuły geometrii głównej, obliczenia współrzędne i internetowe narzędzia pomiarowe zarówno dla prostych, jak i złożonych wielokątów.
Rendering article content...
Tags
Kalkulator geometriikalkulator powierzchnikalkulator obszaru wielokątakalkulator obszaru JavaScriptoblicz powierzchnię wielokątawzór obszaru geometriiinteraktywne kalkulator geometriibiblioteka geometrii JavaScriptobszar wielokątaformulowanie obszaruformulowanie geometrii do tworzeniaobliczanie sieciobliczanie siecioweobliczanie sieciowe. obszar JavaScriptkalkulator geometrii współrzędnychnarzędzia geometrii programistykalkulator obszaru Mapy Google
Dogłębny przewodnik po tworzeniu własnego interaktywnego kalkulatora geometrii za pomocą JavaScript, wraz z obliczeniami obszaru dla prostych i złożonych wielokątów.
Wprowadzenie: Po co budować kalkulator geometrii?
Obliczenia geometrii stanowią fundament wielu rzeczywistych zastosowań-od badań gruntów i architektury po rozwój gier i systemów informacji geograficznej.Jako programiści często potrzebujemy niezawodnych narzędzi do obliczania obszarów różnych kształtów.Chociaż dostępnych jest wiele kalkulatorów online, budowanie własnych oferuje kilka zalet:
Pełne dostosowywanie, aby pasowały do konkretnych wymagań projektu
Elastyczność integracji z istniejącymi aplikacjami internetowymi
Uczenie się możliwości zrozumienia geometrii współrzędnych i myślenia algorytmicznego
Ulepszenie portfela, aby zaprezentować swoje umiejętności JavaScript
W tym kompleksowym samouczku przejdziemy przez proces budowania potężnego, interaktywnego kalkulatora obszaru geometrii za pomocą JavaScript.Do końca będziesz mieć w pełni funkcjonalną aplikację internetową, która dokładnie oblicza obszar zarówno prostych, jak i złożonych wielokątów za pomocą geometrii współrzędnych.
Co zbudujemy
Nasz kalkulator geometrii:
Pozwól użytkownikom wprowadzać współrzędne wielokąta za pośrednictwem intuicyjnego interfejsu
Oblicz obszary zarówno dla zwykłych, jak i nieregularnych wielokątów
Obsługuj wiele jednostek pomiarowych
Wizualizuj kształty za pomocą płótna HTML
Zapewnij jasne, dokładne wyniki z właściwym zaokrąglaniem
Pracuj we wszystkich głównych przeglądarkach i urządzeniach
Podgląd naszego ostatniego kalkulatora obszaru geometrii JavaScript z interaktywnym wejściem wielokąta
Wymagania wstępne
Aby śledzić ten samouczek, powinieneś mieć:
Podstawowe zrozumienie HTML, CSS i JavaScript
Znajomość manipulacji DOM
Edytor tekstu lub IDE (VS Code, Sublime Text itp.)
Zrozumienie matematyki za obliczeniami obszarowymi
Przed zanurzeniem się w kodzie zrozummy matematyczne zasady zasilania naszego kalkulatora geometrii.
Formuła sznurka dla obszaru wielokąta
Do obliczania obszaru dowolnego wielokąta (regularnego lub nieregularnego) użyjemy formuły Shoelace, znanej również jako formuła geodeta lub formuła obszaru Gaussa.Ten potężny algorytm działa dla każdego wielokąta zdefiniowanego przez jego wierzchołki, niezależnie od tego, jak skomplikowany może być kształt.
Formuła jest wyrażona jako:
Area = 0.5 * |∑(x_i * y_(i+1) - x_(i+1) * y_i)|
Gdzie:
x_i and y_i are the coordinates of the i-th vertex
Wzór oblicza połowę sumy produktów krzyżowych sąsiednich wierzchołków
Wartość bezwzględna zapewnia pozytywny obszar
Ta formuła działa poprzez „chodzenie” po obwodzie wielokąta, obliczając produkty krzyżowe między kolejnymi punktami.Kiedy podsumowujemy je i dzielimy przez 2, otrzymujemy obszar wielokąta.
Konfiguracja projektu
Zacznijmy od skonfigurowania podstawowej struktury naszego kalkulatora geometrii:
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);
Wizualna reprezentacja sposobu, w jaki formuła sznurka oblicza obszar wielokąta
Zrozumienie kluczowych elementów
Rozbijmy główne elementy naszego kalkulatora obszaru geometrii:
Interakcja na płótnie
Nasz kalkulator wykorzystuje element płótna HTML do interaktywnego tworzenia wielokąta.Użytkownicy mogą:
Kliknij płótno, aby dodać punkty
Przeciągnij istniejące punkty, aby dostosować pozycje
Zobacz wizualizację wielokąta w czasie rzeczywistym
Wyświetl sieć współrzędnych w celach informacyjnych
Płótno jest skonfigurowane z układem współrzędnych, w którym (0,0) znajduje się w centrum, co czyni intuicyjną dla użytkowników zarówno z pozytywnymi, jak i negatywnymi współrzędnymi.
Koordynacja zarządzania wejściami
Użytkownicy mogą wprowadzać współrzędne na dwa sposoby:
Wejście wizualne: kliknij bezpośrednio na płótnie, aby umieścić punkty
Wejście ręczne: Wprowadź dokładne współrzędne w polach wejściowych
Dwie metody wejściowe są synchronizowane, umożliwiając zarówno intuicyjne wizualne umieszczenie, jak i precyzyjne wejście numeryczne.
Wdrożenie algorytmu sznurka
Rdzeniem naszego kalkulatora jest implementacja formuły sznurka:
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);
}
Ta funkcja:
Wymaga szeregu współrzędnych wierzchołków
Pętle przez każdy punkt i następny punkt (owijanie się do pierwszego punktu)
Stosuje obliczenia produktu krzyżowego
Przyjmuje wartość bezwzględną i dzieli się przez 2, aby uzyskać ostateczny obszar
Piękno tego algorytmu polega na tym, że działa on dla każdego wielokąta, niezależnie od tego, czy jest on wypukły czy wklęsły, o ile się nie przecina.
Dodawanie zaawansowanych funkcji
Teraz, gdy mamy działający podstawowy kalkulator, rozszerzymy go o niektóre zaawansowane funkcje:
Konwersja jednostki
Nasz kalkulator obsługuje różne jednostki pomiaru:
Piksele: dla pomiarów opartych na ekranie
Mierniki: dla rzeczywistych pomiarów metrycznych
Stopy: dla pomiarów imperialnych
Konwersja jednostki jest stosowana po obliczeniach obszaru:
// 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;
}
Możesz dostosować współczynniki konwersji na podstawie swoich konkretnych wymagań.
Interfejs kalkulatora pokazujący opcje konwersji jednostki dla różnych systemów pomiarowych
Szczegółowe etapy obliczeń
Aby pomóc użytkownikom zrozumieć, w jaki sposób oblicza się obszar, zapewniamy szczegółowy rozkład kroków obliczeniowych:
// 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>`;
}
Ta przejrzystość pomaga użytkownikom weryfikować wyniki i dowiedzieć się o zasadach matematycznych za obliczeniami obszaru Polygon.
Testowanie i walidacja
Przed rozważeniem naszego kalkulatora geometrii przetestujmy go z niektórymi znanymi kształtami, aby zweryfikować jego dokładność:
Przypadek testowy 1: prostokąt
Prosty prostokąt z wierzchołkami przy (0,0), (100,0), (100,50) i (0,50) powinien mieć powierzchnię 5000 jednostek kwadratowych.
Przypadek testowy 2: Trójkąt
Trójkąt z wierzchołkami (0,0), (50 100) i (100,0) powinien mieć powierzchnię 5000 jednostek kwadratowych.
Przypadek testowy 3: Nieregularny wielokąt
Nieregularny wielokąt z wierzchołkami przy (0,0), (50 100), (100,50), (75,25) i (25,25) powinien dać nam prawidłowy obszar na podstawie wzoru sznoenacego.
Dla każdego przypadku testowy nasz kalkulator powinien:
Zezwalaj na łatwe wprowadzanie współrzędnych testu
Oblicz odpowiedni obszar
Wyświetl kroki obliczeniowe do weryfikacji
Optymalizacja dla urządzeń mobilnych
Aby nasz kalkulator geometrii w pełni reagował, możemy dodać następujące ulepszenia:
Dotknij obsługi interakcji na płótnie
Responsywny układ, który dostosowuje się do różnych rozmiarów ekranu
Uproszczony interfejs dla mniejszych ekranów
Dodatki te zapewniają, że nasz kalkulator jest użyteczny na smartfonach i tabletach, dzięki czemu jest dostępny dla użytkowników na wszystkich urządzeniach.
Dodatkowe ulepszenia
Aby nasz kalkulator obszaru geometrii będzie jeszcze bardziej solidny, rozważ wdrożenie tych dodatkowych funkcji:
Wstępnie ustawione kształty
Dodaj przyciski, aby szybko tworzyć wspólne kształty, takie jak:
Kwadrat
Prostokąt
Trójkąt
Okrąg (przybliżony jako zwykły wielokąt)
Regularne wielokąty (Pentagon, Hexagon itp.)
Obliczanie powierzchni dla kółek
Rozszerz kalkulator, aby obsłużyć obszary koła za pomocą:
function calculateCircleArea(radius) {
return Math.PI * radius * radius;
}
Obliczanie obwodu
Dodaj funkcjonalność do obliczania obwodu wielokątów:
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;
}
Oszczędzanie i ładowanie wielokątów
Zaimplementuj LocalStorage, aby zapisać i załadować konfiguracje wielokąta:
// 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();
}
}
Praktyczne zastosowania
Różne zastosowania w świecie rzeczywistym, w których kalkulatory obszaru geometrii zapewniają cenne rozwiązania
Nasz kalkulator obszaru geometrii JavaScript ma wiele praktycznych zastosowań:
Opracowywanie stron internetowych
Interaktywne mapy i wizualizacje fabularne
Zastosowania dotyczące badań gruntów
Narzędzia do planowania nieruchomości
Układ pokoju i aplikacje projektowe
Edukacja
Nauczanie zasad geometrycznych interaktywnie
Wizualizacja koncepcji matematycznych
Tworzenie interaktywnych zasobów edukacyjnych
Rozwój gry
Wykrywanie zderzenia obiektów gry
Projektowanie poziomu i tworzenie środowiska
Proceduralne generowanie światów gier
Wniosek
W tym kompleksowym samouczku zbudowaliśmy potężny, interaktywny kalkulator obszaru geometrii za pomocą JavaScript.Nasz kalkulator może:
Dokładnie oblicz obszar dowolnego wielokąta za pomocą wzoru sznurowiny
Zapewnij intuicyjny interfejs wizualny do tworzenia i modyfikowania kształtów
Wsparcie instrukcji współrzędnych dla precyzyjnych pomiarów
Przelicz między różnymi jednostkami pomiaru
Pokaż szczegółowe etapy obliczeń dla celów edukacyjnych
Zasady i techniki, które omówiliśmy - geometria koordynacji, algorytm sznurowodu, manipulacja płótnem i projektowanie interfejsu użytkownika - są cennymi umiejętnościami wykraczającymi poza ten konkretny projekt.Możesz je zastosować do różnych wyzwań związanych z tworzeniem stron internetowych, od wizualizacji danych po interaktywne aplikacje.
Budując ten kalkulator geometrii, stworzyłeś nie tylko przydatne narzędzie, ale także pogłębiłeś zrozumienie koncepcji matematycznych i ich implementację w JavaScript.Zapraszam do rozszerzenia kalkulatora o dodatkowe funkcje, zoptymalizuj jego wydajność lub zintegrować go z własnymi projektami.
