Bir JavaScript Geometri Alanı Oluşturma Hesap Makinesi: Etkileşimli Geliştirici Eğitimi 2025
JavaScript kullanarak etkileşimli bir çokgen alan hesap makinesi oluşturun. Hem basit hem de karmaşık çokgenler için ana geometri formülleri, koordinat hesaplamaları ve web tabanlı ölçüm araçları.
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 areageometry formulas for developersweb-based Hesap MakinesiAlan JavaScript'i HesaplayınKoordinat Geometri Hesap MakinesiGeliştirici Geometri AraçlarıGoogle Haritalar Alan Hesap Makinesi
Basit ve karmaşık çokgenler için alan hesaplamalarıyla birlikte JavaScript kullanarak kendi etkileşimli geometri hesap makinenizi oluşturmak için derinlemesine bir kılavuz.
Giriş: Neden bir Geometri Hesap Makinesi Oluştur?
Geometri hesaplamaları, arazi araştırmasından ve mimariden oyun geliştirmeye ve coğrafi bilgi sistemlerine kadar çok sayıda gerçek dünya uygulamasının temelini oluşturur.Geliştiriciler olarak, çeşitli şekillerin alanlarını hesaplamak için genellikle güvenilir araçlara ihtiyacımız var.Mevcut birçok çevrimiçi hesap makinesi olsa da, kendinizi oluşturmak çeşitli avantajlar sunuyor:
Özel proje gereksinimlerinize uyacak şekilde tamamen özelleştirme
Mevcut web uygulamalarınızla entegrasyon esnekliği
Koordinat geometrisini ve algoritmik düşünceyi anlama fırsatı
JavaScript becerilerinizi sergilemek için portföy geliştirme
Bu kapsamlı öğreticide, JavaScript kullanarak güçlü, etkileşimli bir geometri alan hesap makinesi oluşturma sürecinden geçeceğiz.Sonunda, koordinat geometrisini kullanarak hem basit hem de karmaşık çokgenlerin alanını doğru bir şekilde hesaplayan tamamen işlevsel bir web uygulamasına sahip olacaksınız.
Ne inşa edeceğiz
Geometri hesap makinemiz:
Kullanıcıların sezgisel bir arayüz aracılığıyla çokgen koordinatlarını girmesine izin verin
Hem düzenli hem de düzensiz çokgenler için alanları hesaplayın
Birden çok ölçüm birimini destekleyin
HTML Canvas kullanarak şekilleri görselleştirin
Uygun yuvarlama ile net, doğru sonuçlar sağlayın
Tüm büyük tarayıcılar ve cihazlarda çalışın
Etkileşimli Polygon Girişli Son JavaScript Geometri Alan Hesap Makinemizin Önizlemesi
Önkoşul
Bu öğreticiyle birlikte takip etmek için:
HTML, CSS ve JavaScript'in temel anlayışı
Dom manipülasyonuna aşinalık
Metin Düzenleyicisi veya IDE (Kod, Yüce Metin, vb.)
Alan hesaplamalarının arkasındaki matematiği anlamak
Kod içine dalmadan önce, geometri hesap makinemize güç veren matematiksel ilkeleri anlayalım.
Çokgen alanı için ayakkabı bağı formülü
Herhangi bir çokgenin (normal veya düzensiz) alanını hesaplamak için, Surveyor Formülü veya Gauss'un alan formülü olarak da bilinen Shoelace Formülünü kullanacağız.Bu güçlü algoritma, şeklin ne kadar karmaşık olabileceğine bakılmaksızın, köşeleri tarafından tanımlanan herhangi bir çokgen için çalışır.
Formül şu şekilde ifade edilir:
Area = 0.5 * |∑(x_i * y_(i+1) - x_(i+1) * y_i)|
Nerede:
x_i and y_i are the coordinates of the i-th vertex
Bu formül, birbirini izleyen noktalar arasında çapraz ürünleri hesaplayarak çokgenin çevresi etrafında "yürürken" çalışır.Bunları özetlediğimizde ve 2'ye böldüğümüzde, çokgenin alanını alıyoruz.
Proje kurulumu
Geometri hesap makinemizin temel yapısını kurarak başlayalım:
HTML yapısı
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 stil
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);
Ayakkabı formülünün bir çokgen alanını nasıl hesapladığının görsel temsili
Anahtar bileşenleri anlamak
Geometri alanı hesap makinemizin ana bileşenlerini parçalayalım:
Tuval etkileşimi
Hesap makinemiz, etkileşimli çokgen oluşturma için bir HTML tuval öğesi kullanır.Kullanıcılar:
Puan eklemek için tuval üzerine tıklayın
Pozisyonları ayarlamak için mevcut noktaları sürükleyin
Çokgenin gerçek zamanlı görselleştirmesine bakın
Referans için bir koordinat ızgarasını görüntüleyin
Tuval, (0,0) merkezde olduğu bir koordinat sistemi ile kurulur ve bu da kullanıcıların hem olumlu hem de olumsuz koordinatlarla çalışmasını sezgisel hale getirir.
Giriş yönetimini koordine edin
Kullanıcılar koordinatları iki şekilde girebilir:
Görsel Giriş: Puanları yerleştirmek için doğrudan tuval üzerine tıklayın
Manuel Giriş: Giriş alanlarına kesin koordinatları girin
İki giriş yöntemi, hem sezgisel görsel yerleşime hem de hassas sayısal girişe izin veren senkronize edilir.
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);
}
Bu işlev:
Bir dizi tepe koordinatını alır
Her noktadan ve bir sonraki noktada döngüler (ilk noktaya sarılıyor)
Çapraz ürün hesaplamasını uygular
Mutlak değeri alır ve son alanı elde etmek için 2'ye bölünür
Bu algoritmanın güzelliği, kendisini kesişmediği sürece dışbükey veya içbükey olup olmadığına bakılmaksızın herhangi bir çokgen için çalışmasıdır.
Gelişmiş Özellikler Ekleme
Artık temel hesap makinesine sahip olduğumuza göre, bazı gelişmiş özelliklerle genişletelim:
Birim dönüşüm
Hesap makinemiz farklı ölçüm birimlerini destekler:
Pikseller: Ekran tabanlı ölçümler için
Metre: Gerçek dünyadaki metrik ölçümler için
Ayaklar: İmparatorluk ölçümleri için
Birim dönüşümü alan hesaplamasından sonra uygulanır:
// 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;
}
Dönüşüm faktörlerini özel gereksinimlerinize göre özelleştirebilirsiniz.
Farklı ölçüm sistemleri için birim dönüşüm seçeneklerini gösteren hesap makinesi arayüzü
Ayrıntılı hesaplama adımları
Kullanıcıların alanın nasıl hesaplandığını anlamalarına yardımcı olmak için hesaplama adımlarının ayrıntılı bir şekilde dökülmesini sağlıyoruz:
// 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>`;
}
Bu şeffaflık, kullanıcıların sonuçları doğrulamasına ve poligon alan hesaplamalarının arkasındaki matematiksel prensipleri öğrenmelerine yardımcı olur.
Test ve Doğrulama
Geometri hesap makinemizi tamamlamadan önce, doğruluğunu doğrulamak için bilinen bazı şekillerle test edelim:
Test Olgu 1: Dikdörtgen
(0,0), (100,0), (100,50) ve (0,50) 'deki köşeleri olan basit bir dikdörtgenin 5.000 kare bir üniteye sahip olması gerekir.
Test Olgu 2: Üçgen
(0,0), (50,100) ve (100,0) 'da köşeli bir üçgenin 5.000 kare birimden oluşan bir alana sahip olması gerekir.
Test Durumu 3: Düzensiz çokgen
(0,0), (50,100), (100,50), (75,25) ve (25,25) 'de köşe olan düzensiz bir çokgen bize Shoelace formülüne dayanan doğru alanı vermelidir.
Her test durumu için hesap makinemiz:
Test koordinatlarının kolay girişine izin verin
Doğru alanı hesaplayın
Doğrulama için hesaplama adımlarını görüntüleyin
Mobil cihazlar için optimize etme
Geometri hesap makinemizi tamamen duyarlı hale getirmek için aşağıdaki geliştirmeleri ekleyebiliriz:
Tuval etkileşimi için Destek Desteği
Farklı ekran boyutlarına uyum sağlayan duyarlı düzen
Daha küçük ekranlar için basitleştirilmiş arayüz
Bu eklemeler, hesap makinemizin akıllı telefonlarda ve tabletlerde kullanılabilir olmasını sağlar ve bu da onu tüm cihazlardaki kullanıcılar için erişilebilir hale getirir.
Ek geliştirmeler
Geometri alanı hesap makinemizi daha da sağlam hale getirmek için bu ek özellikleri uygulamayı düşünün:
Önceden ayarlanmış şekiller
Hızlı bir şekilde ortak şekiller oluşturmak için düğmeler ekleyin:
Kare
Dikdörtgen
Üçgen
Daire (normal bir çokgen olarak yaklaştırılır)
Normal çokgenler (Pentagon, Altıgen, vb.)
Çevreler için alan hesaplaması
Hesap makinesini aşağıdakileri kullanarak daire alanlarını işlemek için genişletin:
function calculateCircleArea(radius) {
return Math.PI * radius * radius;
}
Çevre hesaplaması
Çokgenlerin çevresini hesaplamak için işlevsellik ekleyin:
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;
}
Çokgen tasarrufu ve yükleme
Çokgen yapılandırmalarını kaydetmek ve yüklemek için LocalStorage'ı uygulayın:
// 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();
}
}
Pratik uygulamalar
Geometri alanı hesaplayıcılarının değerli çözümler sağladığı çeşitli gerçek dünya uygulamaları
JavaScript Geometri Alanı Hesap Makinemizde çok sayıda pratik uygulamaya sahiptir:
Web Geliştirme
Etkileşimli haritalar ve çizim görselleştirmeleri
Arazi Araştırma Uygulamaları
Emlak Planlama Araçları
Oda Düzeni ve Tasarım Uygulamaları
Eğitim
Geometrik ilkeleri etkileşimli olarak öğretmek
Matematiksel kavramları görselleştirme
Etkileşimli Öğrenme Kaynakları Oluşturma
Oyun geliştirme
Oyun nesneleri için çarpışma tespiti
Seviye Tasarım ve Çevre Yaratılması
Oyun dünyalarının prosedürel üretimi
Çözüm
Bu kapsamlı öğreticide, JavaScript kullanarak güçlü, etkileşimli bir geometri alan hesap makinesi oluşturduk.Hesap makinemiz şunları yapabilir:
Shoelace formülünü kullanarak herhangi bir çokgen alanını doğru bir şekilde hesaplayın
Şekiller oluşturmak ve değiştirmek için sezgisel bir görsel arayüz sağlayın
Kesin ölçümler için manuel koordinat girişini destekleyin
Farklı ölçüm birimleri arasında dönüşüm
Eğitim amaçlı ayrıntılı hesaplama adımlarını gösterin
Kapsadığımız ilkeler ve teknikler - geometri, ayakkabı bağı algoritması, tuval manipülasyonu ve kullanıcı arayüzü tasarımı - bu projenin ötesine uzanan değerli becerilerdir.Bunları veri görselleştirmesinden etkileşimli uygulamalara kadar çeşitli web geliştirme zorluklarına uygulayabilirsiniz.
Bu geometri hesap makinesini oluşturarak, sadece yararlı bir araç oluşturmakla kalmadınız, aynı zamanda matematiksel kavramlar ve bunların JavaScript'teki uygulanmasını anlamanızı da derinleştirdiniz.Hesap makinesini ek özelliklerle genişletmek, performansını optimize etmek veya kendi projelerinize entegre etmekten çekinmeyin.
