Побудова калькулятора зони геометрії JavaScript: Підручник з інтерактивного розробника 2025
Anh Quân
Creator
Зміст
- Вступ: Навіщо будувати калькулятор геометрії?
- Що ми будуємо
- Передумови
- Розуміння математики за обчисленнями області
- Налаштування проекту
- Реалізація JavaScript
- Розуміння ключових компонентів
- Додавання розширених функцій
- Тестування та перевірка
- Оптимізація для мобільних пристроїв
- Додаткові вдосконалення
- Практичні програми
- Висновок
- Ресурси для подальшого навчання
Поглиблений посібник із створення власного інтерактивного калькулятора геометрії за допомогою JavaScript, доповненого розрахунками області для простих і складних багатокутників.
Вступ: Навіщо будувати калькулятор геометрії?
Розрахунки геометрії утворюють основу численних реальних застосувань-від обстеження земель та архітектури до розробки ігор та географічних інформаційних систем.Як розробники, нам часто потрібні надійні інструменти для обчислення областей різних форм.Поки існує багато онлайн -калькуляторів, створення власних пропозицій декількох переваг:
- Повне налаштування, щоб відповідати вашим конкретним вимогам проекту
- Інтеграційна гнучкість з існуючими веб -додатками
- Можливість навчання для розуміння геометрії координат та алгоритмічного мислення
- Посилення портфоліо для демонстрації ваших навичок JavaScript
У цьому вичерпному підручнику ми пройдемо процес побудови потужного, інтерактивного калькулятора геометрії за допомогою JavaScript.Зрештою, у вас буде повністю функціональний веб -додаток, який точно обчислює область як простих, так і складних багатокутників за допомогою геометрії координат.
Що ми будуємо
Наш калькулятор геометрії буде:
- Дозволити користувачам вводити координати багатокутників через інтуїтивний інтерфейс
- Обчисліть ділянки як для регулярних, так і для нерегулярних багатокутників
- Підтримуйте кілька одиниць вимірювання
- Візуалізуйте фігури за допомогою HTML Canlas
- Забезпечити чіткі, точні результати при правильному окрузі
- Працюйте у всіх основних браузерах та пристроях
Попередній перегляд нашого остаточного калькулятора області геометрії JavaScript з інтерактивним входом полігону
Передумови
Щоб дотримуватися цього підручника, ви повинні мати:
- Основне розуміння HTML, CSS та JavaScript
- Знайомство з маніпуляцією з домом
- Текстовий редактор або IDE (проти коду, піднесений текст тощо)
- Сучасний веб -браузер
- Необов’язково: Розуміння основи геометрії координат
Розуміння математики за обчисленнями області
Перш ніж зануритися в код, давайте зрозуміємо математичні принципи, які живлять наш калькулятор геометрії.
Формула шнура для області багатокутника
Для обчислення області будь -якого багатокутника (регулярного або нерегулярного) ми використовуємо формулу шнурового шнура, також відому як формула геодезиста або формула області Гаусса.Цей потужний алгоритм працює для будь -якого багатокутника, визначеного його вершинами, незалежно від того, наскільки складною може бути форма.
Формула виражається як:
Area = 0.5 * |∑(x_i * y_(i+1) - x_(i+1) * y_i)| Де:
x_iandy_iare the coordinates of the i-th vertex- Формула обчислює половину суми перехресних продуктів сусідніх вершин
- Абсолютне значення забезпечує позитивну область
Ця формула працює, "ходьба" по периметру багатокутника, обчислюючи перехресні вироби між послідовними точками.Коли ми підсумовуємо їх і ділимо на 2, ми отримуємо область багатокутника.
Налаштування проекту
Почнемо з встановлення основної структури нашого калькулятора геометрії:
Структура 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">
<h1>Geometry Area Calculator</h1>
<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 -стиль
Create a file named styles.css for styling our calculator:
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: #f5f5f5;
padding: 20px;
}
.calculator-container {
max-width: 800px;
margin: 0 auto;
background-color: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
color: #333;
margin-bottom: 30px;
}
h2 {
font-size: 1.5rem;
margin-bottom: 15px;
color: #444;
}
p {
margin-bottom: 20px;
color: #666;
}
.canvas-container {
margin-bottom: 30px;
text-align: center;
}
canvas {
border: 1px solid #ccc;
background-color: #f9f9f9;
}
.manual-input {
margin-bottom: 25px;
}
.coordinates-container {
max-height: 200px;
overflow-y: auto;
margin-bottom: 15px;
}
.coordinate-pair {
display: flex;
margin-bottom: 8px;
align-items: center;
}
input {
width: 80px;
padding: 8px;
margin-right: 10px;
border: 1px solid #ccc;
border-radius: 4px;
}
button {
padding: 8px 15px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #45a049;
}
.remove-point {
background-color: #f44336;
padding: 8px 12px;
}
.remove-point:hover {
background-color: #d32f2f;
}
#clear-canvas {
margin-top: 10px;
}
.units-selection {
margin-bottom: 25px;
}
select {
padding: 8px;
border: 1px solid #ccc;
border-radius: 4px;
}
.results-section {
margin-top: 30px;
padding: 20px;
background-color: #f0f8ff;
border-radius: 6px;
display: none;
}
.results-section.active {
display: block;
}
.area-result {
font-size: 1.3rem;
margin-bottom: 15px;
}
.calculation-steps {
margin-top: 20px;
padding: 15px;
background-color: #f5f5f5;
border-radius: 4px;
font-family: monospace;
}Реалізація JavaScript
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);
Візуальне представлення того, як формула шнурової форми обчислює площу багатокутника
Розуміння ключових компонентів
Давайте розберемо основні компоненти нашого калькулятора області геометрії:
Взаємодія полотна
Наш калькулятор використовує HTML Canvas Element для створення інтерактивного багатокутника.Користувачі можуть:
- Клацніть на полотні, щоб додати точки
- Перетягніть існуючі точки, щоб регулювати положення
- Див. Візуалізація багатокутника в режимі реального часу
- Переглянути координатну сітку для довідки
Полотно налаштоване за допомогою системи координат, де (0,0) знаходиться в центрі, що робить інтуїтивним для користувачів працювати як з позитивними, так і з негативними координатами.
Координація управління входами
Користувачі можуть вводити координати двома способами:
- Візуальний вхід: Клацніть безпосередньо на полотні, щоб розмістити точки
- Ручний вхід: введіть точні координати в поля введення
Два вхідні методи синхронізуються, що дозволяє як інтуїтивно зрозуміло візуальне розміщення, так і точний числовий вхід.
Впровадження алгоритму шнурового алгоритму
Ядром нашого калькулятора є реалізація формули Shoelace:
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);
}Ця функція:
- Бере масив вершин координат
- Петлі через кожну точку та наступну точку (обертається до першої точки)
- Застосовує розрахунок перехресного продукту
- Приймає абсолютне значення і ділиться на 2, щоб отримати остаточну область
Краса цього алгоритму полягає в тому, що він працює для будь -якого багатокутника, незалежно від того, опуклий чи увігнутий, доки він не перетинається.
Додавання розширених функцій
Тепер, коли у нас працює основний калькулятор, давайте розширимо його з деякими вдосконаленими функціями:
Перетворення одиниць
Наш калькулятор підтримує різні одиниці вимірювання:
- Пікселі: для вимірювань на основі екрана
- Лічильники: для метричних вимірювань у реальному світі
- Ноги: для імперських вимірювань
Перетворення одиниці застосовується після обчислення області:
// 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;
}Ви можете налаштувати коефіцієнти перетворення на основі ваших конкретних вимог.
Інтерфейс калькулятора, що показує параметри перетворення одиниць для різних систем вимірювання
Детальні етапи обчислення
Щоб допомогти користувачам зрозуміти, як обчислюється область, ми надаємо детальний розбиття кроків обчислення:
// 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>`;
}Ця прозорість допомагає користувачам перевірити результати та дізнатися про математичні принципи, що стоять за розрахунками області багатокутників.
Тестування та перевірка
Перш ніж розглянути наш калькулятор геометрії завершити, давайте перевіримо його з деякими відомими формами, щоб перевірити його точність:
Тестовий випадок 1: прямокутник
Простий прямокутник з вершинами в (0,0), (100,0), (100,50) та (0,50) повинен мати площу 5000 квадратних одиниць.
Тестовий випадок 2: Трикутник
Трикутник з вершинами в (0,0), (50 100) та (100,0) повинен мати площу 5000 квадратних одиниць.
Випадок 3: нерегулярний багатокутник
Нерегулярний багатокутник з вершинами в (0,0), (50 100), (100,50), (75,25) та (25,25) повинен дати нам правильну площу на основі формули шнурового шнура.
Для кожного тестового випадку наш калькулятор повинен:
- Дозволити легкий вхід тестових координат
- Обчисліть правильну область
- Відобразити етапи обчислення для перевірки
Оптимізація для мобільних пристроїв
Щоб зробити наш калькулятор геометрії повністю чуйним, ми можемо додати такі вдосконалення:
- Торкна підтримка взаємодії полотна
- Чуйний макет, який адаптується до різних розмірів екрану
- Спрощений інтерфейс для менших екранів
Ці доповнення гарантують, що наш калькулятор можна використовувати на смартфонах та планшетах, що робить його доступним для користувачів на всіх пристроях.
Додаткові вдосконалення
Щоб зробити наш калькулятор області геометрії ще більш надійним, подумайте про впровадження цих додаткових функцій:
Позначені форми
Додайте кнопки, щоб швидко створити поширені форми, такі як:
- Квадратний
- Прямокутник
- Трикутник
- Коло (наближено як звичайний багатокутник)
- Регулярні багатокутники (Пентагон, шестикутник тощо)
Обчислення області для кола
Розширте калькулятор для обробки областей кола за допомогою:
function calculateCircleArea(radius) {
return Math.PI * radius * radius;
}Розрахунок периметра
Додайте функціональність для обчислення периметра багатокутників:
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;
}Економія та завантаження багатокутників
Реалізуйте LocalStorage для збереження та завантаження багатокутніх конфігурацій:
// 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();
}
}Практичні програми
Різні реальні програми, де калькулятори області геометрії пропонують цінні рішення
Наш калькулятор області геометрії JavaScript має численні практичні програми:
Веб -розробка
- Інтерактивні карти та сюжет візуалізації
- Застосування земельних ділянок
- Інструменти планування нерухомості
- Розміщення кімнати та дизайнерські програми
Освіта
- Викладання геометричних принципів інтерактивно
- Візуалізація математичних концепцій
- Створення інтерактивних навчальних ресурсів
Розробка ігор
- Виявлення зіткнень для ігрових об'єктів
- Дизайн рівня та створення навколишнього середовища
- Процедурне покоління ігрових світів
Висновок
У цьому вичерпному підручнику ми створили потужний, інтерактивний калькулятор геометрії за допомогою JavaScript.Наш калькулятор може:
- Точно обчисліть область будь -якого багатокутника за допомогою формули шнурової шнурки
- Забезпечити інтуїтивний візуальний інтерфейс для створення та модифікації форм
- Підтримка введення вручну координат для точних вимірювань
- Перетворення між різними одиницями вимірювання
- Показати детальні кроки обчислення для навчальних цілей
Принципи та методи, які ми висвітлювали - координаційна геометрія, алгоритм шнурового шнура, маніпуляція з полотна та дизайн інтерфейсу користувача - є цінними навичками, що виходять за рамки цього конкретного проекту.Ви можете застосувати їх до різних проблем веб -розробки - від візуалізації даних до інтерактивних додатків.
Створюючи цей калькулятор геометрії, ви не тільки створили корисний інструмент, але й поглибили своє розуміння математичних понять та їх реалізації в JavaScript.Не соромтеся розширити калькулятор додатковими функціями, оптимізувати його продуктивність або інтегрувати його у власні проекти.
Щасливе кодування!