Δημιουργία αριθμομηχανή περιοχής γεωμετρίας JavaScript: Tutorial Developer Tutorial 2025
Anh Quân
Creator
Πίνακας περιεχομένων
- Εισαγωγή: Γιατί να οικοδομήσουμε μια αριθμομηχανή γεωμετρίας;
- Τι θα χτίσουμε
- Προϋποθέσεις
- Κατανόηση των μαθηματικών πίσω από τους υπολογισμούς της περιοχής
- Ρύθμιση έργου
- Εφαρμογή JavaScript
- Κατανόηση των βασικών στοιχείων
- Προσθήκη προηγμένων χαρακτηριστικών
- Δοκιμές και επικύρωση
- Βελτιστοποίηση για κινητές συσκευές
- Πρόσθετες βελτιώσεις
- Πρακτικές εφαρμογές
- Σύναψη
- Πόροι για περαιτέρω μάθηση
Ένας σε βάθος οδηγός για τη δημιουργία του δικού σας διαδραστικού αριθμομηχανή γεωμετρίας χρησιμοποιώντας JavaScript, πλήρης με υπολογισμούς περιοχής για απλά και σύνθετα πολυγώνες.
Εισαγωγή: Γιατί να οικοδομήσουμε μια αριθμομηχανή γεωμετρίας;
Οι υπολογισμοί γεωμετρίας αποτελούν το θεμέλιο πολυάριθμων εφαρμογών πραγματικού κόσμου-από την ετικέτα της γης και την αρχιτεκτονική μέχρι την ανάπτυξη παιχνιδιών και τα γεωγραφικά συστήματα πληροφοριών.Ως προγραμματιστές, συχνά χρειαζόμαστε αξιόπιστα εργαλεία για τον υπολογισμό των περιοχών διαφόρων σχημάτων.Ενώ υπάρχουν πολλοί ηλεκτρονικοί αριθμομηχανές, η οικοδόμηση των δικών σας προσφέρει πολλά πλεονεκτήματα:
- Πλήρης προσαρμογή για να ταιριάζει στις συγκεκριμένες απαιτήσεις του έργου σας
- Ευελιξία ενσωμάτωσης με τις υπάρχουσες εφαρμογές ιστού σας
- Μαθαίνοντας την ευκαιρία να κατανοήσουμε τη γεωμετρία των συντεταγμένων και την αλγοριθμική σκέψη
- Βελτίωση χαρτοφυλακίου για να παρουσιάσετε τις δεξιότητές σας JavaScript
Σε αυτό το ολοκληρωμένο σεμινάριο, θα περπατήσουμε στη διαδικασία κατασκευής ενός ισχυρού, αριθμομηχανή διαδραστικής γεωμετρίας χρησιμοποιώντας το JavaScript.Μέχρι το τέλος, θα έχετε μια πλήρως λειτουργική εφαρμογή ιστού που υπολογίζει με ακρίβεια την περιοχή τόσο απλών όσο και σύνθετων πολυγώνων χρησιμοποιώντας γεωμετρία συντεταγμένων.
Τι θα χτίσουμε
Ο υπολογιστής γεωμετρίας μας θα:
- Επιτρέψτε στους χρήστες να εισάγουν συντεταγμένες πολυγώνου μέσω μιας διαισθητικής διεπαφής
- Υπολογίστε περιοχές τόσο για τακτικά όσο και για ακανόνιστα πολύγωνα
- Υποστήριξη πολλαπλών μονάδων μέτρησης
- Οπτικοποιήστε τα σχήματα χρησιμοποιώντας καμβά HTML
- Παρέχετε σαφή, ακριβή αποτελέσματα με σωστή στρογγυλοποίηση
- Εργαστείτε σε όλα τα μεγάλα προγράμματα περιήγησης και συσκευές
Μια προεπισκόπηση του τελικού αριθμομηχανή περιοχής γεωμετρίας JavaScript με διαδραστική είσοδο πολυγώνου
Προϋποθέσεις
Για να ακολουθήσετε μαζί με αυτό το σεμινάριο, θα πρέπει να έχετε:
- Βασική κατανόηση των HTML, CSS και JavaScript
- Εξοικείωση με τη χειραγώγηση του DOM
- Επεξεργαστής κειμένου ή IDE (VS Code, Sublime Text, κ.λπ.)
- Σύγχρονο πρόγραμμα περιήγησης στο Web
- Προαιρετικά: Κατανόηση των βασικών γεωμετρίας συντεταγμένων
Κατανόηση των μαθηματικών πίσω από τους υπολογισμούς της περιοχής
Πριν από την κατάδυση στον κώδικα, ας κατανοήσουμε τις μαθηματικές αρχές που εξουσιώνουν τον υπολογισμό της γεωμετρίας μας.
Η φόρμουλα των κορδονιών για την περιοχή του πολυγώνου
Για τον υπολογισμό της έκτασης οποιουδήποτε πολυγώνου (κανονικού ή ακανόνιστου), θα χρησιμοποιήσουμε τη φόρμουλα των κορδονιών, γνωστή και ως φόρμουλα του επιθεωρητή ή ο τύπος της περιοχής του Gauss.Αυτός ο ισχυρός αλγόριθμος λειτουργεί για κάθε πολύγωνο που ορίζεται από τις κορυφές του, ανεξάρτητα από το πόσο περίπλοκο μπορεί να είναι το σχήμα.
Ο τύπος εκφράζεται ως:
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 καμβά για τη δημιουργία διαδραστικού πολυγώνου.Οι χρήστες μπορούν:
- Κάντε κλικ στον καμβά για να προσθέσετε πόντους
- Σύρετε τα υπάρχοντα σημεία για να ρυθμίσετε τις θέσεις
- Δείτε την απεικόνιση του πολυγώνου σε πραγματικό χρόνο
- Δείτε ένα πλέγμα συντεταγμένων για αναφορά
Ο καμβάς έχει συσταθεί με ένα σύστημα συντεταγμένων όπου (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 για να πάρει την τελική περιοχή
Η ομορφιά αυτού του αλγορίθμου είναι ότι λειτουργεί για οποιοδήποτε πολύγωνο, ανεξάρτητα από το αν είναι κυρτό ή κοίλο, εφόσον δεν τέμνει.
Προσθήκη προηγμένων χαρακτηριστικών
Τώρα που έχουμε τη βασική αριθμομηχανή, ας το επεκτείνουμε με ορισμένα προηγμένα χαρακτηριστικά:
Μετατροπή μονάδας
Ο υπολογιστής μας υποστηρίζει διαφορετικές μονάδες μέτρησης:
- Pixels: για μετρήσεις με βάση την οθόνη
- Μέτρα: Για μετρικές μετρήσεις πραγματικού κόσμου
- Πόδια: για αυτοκρατορικές μετρήσεις
Η μετατροπή μονάδας εφαρμόζεται μετά τον υπολογισμό της περιοχής:
// 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) πρέπει να έχει έκταση 5.000 τετραγωνικών μονάδων.
Δοκιμαστική περίπτωση 2: τρίγωνο
Ένα τρίγωνο με κορυφές στα (0,0), (50,100) και (100,0) πρέπει να έχει έκταση 5.000 τετραγωνικών μονάδων.
Περίπτωση δοκιμής 3: ακανόνιστο πολύγωνο
Ένα ακανόνιστο πολύγωνο με κορυφές στις (0,0), (50,100), (100,50), (75,25) και (25,25) πρέπει να μας δώσει τη σωστή περιοχή με βάση τη φόρμουλα των κορδονιών.
Για κάθε περίπτωση δοκιμής, ο υπολογιστής μας πρέπει:
- Επιτρέψτε την εύκολη είσοδο των συντεταγμένων δοκιμής
- Υπολογίστε τη σωστή περιοχή
- Εμφάνιση των βημάτων υπολογισμού για επαλήθευση
Βελτιστοποίηση για κινητές συσκευές
Για να επιτύχουμε πλήρως τον αριθμομηχανή γεωμετρίας μας, μπορούμε να προσθέσουμε τις ακόλουθες βελτιώσεις:
- Υποστήριξη αφής για την αλληλεπίδραση καμβά
- Διάταξη απόκρισης που προσαρμόζεται σε διαφορετικά μεγέθη οθόνης
- Απλοποιημένη διεπαφή για μικρότερες οθόνες
Αυτές οι προσθήκες εξασφαλίζουν ότι ο υπολογιστής μας είναι χρησιμοποιήσιμος σε smartphones και tablet, καθιστώντας την προσιτή σε χρήστες σε όλες τις συσκευές.
Πρόσθετες βελτιώσεις
Για να γίνει ο υπολογιστής της περιοχής γεωμετρίας ακόμα πιο ισχυρή, σκεφτείτε να εφαρμόσετε αυτά τα πρόσθετα χαρακτηριστικά:
Προκαθορισμένα σχήματα
Προσθέστε κουμπιά για να δημιουργήσετε γρήγορα κοινά σχήματα όπως:
- Πλατεία
- Ορθογώνιο παραλληλόγραμμο
- Τρίγωνο
- Κύκλος (προσεγγίζεται ως κανονικό πολύγωνο)
- Τακτικά πολύγωνα (Πεντάγωνο, εξάγωνο κ.λπ.)
Υπολογισμός περιοχής για κύκλους
Επεκτείνετε την αριθμομηχανή για να χειριστείτε περιοχές κύκλου χρησιμοποιώντας:
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.Μη διστάσετε να επεκτείνετε την αριθμομηχανή με πρόσθετα χαρακτηριστικά, να βελτιστοποιήσετε την απόδοσή του ή να την ενσωματώσετε στα δικά σας έργα.
Καλή κωδικοποίηση!