JavaScript geometria területének kiépítése kalkulátor: Interaktív fejlesztő bemutató 2025
Hozzon létre egy interaktív sokszögű terület számológépet a JavaScript segítségével. Master geometriai képletek, koordinációs számítások és web-alapú mérőeszközök mind az egyszerű, mind az összetett sokszögekhez.
Rendering article content...
Tags
Geometriai számológépterület számológépsokszögű terület számológépJavaScript terület számológépkiszámítás a sokszög területéna geometriai terület képleteaz interaktív geometriai számológépa JavaScript geometria könyvtára sokszög terület algoritmusa terület számítási eszköza geometria kiszámításának APIa Polygon mérésa Geometria Programminga Javascript Poliety Formula terület javascriptkoordináta geometria számológépfejlesztő geometriai eszközökGoogle Maps területi számológép
Mélységes útmutató a saját interaktív geometriai számológép létrehozásához JavaScript segítségével, kiegészítve az egyszerű és összetett sokszögek területének számításával.
BEVEZETÉS: Miért építhet egy geometriai számológépet?
A geometriai számítások számos valós alkalmazás alapját képezik-a földmérésből és az építészetből a játékfejlesztésig és a földrajzi információs rendszerekig.Fejlesztőként gyakran megbízható eszközökre van szükségünk a különféle formák területeinek kiszámításához.Noha sok online számológép áll rendelkezésre, a saját felépítése számos előnyt kínál:
Teljes testreszabás, hogy megfeleljen az Ön konkrét projektkövetelményeinek
Integrációs rugalmasság a meglévő webes alkalmazásokkal
Tanulási lehetőség a koordinátus geometria és az algoritmikus gondolkodás megértésére
Portfóliójavítás a JavaScript készségeinek bemutatásához
Ebben az átfogó oktatóanyagban átjárjuk egy erőteljes, interaktív geometriai terület számológép felépítésének folyamatát a JavaScript segítségével.A végére egy teljesen működőképes webes alkalmazásod van, amely pontosan kiszámítja mind az egyszerű, mind az összetett sokszögek területét a koordináta geometria segítségével.
Mit fogunk építeni
A geometriai számológépünk:
Engedje meg a felhasználóknak, hogy intuitív felületen keresztül bemutassák a sokszög koordinátáit
Számítsa ki mind a szabályos, mind a szabálytalan sokszögek területeit
Támogassa a több mérőegységet
Képzelje el a formákat HTML vászon segítségével
Adjon meg egyértelmű, pontos eredményeket a megfelelő kerekítéssel
Dolgozzon az összes főbb böngészőn és eszközön
A végső JavaScript geometriai terület számológépünk előnézete interaktív sokszög bemenetkel
Előfeltételek
Ahhoz, hogy kövesse ezt az oktatóanyagot, akkor:
A HTML, a CSS és a JavaScript alapvető ismerete
A DOM manipuláció ismerete
Szövegszerkesztő vagy IDE (VS kód, fenséges szöveg stb.)
Modern böngésző
Opcionális: A koordináta geometria alapjainak megértése
A területszámítások mögött meghúzódó matematika megértése
Mielőtt belemerülne a kódba, értjük meg a matematikai alapelveket, amelyek táplálják a geometriai számológépünket.
A cipőzsinór formula a sokszög területére
Bármely sokszög (szabályos vagy szabálytalan) területének kiszámításához a cipőfűző képletet, más néven a földmérő képletét vagy a Gauss területi képletét is használjuk.Ez a nagy teljesítményű algoritmus a csúcsok által definiált sokszög esetén működik, függetlenül attól, hogy mennyire összetett lehet az alak.
A képletet a következőként fejezik ki:
Area = 0.5 * |∑(x_i * y_(i+1) - x_(i+1) * y_i)|
Ahol:
x_i and y_i are the coordinates of the i-th vertex
A képlet kiszámítja a szomszédos csúcsok kereszttermékeinek összegét
Az abszolút érték pozitív területet biztosít
Ez a képlet úgy működik, hogy "sétál" a sokszög kerülete körül, kiszámítva a kereszttermékeket egymást követő pontok között.Amikor ezeket összegezzük és 2 -re osztjuk, megkapjuk a sokszög területét.
Projektbeállítás
Kezdjük azzal, hogy beállítjuk a geometriai számológép alapvető szerkezetét:
HTML szerkezet
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 stílus
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ális ábrázolása arról, hogy a cipőfűző képlet hogyan kiszámítja a sokszög területét
A kulcsfontosságú elemek megértése
Bontjuk le a geometriai terület számológépünk fő alkotóelemeit:
Vászon interakció
Számológépünk HTML vászon elemet használ az interaktív sokszög létrehozásához.A felhasználók:
Kattintson a vászonra a pontok hozzáadásához
Húzza a meglévő pontokat a pozíciók beállításához
Lásd a sokszög valós idejű megjelenítését
Tekintse meg a koordináta rácsot referenciaként
A vászon egy olyan koordinátarendszerrel van beállítva, ahol (0,0) a középpontban van, így intuitívvá teszi a felhasználók számára, hogy mind pozitív, mind negatív koordinátákkal működjenek.
Koordinálja a bemenetkezelést
A felhasználók kétféleképpen adhatnak be koordinátákat:
Vizuális bemenet: Kattintson közvetlenül a vászonra a pontokhoz
Kézi bemenet: Írja be a pontos koordinátákat a bemeneti mezőkbe
A két bemeneti módszer szinkronizálva van, lehetővé téve mind az intuitív vizuális elhelyezést, mind a pontos numerikus bemenetet.
A cipőfűző algoritmus megvalósítása
A számológépünk magja a cipőfűző képlet megvalósítása:
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);
}
Ez a funkció:
Egy sor csúcskoordinátát vesz fel
Hurkok az egyes pontokon és a következő ponton (az első pontra csomagolva)
Alkalmazza a kereszttermék számítását
Az abszolút értéket veszi, és 2 -vel osztja meg a végső területet
Ennek az algoritmusnak a szépsége az, hogy bármilyen sokszögnél működik, függetlenül attól, hogy konvex vagy konkáv, mindaddig, amíg nem keresztezi magát.
Adott funkciók hozzáadása
Most, hogy az alapvető számológép működik, bővítsük néhány fejlett funkcióval:
Egységkonverzió
Számolónk különféle mérési egységeket támogat:
Pixelek: képernyő-alapú mérésekhez
Méter: A valós mutatók méréseihez
Lábok: A birodalmi mérésekhez
Az egységkonverziót a terület kiszámítása után alkalmazzák:
// 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;
}
A konverziós tényezőket testreszabhatja az Ön konkrét követelményei alapján.
A számológép interfésze, amely megmutatja az egységkonverziós beállításokat a különböző mérési rendszerekhez
Részletes számítási lépések
Annak érdekében, hogy a felhasználók megértsék a terület kiszámítását, a számítási lépések részletes bontását adjuk meg:
// 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>`;
}
Ez az átlátszóság segíti a felhasználókat az eredmények ellenőrzésében és a sokszög területi számítások mögött meghúzódó matematikai alapelvek megismerésében.
Tesztelés és validálás
Mielőtt a geometriai számológépünk teljes megfontolása lenne, teszteljük néhány ismert formával, hogy ellenőrizze annak pontosságát:
1. teszt eset: téglalap
Egy egyszerű téglalap, amely csúcsokkal (0,0), (100,0), (100,50) és (0,50) -nál 5000 négyzet alakú területet kell tartalmaznia.
2. teszt eset: Háromszög
A (0,0), (50 100) és (100,0) csúcspontú háromszögnek 5000 négyzet alakú területe van.
3. teszt eset: szabálytalan sokszög
Egy szabálytalan sokszög csúcsokkal (0,0), (50 100), (100,50), (75,25) és (25,25) ponton kell adnia a megfelelő területet a cipőfűző képlet alapján.
Minden egyes teszt esetén a számológépünknek:
Engedje meg a tesztkoordináták egyszerű bemenetét
Számítsa ki a megfelelő területet
Jelenítse meg az ellenőrzés számítási lépéseit
Optimalizálás a mobil eszközökhöz
Annak érdekében, hogy a geometriai kalkulátorunk teljes mértékben reagáljon, hozzáadhatjuk a következő fejlesztéseket:
Érintse meg a vászon interakciójának támogatását
Reagáló elrendezés, amely alkalmazkodik a különböző képernyőméretekhez
Egyszerűsített felület a kisebb képernyőkhöz
Ezek a kiegészítések biztosítják, hogy számológépünk okostelefonokon és táblagépeken használható legyen, így hozzáférhetővé teszi a felhasználók számára az összes eszközön.
További fejlesztések
Annak érdekében, hogy a geometriai terület számológépünk még robusztusabbá tegye, fontolja meg ezeket a kiegészítő szolgáltatások megvalósítását:
Előre beállított formák
Adjon hozzá gombokat, hogy gyorsan létrehozhassa a közös formákat, mint például:
Négyzet
Téglalap
Háromszög
Kör (szokásos sokszögként közelítve)
Rendszeres sokszögek (Pentagon, hatszög stb.)
A körök területének kiszámítása
Bővítse a számológépet a körterületek kezelésére:
function calculateCircleArea(radius) {
return Math.PI * radius * radius;
}
Kerületi kiszámítás
Adjon hozzá funkcionalitást a sokszögek kerületének kiszámításához:
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;
}
A sokszögek mentése és betöltése
Végezze el a localStorage -t a sokszög konfigurációk mentéséhez és betöltéséhez:
// 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();
}
}
Gyakorlati alkalmazások
Különböző valós alkalmazások, ahol a geometriai terület számológépek értékes megoldásokat kínálnak
JavaScript geometriai terület számológépünk számos gyakorlati alkalmazásban található:
Webfejlesztés
Interaktív térképek és telek vizualizációi
Földmérési kérelmek
Ingatlantervezési eszközök
Szobai elrendezés és tervezési alkalmazások
Oktatás
A geometriai alapelvek interaktív tanítása
A matematikai koncepciók megjelenítése
Interaktív tanulási források létrehozása
Játékfejlesztés
Az ütközés észlelése a játékobjektumokhoz
Szinttervezés és környezet létrehozása
A játékvilágok eljárási generációja
Következtetés
Ebben az átfogó bemutatóban egy erőteljes, interaktív geometriai terület számológépet készítettünk a JavaScript segítségével.A számológépünk:
Pontosan számítsa ki a poligonok területét a cipőfűző képlet segítségével
Adjon meg intuitív vizuális felületet az alakzatok létrehozásához és módosításához
Támogassa a kézi koordináta bemenetet a pontos mérésekhez
Konvertáljon a különböző mérési egységek között
Mutassa meg a részletes számítási lépéseket oktatási célokra
Az általunk lefedett alapelvek és technikák - a koordináta geometria, a cipőfűző algoritmus, a vászon manipuláció és a felhasználói felület kialakítása - értékes készségek, amelyek túlmutatnak ezen a konkrét projekten.Alkalmazhatja azokat különféle webfejlesztési kihívásokra, az adatmegjelenítéstől az interaktív alkalmazásokig.
A geometriai számológép felépítésével nemcsak hasznos eszközt hozott létre, hanem elmélyítette a matematikai koncepciók és azok megvalósítását a JavaScriptben is.Nyugodtan bővítse a számológépet további funkciókkal, optimalizálja a teljesítményét, vagy integrálhatja azt a saját projektjeibe.
