IBCornelsen/online-energieausweis
1
0
Fork 0
Code Issues 272 Pull Requests Actions Packages Projects 1 Releases Wiki Activity

CAD

Browse Source
This commit is contained in:
Jens Cornelsen
2024-12-09 21:25:50 +01:00
parent bc395b249e
commit 88fdd8e444
1 changed files with 98 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

224
src/pages/faq/erstellung-energieausweise/index.astro
View File

@@ -1,30 +1,12 @@
--- ---
import { useState, useEffect } from "react"; const gridSize = 10; // Rastergröße in Pixeln
interface Line {
startX: number;
startY: number;
endX: number;
endY: number;
}
let gridSize: number = 10;
let capturedLines: Line[] = [];
let firstStartPoint: { x: number; y: number } | null = null;
let lastEndPoint: { x: number; y: number } | null = null;
let snappedCursor: { x: number | null; y: number | null } = { x: null, y: null };
// Utility: Snap a value to the grid
function snapToGrid(value: number): number {
return Math.round(value / gridSize) * gridSize;
}
--- ---
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CAD Program with Astro</title> <title>Simple CAD Program - Grid Size 10</title>
<style> <style>
body { body {
font-family: Arial, sans-serif; font-family: Arial, sans-serif;
@@ -36,7 +18,7 @@ function snapToGrid(value: number): number {
} }
canvas { canvas {
border: 1px solid #ccc; border: 1px solid #ccc;
cursor: none; cursor: crosshair;
} }
.controls { .controls {
margin: 10px; margin: 10px;
@@ -62,29 +44,36 @@ function snapToGrid(value: number): number {
<canvas id="cadCanvas" width="800" height="600"></canvas> <canvas id="cadCanvas" width="800" height="600"></canvas>
<div class="log"> <div class="log">
<strong>Captured Points and Lines:</strong> <strong>Captured Points and Lines:</strong>
<ul id="lineLog"></ul> <ul id="line-log"></ul>
</div> </div>
<script lang="ts"> <script>
const canvas = document.getElementById("cadCanvas") as HTMLCanvasElement; const canvas = document.getElementById('cadCanvas');
const ctx = canvas.getContext("2d") as CanvasRenderingContext2D; const ctx = canvas.getContext('2d');
const lineLog = document.getElementById("lineLog") as HTMLUListElement; const lineLog = document.getElementById('line-log');
const clearButton = document.getElementById("clearButton") as HTMLButtonElement; let capturedLines = [];
let firstStartPoint = null; // Startpunkt der ersten Linie
let lastEndPoint = null; // Endpunkt der letzten Linie
// Draw the grid // Koordinate an Raster ausrichten
function snapToGrid(value) {
return Math.round(value / ${gridSize}) * ${gridSize};
}
// Raster zeichnen
function drawGrid() { function drawGrid() {
ctx.beginPath(); ctx.beginPath();
ctx.strokeStyle = "#e0e0e0"; // Light gray grid lines ctx.strokeStyle = "#e0e0e0"; // Rasterlinienfarbe
ctx.lineWidth = 0.5; ctx.lineWidth = 0.5;
// Draw vertical lines // Vertikale Linien
for (let x = 0; x <= canvas.width; x += gridSize) { for (let x = 0; x <= canvas.width; x += ${gridSize}) {
ctx.moveTo(x, 0); ctx.moveTo(x, 0);
ctx.lineTo(x, canvas.height); ctx.lineTo(x, canvas.height);
} }
// Draw horizontal lines // Horizontale Linien
for (let y = 0; y <= canvas.height; y += gridSize) { for (let y = 0; y <= canvas.height; y += ${gridSize}) {
ctx.moveTo(0, y); ctx.moveTo(0, y);
ctx.lineTo(canvas.width, y); ctx.lineTo(canvas.width, y);
} }
@@ -92,119 +81,102 @@ function snapToGrid(value: number): number {
ctx.stroke(); ctx.stroke();
} }
// Redraw the grid, lines, and cursor marker // Canvas zurücksetzen und Raster neu zeichnen
function redrawAll() { function clearCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.clearRect(0, 0, canvas.width, canvas.height);
capturedLines = [];
firstStartPoint = null;
lastEndPoint = null;
drawGrid(); drawGrid();
redrawLinesAndPoints(); updateLineLog();
drawCursorMarker(snappedCursor.x, snappedCursor.y);
} }
// Redraw all existing lines and points // Log der Linien aktualisieren
function redrawLinesAndPoints() { function updateLineLog() {
for (const line of capturedLines) { lineLog.innerHTML = capturedLines
if (line.startX === line.endX && line.startY === line.endY) { .map((line, index) => {
drawPoint(line.startX, line.startY); const isPoint = line.startX === line.endX && line.startY === line.endY;
} else { if (isPoint) {
drawLine(line.startX, line.startY, line.endX, line.endY); return `<li>Point: (${line.startX}, ${line.startY})</li>`;
} }
const length = calculateLineLength(line.startX, line.startY, line.endX, line.endY);
return `<li>Line ${index + 1}: Start (${line.startX}, ${line.startY}), End (${line.endX}, ${line.endY}), Length: ${length.toFixed(2)} px</li>`;
})
.join('');
}
// Länge einer Linie berechnen
function calculateLineLength(x1, y1, x2, y2) {
const dx = x2 - x1;
const dy = y2 - y1;
return Math.sqrt(dx * dx + dy * dy);
}
// Ereignis: Linie oder Punkt zeichnen
canvas.addEventListener('mousedown', (e) => {
const clickX = snapToGrid(e.offsetX);
const clickY = snapToGrid(e.offsetY);
// Startpunkt bestimmen
let startX, startY;
if (!lastEndPoint) {
// Erster Punkt kann beliebig sein
startX = clickX;
startY = clickY;
firstStartPoint = { x: startX, y: startY };
} else if (clickX === lastEndPoint.x && clickY === lastEndPoint.y) {
// Folgende Punkte müssen an den letzten Endpunkt anschließen
startX = lastEndPoint.x;
startY = lastEndPoint.y;
} else {
return; // Ungültiger Punkt
} }
}
// Draw a line // Endpunkt bestimmen
function drawLine(x1: number, y1: number, x2: number, y2: number) { const endX = snapToGrid(e.offsetX);
const endY = snapToGrid(e.offsetY);
// Punkt oder Linie zeichnen
if (startX === endX && startY === endY) {
drawPoint(startX, startY);
} else {
drawLine(startX, startY, endX, endY);
}
// Endpunkt aktualisieren
lastEndPoint = { x: endX, y: endY };
// Linie oder Punkt im Log erfassen
capturedLines.push({ startX, startY, endX, endY });
updateLineLog();
});
// Linie zeichnen
function drawLine(x1, y1, x2, y2) {
ctx.beginPath(); ctx.beginPath();
ctx.strokeStyle = "#000000"; // Black lines ctx.strokeStyle = "#000000"; // Schwarze Linien
ctx.lineWidth = 2; ctx.lineWidth = 2;
ctx.moveTo(x1, y1); ctx.moveTo(x1, y1);
ctx.lineTo(x2, y2); ctx.lineTo(x2, y2);
ctx.stroke(); ctx.stroke();
} }
// Draw a point // Punkt zeichnen
function drawPoint(x: number, y: number) { function drawPoint(x, y) {
ctx.beginPath(); ctx.beginPath();
ctx.fillStyle = "#000000"; // Black point ctx.fillStyle = "#000000"; // Schwarze Punkte
ctx.arc(x, y, 3, 0, 2 * Math.PI); // Draw a small circle for the point ctx.arc(x, y, 3, 0, 2 * Math.PI);
ctx.fill(); ctx.fill();
} }
// Draw a marker to represent the snapped cursor position // Event: Canvas initialisieren
function drawCursorMarker(x: number | null, y: number | null) { window.addEventListener('load', () => {
if (x === null || y === null) return; // Don't draw if no position is set
ctx.beginPath();
ctx.fillStyle = "#ff0000"; // Red marker for cursor
ctx.arc(x, y, 4, 0, 2 * Math.PI);
ctx.fill();
}
// Mouse move event for snapping the cursor to the grid
canvas.addEventListener("mousemove", (e: MouseEvent) => {
const mouseX = snapToGrid(e.offsetX);
const mouseY = snapToGrid(e.offsetY);
// Update the snapped cursor position
snappedCursor = { x: mouseX, y: mouseY };
// Redraw everything to reflect the new cursor position
redrawAll();
});
// Mouse event for drawing lines and points
canvas.addEventListener("mousedown", (e: MouseEvent) => {
const clickX = snapToGrid(e.offsetX);
const clickY = snapToGrid(e.offsetY);
// Determine starting point for the line or point
let startX: number, startY: number;
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 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);
}
// Update the last endpoint
lastEndPoint = { x: endX, y: endY };
// Capture the line or point details
capturedLines.push({ startX, startY, endX, endY });
updateLineLog();
});
// Clear the canvas and reset everything
clearButton.addEventListener("click", () => {
ctx.clearRect(0, 0, canvas.width, canvas.height);
capturedLines = [];
firstStartPoint = null;
lastEndPoint = null;
snappedCursor = { x: null, y: null };
drawGrid(); drawGrid();
lineLog.innerHTML = ""; // Clear log
}); });
// Initialize // Event: Canvas leeren
drawGrid(); document.getElementById('clearButton').addEventListener('click', clearCanvas);
</script> </script>
</body> </body>
</html> </html>