Membina Kalkulator Kawasan Geometri JavaScript: Tutorial Pemaju Interaktif 2025
Buat kalkulator kawasan poligon interaktif menggunakan JavaScript. Formula geometri induk, pengiraan koordinat, dan alat pengukuran berasaskan web untuk kedua-dua poligon mudah dan kompleks.
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 kawasanformula geometri untuk pemajukalkulator berasaskan webmengira kawasan JavaScriptmenyelaraskan kalkulator geometrialat geometri pemajuKalkulator Kawasan Peta Google
Panduan yang mendalam untuk membuat kalkulator geometri interaktif anda sendiri menggunakan JavaScript, lengkap dengan pengiraan kawasan untuk poligon mudah dan kompleks.
Pengenalan: Mengapa Membina Kalkulator Geometri?
Pengiraan geometri membentuk asas pelbagai aplikasi dunia sebenar-dari tinjauan tanah dan seni bina kepada pembangunan permainan dan sistem maklumat geografi.Sebagai pemaju, kita sering memerlukan alat yang boleh dipercayai untuk mengira bidang pelbagai bentuk.Walaupun terdapat banyak kalkulator dalam talian yang ada, membina sendiri menawarkan beberapa kelebihan:
Penyesuaian lengkap agar sesuai dengan keperluan projek khusus anda
Fleksibiliti integrasi dengan aplikasi web anda yang ada
Peluang belajar untuk memahami menyelaraskan geometri dan pemikiran algoritma
Peningkatan Portfolio untuk mempamerkan kemahiran JavaScript anda
Dalam tutorial yang komprehensif ini, kami akan melalui proses membina kalkulator kawasan geometri yang kuat dan interaktif menggunakan JavaScript.Pada akhirnya, anda akan mempunyai aplikasi web berfungsi sepenuhnya yang mengira dengan tepat kawasan poligon mudah dan kompleks menggunakan geometri koordinat.
Apa yang akan kita bina
Kalkulator Geometri kami akan:
Benarkan pengguna memasukkan koordinat poligon melalui antara muka intuitif
Kirakan kawasan untuk kedua -dua poligon biasa dan tidak teratur
Sokong pelbagai unit pengukuran
Gambarkan bentuk menggunakan kanvas html
Memberikan hasil yang jelas dan tepat dengan pembulatan yang betul
Bekerja di semua pelayar dan peranti utama
Pratonton Kalkulator Kawasan Geometri JavaScript terakhir kami dengan input poligon interaktif
Prasyarat
Untuk mengikuti tutorial ini, anda harus mempunyai:
Pemahaman asas HTML, CSS, dan JavaScript
Kebiasaan dengan manipulasi dom
Editor teks atau IDE (vs kod, teks luhur, dll.)
Penyemak imbas web moden
Pilihan: Memahami asas geometri koordinat
Memahami matematik di sebalik pengiraan kawasan
Sebelum menyelam ke dalam kod, mari kita fahami prinsip -prinsip matematik yang menguasai kalkulator geometri kita.
Formula kasut untuk kawasan poligon
Untuk mengira kawasan mana -mana poligon (biasa atau tidak teratur), kami akan menggunakan formula kasut, yang juga dikenali sebagai formula juru ukur atau formula kawasan Gauss.Algoritma yang kuat ini berfungsi untuk mana -mana poligon yang ditakrifkan oleh simpulnya, tanpa mengira betapa kompleksnya bentuknya.
Formula dinyatakan sebagai:
Area = 0.5 * |∑(x_i * y_(i+1) - x_(i+1) * y_i)|
Di mana:
x_i and y_i are the coordinates of the i-th vertex
Formula mengira separuh jumlah produk salib dari simpang bersebelahan
Nilai mutlak memastikan kawasan positif
Formula ini berfungsi dengan "berjalan" di sekitar perimeter poligon, mengira produk silang antara titik berturut -turut.Apabila kita menyimpulkan ini dan membahagikannya dengan 2, kita mendapat kawasan poligon.
Persediaan Projek
Mari kita mulakan dengan menubuhkan struktur asas kalkulator geometri kami:
Struktur 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>
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);
Perwakilan visual bagaimana formula kasut mengira kawasan poligon
Memahami komponen utama
Mari merosakkan komponen utama kalkulator Kawasan Geometri kami:
Interaksi kanvas
Kalkulator kami menggunakan elemen kanvas HTML untuk penciptaan poligon interaktif.Pengguna boleh:
Klik pada kanvas untuk menambah mata
Seret mata sedia ada untuk menyesuaikan kedudukan
Lihat visualisasi masa nyata poligon
Lihat grid koordinat untuk rujukan
Kanvas ini ditubuhkan dengan sistem koordinat di mana (0,0) berada di pusat, menjadikannya intuitif bagi pengguna untuk bekerja dengan koordinat positif dan negatif.
Menyelaras pengurusan input
Pengguna boleh memasukkan koordinat dalam dua cara:
Input Visual: Klik terus pada kanvas untuk meletakkan mata
Input manual: Masukkan koordinat tepat dalam medan input
Kedua -dua kaedah input disegerakkan, membolehkan kedua -dua penempatan visual intuitif dan input berangka yang tepat.
Pelaksanaan algoritma kasut
Inti kalkulator kami adalah pelaksanaan formula kasut:
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);
}
Fungsi ini:
Mengambil pelbagai koordinat puncak
Gelung melalui setiap titik dan titik seterusnya (membungkus ke titik pertama)
Menggunakan pengiraan silang produk
Mengambil nilai mutlak dan membahagikan 2 untuk mendapatkan kawasan akhir
Keindahan algoritma ini adalah bahawa ia berfungsi untuk mana -mana poligon, tanpa mengira sama ada ia cembung atau cekung, selagi ia tidak bersilang sendiri.
Menambah ciri canggih
Sekarang kita mempunyai kalkulator asas yang berfungsi, mari kita lanjutkan dengan beberapa ciri canggih:
Penukaran unit
Kalkulator kami menyokong unit pengukuran yang berbeza:
Pixel: Untuk ukuran berasaskan skrin
Meter: Untuk pengukuran metrik dunia nyata
Kaki: Untuk pengukuran imperial
Penukaran unit digunakan selepas pengiraan kawasan:
// 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;
}
Anda boleh menyesuaikan faktor penukaran berdasarkan keperluan khusus anda.
Antara muka kalkulator yang menunjukkan pilihan penukaran unit untuk sistem pengukuran yang berbeza
Langkah pengiraan terperinci
Untuk membantu pengguna memahami bagaimana kawasan itu dikira, kami menyediakan pecahan terperinci mengenai langkah -langkah pengiraan:
// 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>`;
}
Ketelusan ini membantu pengguna mengesahkan hasilnya dan belajar tentang prinsip -prinsip matematik di sebalik pengiraan kawasan poligon.
Ujian dan Pengesahan
Sebelum mempertimbangkan kalkulator geometri kami selesai, mari kita uji dengan beberapa bentuk yang diketahui untuk mengesahkan ketepatannya:
Kes Ujian 1: Rectangle
Rectangle mudah dengan simpang pada (0,0), (100,0), (100,50), dan (0,50) harus mempunyai kawasan 5,000 unit persegi.
Kes Ujian 2: Segitiga
Segitiga dengan simpang pada (0,0), (50,100), dan (100,0) harus mempunyai kawasan 5,000 unit persegi.
Ujian Kes 3: Poligon yang tidak teratur
Poligon yang tidak teratur dengan simpang pada (0,0), (50,100), (100,50), (75,25), dan (25,25) harus memberi kita kawasan yang betul berdasarkan formula kasut.
Untuk setiap kes ujian, kalkulator kami harus:
Benarkan input mudah koordinat ujian
Kirakan kawasan yang betul
Paparkan langkah pengiraan untuk pengesahan
Mengoptimumkan untuk peranti mudah alih
Untuk menjadikan kalkulator geometri kami responsif sepenuhnya, kami boleh menambah peningkatan berikut:
Sentuh sokongan untuk interaksi kanvas
Susun atur responsif yang menyesuaikan diri dengan saiz skrin yang berbeza
Antara muka yang dipermudahkan untuk skrin yang lebih kecil
Penambahan ini memastikan kalkulator kami boleh digunakan pada telefon pintar dan tablet, menjadikannya mudah diakses oleh pengguna di semua peranti.
Peningkatan tambahan
Untuk menjadikan Kalkulator Kawasan Geometri kami lebih mantap, pertimbangkan untuk melaksanakan ciri -ciri tambahan ini:
Bentuk preset
Tambahkan butang dengan cepat membuat bentuk biasa seperti:
Dataran
Rectangle
Segitiga
Bulatan (dianggarkan sebagai poligon biasa)
Poligon biasa (pentagon, segi enam, dll.)
Pengiraan Kawasan untuk Lingkaran
Panjangkan kalkulator untuk mengendalikan kawasan bulatan menggunakan:
function calculateCircleArea(radius) {
return Math.PI * radius * radius;
}
Pengiraan perimeter
Tambah fungsi untuk mengira perimeter poligon:
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;
}
Menjimatkan dan memuatkan poligon
Melaksanakan LocalStorage untuk menyimpan dan memuatkan konfigurasi poligon:
// 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();
}
}
Aplikasi praktikal
Pelbagai aplikasi dunia nyata di mana kalkulator kawasan geometri menyediakan penyelesaian yang berharga
Kalkulator Kawasan Geometri JavaScript kami mempunyai banyak aplikasi praktikal:
Pembangunan Web
Peta interaktif dan visualisasi plot
Permohonan tinjauan tanah
Alat Perancangan Harta Tanah
Susun atur bilik dan aplikasi reka bentuk
Pendidikan
Mengajar prinsip geometri secara interaktif
Menggambarkan konsep matematik
Mewujudkan sumber pembelajaran interaktif
Pembangunan permainan
Pengesanan perlanggaran untuk objek permainan
Reka Bentuk Tahap dan Penciptaan Alam Sekitar
Generasi Prosedur Dunia Permainan
Kesimpulan
Dalam tutorial yang komprehensif ini, kami telah membina kalkulator kawasan geometri yang kuat dan interaktif menggunakan JavaScript.Kalkulator kami boleh:
Hitung dengan tepat kawasan poligon menggunakan formula kasut
Sediakan antara muka visual intuitif untuk membuat dan mengubah bentuk bentuk
Sokongan input koordinat manual untuk pengukuran yang tepat
Tukar antara unit pengukuran yang berbeza
Tunjukkan langkah pengiraan terperinci untuk tujuan pendidikan
Prinsip dan teknik yang kami tutup -koordinat geometri, algoritma kasut, manipulasi kanvas, dan reka bentuk antara muka pengguna -adalah kemahiran berharga yang melangkaui projek khusus ini.Anda boleh menggunakannya untuk pelbagai cabaran pembangunan web, dari visualisasi data ke aplikasi interaktif.
Dengan membina kalkulator geometri ini, anda bukan sahaja mencipta alat yang berguna tetapi juga memperdalam pemahaman anda tentang konsep matematik dan pelaksanaannya dalam JavaScript.Jangan ragu untuk melanjutkan kalkulator dengan ciri tambahan, mengoptimumkan prestasinya, atau mengintegrasikannya ke dalam projek anda sendiri.
