Merge pull request #179 from IBCornelsen/Jens

CAD
2024-12-09 21:26:59 +01:00
parent c694a5b6d4 88fdd8e444
commit 1ae40d7f0c
1 changed files with 98 additions and 126 deletions
--- a/src/pages/faq/erstellung-energieausweise/index.astro
+++ b/src/pages/faq/erstellung-energieausweise/index.astro
@@ -1,30 +1,12 @@
 ---
-import { useState, useEffect } from "react";
-
-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;
-}
+const gridSize = 10; // Rastergröße in Pixeln
 ---

 <html lang="en">
 <head>
  <meta charset="UTF-8">
  <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>
    body {
      font-family: Arial, sans-serif;
@@ -36,7 +18,7 @@ function snapToGrid(value: number): number {
    }
    canvas {
      border: 1px solid #ccc;
-      cursor: none;
+      cursor: crosshair;
    }
    .controls {
      margin: 10px;
@@ -62,29 +44,36 @@ function snapToGrid(value: number): number {
  <canvas id="cadCanvas" width="800" height="600"></canvas>
  <div class="log">
    <strong>Captured Points and Lines:</strong>
-    <ul id="lineLog"></ul>
+    <ul id="line-log"></ul>
  </div>

-  <script lang="ts">
-    const canvas = document.getElementById("cadCanvas") as HTMLCanvasElement;
-    const ctx = canvas.getContext("2d") as CanvasRenderingContext2D;
-    const lineLog = document.getElementById("lineLog") as HTMLUListElement;
-    const clearButton = document.getElementById("clearButton") as HTMLButtonElement;
+  <script>
+    const canvas = document.getElementById('cadCanvas');
+    const ctx = canvas.getContext('2d');
+    const lineLog = document.getElementById('line-log');
+    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() {
      ctx.beginPath();
-      ctx.strokeStyle = "#e0e0e0"; // Light gray grid lines
+      ctx.strokeStyle = "#e0e0e0"; // Rasterlinienfarbe
      ctx.lineWidth = 0.5;

-      // Draw vertical lines
-      for (let x = 0; x <= canvas.width; x += gridSize) {
+      // Vertikale Linien
+      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) {
+      // Horizontale Linien
+      for (let y = 0; y <= canvas.height; y += ${gridSize}) {
        ctx.moveTo(0, y);
        ctx.lineTo(canvas.width, y);
      }
@@ -92,119 +81,102 @@ function snapToGrid(value: number): number {
      ctx.stroke();
    }

-    // Redraw the grid, lines, and cursor marker
-    function redrawAll() {
+    // Canvas zurücksetzen und Raster neu zeichnen
+    function clearCanvas() {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
+      capturedLines = [];
+      firstStartPoint = null;
+      lastEndPoint = null;
      drawGrid();
-      redrawLinesAndPoints();
-      drawCursorMarker(snappedCursor.x, snappedCursor.y);
+      updateLineLog();
    }

-    // 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);
+    // Log der Linien aktualisieren
+    function updateLineLog() {
+      lineLog.innerHTML = capturedLines
+        .map((line, index) => {
+          const isPoint = line.startX === line.endX && line.startY === line.endY;
+          if (isPoint) {
+            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 {
-          drawLine(line.startX, line.startY, line.endX, line.endY);
-        }
-      }
+        return; // Ungültiger Punkt
      }

-    // Draw a line
-    function drawLine(x1: number, y1: number, x2: number, y2: number) {
+      // Endpunkt bestimmen
+      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.strokeStyle = "#000000"; // Black lines
+      ctx.strokeStyle = "#000000"; // Schwarze Linien
      ctx.lineWidth = 2;
      ctx.moveTo(x1, y1);
      ctx.lineTo(x2, y2);
      ctx.stroke();
    }

-    // Draw a point
-    function drawPoint(x: number, y: number) {
+    // Punkt zeichnen
+    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.fillStyle = "#000000"; // Schwarze Punkte
+      ctx.arc(x, y, 3, 0, 2 * Math.PI);
      ctx.fill();
    }

-    // Draw a marker to represent the snapped cursor position
-    function drawCursorMarker(x: number | null, y: number | null) {
-      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 };
+    // Event: Canvas initialisieren
+    window.addEventListener('load', () => {
      drawGrid();
-      lineLog.innerHTML = ""; // Clear log
    });

-    // Initialize
-    drawGrid();
+    // Event: Canvas leeren
+    document.getElementById('clearButton').addEventListener('click', clearCanvas);
  </script>
 </body>
 </html>