CAD
This commit is contained in:
Jens Cornelsen
@@ -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);
|
||||
} else {
|
||||
drawLine(line.startX, line.startY, line.endX, line.endY);
|
||||
}
|
||||
// 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 {
|
||||
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>
|
||||
Reference in New Issue
Block a user