Jens Cornelsen
@@ -1,6 +1,6 @@
|
||||
---
|
||||
|
||||
import Layout from "#layouts/layoutCAD.astro";
|
||||
import Layout from "#layouts/layout.astro";
|
||||
import Widget2 from "#components/Widget.svelte";
|
||||
|
||||
---
|
||||
@@ -15,133 +15,6 @@ import Widget2 from "#components/Widget.svelte";
|
||||
</div>
|
||||
|
||||
|
||||
<div class="controls">
|
||||
<button onclick="clearCanvas()">Clear</button>
|
||||
</div>
|
||||
<canvas id="cadCanvas" width="800" height="600"></canvas>
|
||||
<div class="log">
|
||||
<strong>Captured Lines:</strong>
|
||||
<ul id="line-log"></ul>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const canvas = document.getElementById('cadCanvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const lineLog = document.getElementById('line-log');
|
||||
const pixelToMeter = 0.01; // Conversion factor: 1 pixel = 0.01 meter
|
||||
const gridSize = 10; // Size of each grid cell in pixels
|
||||
let lastEndPoint = null;
|
||||
let lastStartPoint = null;
|
||||
let capturedLines = [];
|
||||
|
||||
// Snap a coordinate to the nearest grid point
|
||||
function snapToGrid(value) {
|
||||
return Math.round(value / gridSize) * gridSize;
|
||||
}
|
||||
|
||||
// Draw the grid
|
||||
function drawGrid() {
|
||||
ctx.beginPath();
|
||||
ctx.strokeStyle = "#e0e0e0"; // Light gray grid lines
|
||||
ctx.lineWidth = 0.5;
|
||||
|
||||
// Draw vertical lines
|
||||
for (let x = 0; x <= canvas.width; x += gridSize) {
|
||||
ctx.moveTo(x, 0);
|
||||
ctx.lineTo(x, canvas.height);
|
||||
}
|
||||
|
||||
// Draw horizontal lines
|
||||
for (let y = 0; y <= canvas.height; y += gridSize) {
|
||||
ctx.moveTo(0, y);
|
||||
ctx.lineTo(canvas.width, y);
|
||||
}
|
||||
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
// Clear the canvas and reset logs
|
||||
function clearCanvas() {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
capturedLines = [];
|
||||
lastEndPoint = null;
|
||||
lastStartPoint = null;
|
||||
drawGrid(); // Redraw the grid after clearing
|
||||
updateLineLog();
|
||||
}
|
||||
|
||||
// Update the captured lines log
|
||||
function updateLineLog() {
|
||||
lineLog.innerHTML = capturedLines
|
||||
.map((line, index) => {
|
||||
const lengthInMeters = calculateLineLengthInMeters(line.startX, line.startY, line.endX, line.endY);
|
||||
return `<li>Line ${index + 1}: Start (${line.startX}, ${line.startY}), End (${line.endX}, ${line.endY}), Length: ${lengthInMeters.toFixed(2)} m</li>`;
|
||||
})
|
||||
.join('');
|
||||
}
|
||||
|
||||
// Calculate the length of a line in meters
|
||||
function calculateLineLengthInMeters(x1, y1, x2, y2) {
|
||||
const dx = x2 - x1;
|
||||
const dy = y2 - y1;
|
||||
const lengthInPixels = Math.sqrt(dx * dx + dy * dy);
|
||||
return lengthInPixels * pixelToMeter;
|
||||
}
|
||||
|
||||
// Mouse events
|
||||
canvas.addEventListener('mousedown', (e) => {
|
||||
const clickX = snapToGrid(e.offsetX);
|
||||
const clickY = snapToGrid(e.offsetY);
|
||||
|
||||
// Determine the starting point for the new line
|
||||
let startX, startY;
|
||||
|
||||
if (lastEndPoint && clickX === lastEndPoint.x && clickY === lastEndPoint.y) {
|
||||
// Snap to the last endpoint
|
||||
startX = lastEndPoint.x;
|
||||
startY = lastEndPoint.y;
|
||||
} else if (lastStartPoint && clickX === lastStartPoint.x && clickY === lastStartPoint.y) {
|
||||
// Snap to the last starting point
|
||||
startX = lastStartPoint.x;
|
||||
startY = lastStartPoint.y;
|
||||
} else if (!capturedLines.length) {
|
||||
// First line can start anywhere
|
||||
startX = clickX;
|
||||
startY = clickY;
|
||||
} else {
|
||||
// If click doesn't match a valid connection, do nothing
|
||||
return;
|
||||
}
|
||||
|
||||
// Determine the endpoint
|
||||
const endX = snapToGrid(e.offsetX);
|
||||
const endY = snapToGrid(e.offsetY);
|
||||
|
||||
// Draw the line
|
||||
drawLine(startX, startY, endX, endY);
|
||||
|
||||
// Update the last start and end points
|
||||
lastStartPoint = { x: startX, y: startY };
|
||||
lastEndPoint = { x: endX, y: endY };
|
||||
|
||||
// Capture the line details
|
||||
capturedLines.push({ startX, startY, endX, endY });
|
||||
updateLineLog();
|
||||
});
|
||||
|
||||
// Drawing functions
|
||||
function drawLine(x1, y1, x2, y2) {
|
||||
ctx.beginPath();
|
||||
ctx.strokeStyle = "#000000"; // Black color for lines
|
||||
ctx.lineWidth = 2; // Thicker lines
|
||||
ctx.moveTo(x1, y1);
|
||||
ctx.lineTo(x2, y2);
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
// Initialize canvas
|
||||
drawGrid(); // Draw the grid when the page loads
|
||||
</script>
|
||||
|
||||
</Layout>
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
---
|
||||
|
||||
import Layout from "#layouts/Layout.astro";
|
||||
import Layout from "#layouts/layoutCAD.astro";
|
||||
|
||||
---
|
||||
|
||||
@@ -66,4 +66,138 @@ import Layout from "#layouts/Layout.astro";
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="controls">
|
||||
<button onclick="clearCanvas()">Clear</button>
|
||||
</div>
|
||||
<canvas id="cadCanvas" width="800" height="600"></canvas>
|
||||
<div class="log">
|
||||
<strong>Captured Lines:</strong>
|
||||
<ul id="line-log"></ul>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
const canvas = document.getElementById('cadCanvas');
|
||||
const ctx = canvas.getContext('2d');
|
||||
const lineLog = document.getElementById('line-log');
|
||||
const pixelToMeter = 0.01; // Conversion factor: 1 pixel = 0.01 meter
|
||||
const gridSize = 10; // Size of each grid cell in pixels
|
||||
let lastEndPoint = null;
|
||||
let lastStartPoint = null;
|
||||
let capturedLines = [];
|
||||
|
||||
// Snap a coordinate to the nearest grid point
|
||||
function snapToGrid(value) {
|
||||
return Math.round(value / gridSize) * gridSize;
|
||||
}
|
||||
|
||||
// Draw the grid
|
||||
function drawGrid() {
|
||||
ctx.beginPath();
|
||||
ctx.strokeStyle = "#e0e0e0"; // Light gray grid lines
|
||||
ctx.lineWidth = 0.5;
|
||||
|
||||
// Draw vertical lines
|
||||
for (let x = 0; x <= canvas.width; x += gridSize) {
|
||||
ctx.moveTo(x, 0);
|
||||
ctx.lineTo(x, canvas.height);
|
||||
}
|
||||
|
||||
// Draw horizontal lines
|
||||
for (let y = 0; y <= canvas.height; y += gridSize) {
|
||||
ctx.moveTo(0, y);
|
||||
ctx.lineTo(canvas.width, y);
|
||||
}
|
||||
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
// Clear the canvas and reset logs
|
||||
function clearCanvas() {
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
capturedLines = [];
|
||||
lastEndPoint = null;
|
||||
lastStartPoint = null;
|
||||
drawGrid(); // Redraw the grid after clearing
|
||||
updateLineLog();
|
||||
}
|
||||
|
||||
// Update the captured lines log
|
||||
function updateLineLog() {
|
||||
lineLog.innerHTML = capturedLines
|
||||
.map((line, index) => {
|
||||
const lengthInMeters = calculateLineLengthInMeters(line.startX, line.startY, line.endX, line.endY);
|
||||
return `<li>Line ${index + 1}: Start (${line.startX}, ${line.startY}), End (${line.endX}, ${line.endY}), Length: ${lengthInMeters.toFixed(2)} m</li>`;
|
||||
})
|
||||
.join('');
|
||||
}
|
||||
|
||||
// Calculate the length of a line in meters
|
||||
function calculateLineLengthInMeters(x1, y1, x2, y2) {
|
||||
const dx = x2 - x1;
|
||||
const dy = y2 - y1;
|
||||
const lengthInPixels = Math.sqrt(dx * dx + dy * dy);
|
||||
return lengthInPixels * pixelToMeter;
|
||||
}
|
||||
|
||||
// Mouse events
|
||||
canvas.addEventListener('mousedown', (e) => {
|
||||
const clickX = snapToGrid(e.offsetX);
|
||||
const clickY = snapToGrid(e.offsetY);
|
||||
|
||||
// Determine the starting point for the new line
|
||||
let startX, startY;
|
||||
|
||||
if (lastEndPoint && clickX === lastEndPoint.x && clickY === lastEndPoint.y) {
|
||||
// Snap to the last endpoint
|
||||
startX = lastEndPoint.x;
|
||||
startY = lastEndPoint.y;
|
||||
} else if (lastStartPoint && clickX === lastStartPoint.x && clickY === lastStartPoint.y) {
|
||||
// Snap to the last starting point
|
||||
startX = lastStartPoint.x;
|
||||
startY = lastStartPoint.y;
|
||||
} else if (!capturedLines.length) {
|
||||
// First line can start anywhere
|
||||
startX = clickX;
|
||||
startY = clickY;
|
||||
} else {
|
||||
// If click doesn't match a valid connection, do nothing
|
||||
return;
|
||||
}
|
||||
|
||||
// Determine the endpoint
|
||||
const endX = snapToGrid(e.offsetX);
|
||||
const endY = snapToGrid(e.offsetY);
|
||||
|
||||
// Draw the line
|
||||
drawLine(startX, startY, endX, endY);
|
||||
|
||||
// Update the last start and end points
|
||||
lastStartPoint = { x: startX, y: startY };
|
||||
lastEndPoint = { x: endX, y: endY };
|
||||
|
||||
// Capture the line details
|
||||
capturedLines.push({ startX, startY, endX, endY });
|
||||
updateLineLog();
|
||||
});
|
||||
|
||||
// Drawing functions
|
||||
function drawLine(x1, y1, x2, y2) {
|
||||
ctx.beginPath();
|
||||
ctx.strokeStyle = "#000000"; // Black color for lines
|
||||
ctx.lineWidth = 2; // Thicker lines
|
||||
ctx.moveTo(x1, y1);
|
||||
ctx.lineTo(x2, y2);
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
// Initialize canvas
|
||||
drawGrid(); // Draw the grid when the page loads
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</Layout>
|
||||
Reference in New Issue
Block a user