diff --git a/src/pages/faq/erstellung-energieausweise/index.astro b/src/pages/faq/erstellung-energieausweise/index.astro index 89958dda..1f334b6b 100644 --- a/src/pages/faq/erstellung-energieausweise/index.astro +++ b/src/pages/faq/erstellung-energieausweise/index.astro @@ -68,12 +68,12 @@ import Layout from "#layouts/layoutCAD.astro"; -
+
- Captured Lines: + Captured Points and Lines:
@@ -81,11 +81,10 @@ import Layout from "#layouts/layoutCAD.astro"; 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 startX = null; - let startY = null; let capturedLines = []; + let firstStartPoint = null; // Tracks the start point of the first line + let lastEndPoint = null; // Tracks the end point of the last line // Snap a coordinate to the nearest grid point function snapToGrid(value) { @@ -113,75 +112,134 @@ import Layout from "#layouts/layoutCAD.astro"; ctx.stroke(); } + // Clear the canvas and reset everything function clearCanvas() { - // Löscht den gesamten Canvas - ctx.clearRect(0, 0, canvas.width, canvas.height); + ctx.clearRect(0, 0, canvas.width, canvas.height); + capturedLines = []; + firstStartPoint = null; + lastEndPoint = null; + drawGrid(); + updateLineLog(); + } - // Setzt die Liste der gezeichneten Linien und Punkte zurück - capturedLines = []; - firstStartPoint = null; - lastEndPoint = null; - - // Zeichnet das Raster neu - drawGrid(); - - // Aktualisiert das Log, um es zu leeren - updateLineLog(); -} - - - - - - // Update the captured lines log + // Update the captured points and lines log function updateLineLog() { lineLog.innerHTML = capturedLines .map((line, index) => { - const lengthInMeters = calculateLineLengthInMeters(line.startX, line.startY, line.endX, line.endY); - return `
  • Line ${index + 1}: Start (${line.startX}, ${line.startY}), End (${line.endX}, ${line.endY}), Length: ${lengthInMeters.toFixed(2)} m
    • `; + const isPoint = line.startX === line.endX && line.startY === line.endY; + if (isPoint) { + return `
  • Point: (${line.startX}, ${line.startY})
    • `; + } + const length = calculateLineLength(line.startX, line.startY, line.endX, line.endY); + return `
  • Line ${index + 1}: Start (${line.startX}, ${line.startY}), End (${line.endX}, ${line.endY}), Length: ${length.toFixed(2)} px
    • `; }) .join(''); } - // Calculate the length of a line in meters - function calculateLineLengthInMeters(x1, y1, x2, y2) { + // Calculate the length of a line + function calculateLineLength(x1, y1, x2, y2) { const dx = x2 - x1; const dy = y2 - y1; - const lengthInPixels = Math.sqrt(dx * dx + dy * dy); - return lengthInPixels * pixelToMeter; + return Math.sqrt(dx * dx + dy * dy); } - // Mouse events + // Mouse move event for snapping the cursor to the grid + canvas.addEventListener('mousemove', (e) => { + const mouseX = snapToGrid(e.offsetX); + const mouseY = snapToGrid(e.offsetY); + + // Clear the canvas and redraw the grid + ctx.clearRect(0, 0, canvas.width, canvas.height); + drawGrid(); + + // Redraw all existing lines and points + redrawLinesAndPoints(); + + // Draw a marker at the snapped position + drawCursorMarker(mouseX, mouseY); + }); + + // Draw a marker to represent the snapped cursor position + function drawCursorMarker(x, y) { + ctx.beginPath(); + ctx.fillStyle = "#ff0000"; // Red marker for cursor + ctx.arc(x, y, 4, 0, 2 * Math.PI); + ctx.fill(); + } + + // Redraw all existing lines and points + function redrawLinesAndPoints() { + for (const line of capturedLines) { + if (line.startX === line.endX && line.startY === line.endY) { + drawPoint(line.startX, line.startY); + } else { + drawLine(line.startX, line.startY, line.endX, line.endY); + } + } + } + + // Mouse event for drawing lines and points canvas.addEventListener('mousedown', (e) => { + const clickX = snapToGrid(e.offsetX); + const clickY = snapToGrid(e.offsetY); + + // Determine starting point for the line or point + let startX, startY; + + if (!lastEndPoint) { + // For the first line or point, set the start point anywhere + startX = clickX; + startY = clickY; + firstStartPoint = { x: startX, y: startY }; // Save the start point of the first line + } else if (clickX === lastEndPoint.x && clickY === lastEndPoint.y) { + // For subsequent lines, start at the last endpoint + startX = lastEndPoint.x; + startY = lastEndPoint.y; + } else { + // Invalid starting point for a line + return; + } + + // Determine the endpoint const endX = snapToGrid(e.offsetX); const endY = snapToGrid(e.offsetY); - if (startX !== null && startY !== null) { - // Draw the final line + // If it's a point, draw a point + if (startX === endX && startY === endY) { + drawPoint(startX, startY); + } else { + // Otherwise, draw the line drawLine(startX, startY, endX, endY); - - // Capture the line details - capturedLines.push({ startX, startY, endX, endY }); - updateLineLog(); } - // Update the start position for the next line - startX = endX; - startY = endY; + // Update the last endpoint + lastEndPoint = { x: endX, y: endY }; + + // Capture the line or point details + capturedLines.push({ startX, startY, endX, endY }); + updateLineLog(); }); - // Drawing functions + // Function to draw a line function drawLine(x1, y1, x2, y2) { ctx.beginPath(); - ctx.strokeStyle = "#000000"; // Black color for lines - ctx.lineWidth = 2; // Thicker lines + ctx.strokeStyle = "#000000"; // Black lines + ctx.lineWidth = 2; ctx.moveTo(x1, y1); ctx.lineTo(x2, y2); ctx.stroke(); } - // Initialize canvas - drawGrid(); // Draw the grid when the page loads + // Function to draw a point + function drawPoint(x, y) { + ctx.beginPath(); + ctx.fillStyle = "#000000"; // Black point + ctx.arc(x, y, 3, 0, 2 * Math.PI); // Draw a small circle for the point + ctx.fill(); + } + + // Initialize the canvas + drawGrid();