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 23:11:25 +01:00
parent 324c8f3dbe
commit 1561d0a2c1
2 changed files with 39 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/CAD.svelte
View File

@@ -1,19 +1,2 @@
<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>
<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>

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

@@ -1,9 +1,24 @@
---
import Layout from "#layouts/Layout.astro";
import CAD from "#components/CAD.svelte";
import Layout from "#layouts/cadLayout.astro";
<script>
---
<Layout title="CAD">
<h1 class="text-3xl">CAD</h1>
<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');
@@ -39,6 +54,26 @@ import CAD from "#components/CAD.svelte";
ctx.stroke();
}
// Clear the canvas and reset logs
function clearCanvas() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
capturedLines = [];
startX = null;
startY = 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;
@@ -80,19 +115,5 @@ import CAD from "#components/CAD.svelte";
drawGrid(); // Draw the grid when the page loads
</script>
---
<Layout title="CAD">
<h1 class="text-3xl">CAD</h1>
<div class="mt-12 m-auto w-[95%] relative">
<CAD client:load />
</div>
</Layout>