init
This commit is contained in:
@@ -0,0 +1,218 @@
|
||||
<script>
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
let canvas;
|
||||
let ctx;
|
||||
const GRID_SIZE = 40; // pixels per grid unit
|
||||
const WIDTH = 800;
|
||||
const HEIGHT = 640;
|
||||
|
||||
let userPoint = { x: 5, y: 2 };
|
||||
|
||||
$: if (ctx && userPoint) {
|
||||
redraw();
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
ctx = canvas.getContext('2d');
|
||||
redraw();
|
||||
});
|
||||
|
||||
function redraw() {
|
||||
drawGrid();
|
||||
drawRectangle(userPoint.x, userPoint.y, 6, 1, 'rgba(100, 108, 255, 0.3)');
|
||||
drawRectangle(userPoint.x, userPoint.y, 1, 6, 'rgba(255, 0, 0, 0.3)');
|
||||
drawLineSegment(1, 1, 6, 7, '#ff3e00');
|
||||
drawLabel('A', 1, 1);
|
||||
drawLabel('B', 6, 7);
|
||||
drawUserPoint();
|
||||
}
|
||||
|
||||
function drawRectangle(x1, y1, x2, y2, color) {
|
||||
const corner1 = toCanvasCoords(x1, y1);
|
||||
const corner2 = toCanvasCoords(x2, y2);
|
||||
|
||||
const x = Math.min(corner1.x, corner2.x);
|
||||
const y = Math.min(corner1.y, corner2.y);
|
||||
const width = Math.abs(corner2.x - corner1.x);
|
||||
const height = Math.abs(corner2.y - corner1.y);
|
||||
|
||||
ctx.fillStyle = color;
|
||||
ctx.fillRect(x, y, width, height);
|
||||
}
|
||||
|
||||
function handleMouseMove(event) {
|
||||
const rect = canvas.getBoundingClientRect();
|
||||
const mouseX = event.clientX - rect.left;
|
||||
const mouseY = event.clientY - rect.top;
|
||||
|
||||
userPoint = toCartesianCoords(mouseX, mouseY);
|
||||
}
|
||||
|
||||
function toCanvasCoords(x, y) {
|
||||
const centerX = WIDTH / 2;
|
||||
const centerY = HEIGHT / 2;
|
||||
return {
|
||||
x: centerX + x * GRID_SIZE,
|
||||
y: centerY - y * GRID_SIZE
|
||||
};
|
||||
}
|
||||
|
||||
function toCartesianCoords(canvasX, canvasY) {
|
||||
const centerX = WIDTH / 2;
|
||||
const centerY = HEIGHT / 2;
|
||||
return {
|
||||
x: (canvasX - centerX) / GRID_SIZE,
|
||||
y: (centerY - canvasY) / GRID_SIZE
|
||||
};
|
||||
}
|
||||
|
||||
function drawLineSegment(x1, y1, x2, y2, color = '#ff3e00') {
|
||||
const start = toCanvasCoords(x1, y1);
|
||||
const end = toCanvasCoords(x2, y2);
|
||||
|
||||
ctx.strokeStyle = color;
|
||||
ctx.lineWidth = 3;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(start.x, start.y);
|
||||
ctx.lineTo(end.x, end.y);
|
||||
ctx.stroke();
|
||||
|
||||
// Draw endpoints
|
||||
ctx.fillStyle = color;
|
||||
ctx.beginPath();
|
||||
ctx.arc(start.x, start.y, 5, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
ctx.beginPath();
|
||||
ctx.arc(end.x, end.y, 5, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
}
|
||||
|
||||
function drawLabel(label, x, y) {
|
||||
const coords = toCanvasCoords(x, y);
|
||||
|
||||
ctx.fillStyle = '#fff';
|
||||
ctx.font = 'bold 16px monospace';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.textBaseline = 'bottom';
|
||||
ctx.fillText(label, coords.x, coords.y - 10);
|
||||
}
|
||||
|
||||
function drawUserPoint() {
|
||||
const coords = toCanvasCoords(userPoint.x, userPoint.y);
|
||||
|
||||
// Draw point
|
||||
ctx.fillStyle = '#646cff';
|
||||
ctx.beginPath();
|
||||
ctx.arc(coords.x, coords.y, 6, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
|
||||
// Draw label
|
||||
ctx.fillStyle = '#fff';
|
||||
ctx.font = 'bold 16px monospace';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.textBaseline = 'bottom';
|
||||
ctx.fillText('C', coords.x, coords.y - 12);
|
||||
}
|
||||
|
||||
function drawGrid() {
|
||||
// Clear canvas
|
||||
ctx.fillStyle = '#1a1a1a';
|
||||
ctx.fillRect(0, 0, WIDTH, HEIGHT);
|
||||
|
||||
const centerX = WIDTH / 2;
|
||||
const centerY = HEIGHT / 2;
|
||||
|
||||
// Draw grid lines
|
||||
ctx.strokeStyle = '#333';
|
||||
ctx.lineWidth = 1;
|
||||
|
||||
// Vertical grid lines
|
||||
for (let x = 0; x <= WIDTH; x += GRID_SIZE) {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x, 0);
|
||||
ctx.lineTo(x, HEIGHT);
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
// Horizontal grid lines
|
||||
for (let y = 0; y <= HEIGHT; y += GRID_SIZE) {
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(0, y);
|
||||
ctx.lineTo(WIDTH, y);
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
// Draw axes
|
||||
ctx.strokeStyle = '#666';
|
||||
ctx.lineWidth = 2;
|
||||
|
||||
// Y-axis
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(centerX, 0);
|
||||
ctx.lineTo(centerX, HEIGHT);
|
||||
ctx.stroke();
|
||||
|
||||
// X-axis
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(0, centerY);
|
||||
ctx.lineTo(WIDTH, centerY);
|
||||
ctx.stroke();
|
||||
|
||||
// Draw axis labels
|
||||
ctx.fillStyle = '#888';
|
||||
ctx.font = '12px monospace';
|
||||
ctx.textAlign = 'center';
|
||||
|
||||
// X-axis labels
|
||||
for (let x = GRID_SIZE; x <= WIDTH; x += GRID_SIZE) {
|
||||
const value = Math.round((x - centerX) / GRID_SIZE);
|
||||
if (value !== 0) {
|
||||
ctx.fillText(value, x, centerY + 20);
|
||||
}
|
||||
}
|
||||
|
||||
// Y-axis labels
|
||||
ctx.textAlign = 'right';
|
||||
for (let y = GRID_SIZE; y <= HEIGHT; y += GRID_SIZE) {
|
||||
const value = Math.round((centerY - y) / GRID_SIZE);
|
||||
if (value !== 0) {
|
||||
ctx.fillText(value, centerX - 10, y + 5);
|
||||
}
|
||||
}
|
||||
|
||||
// Origin label
|
||||
ctx.fillText('0', centerX - 10, centerY + 20);
|
||||
}
|
||||
</script>
|
||||
|
||||
<main>
|
||||
<h1>Line Segment Intersection</h1>
|
||||
<div class="canvas-container">
|
||||
<canvas bind:this={canvas} width={WIDTH} height={HEIGHT} on:mousemove={handleMouseMove}></canvas>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 2rem;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin-bottom: 1rem;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.canvas-container {
|
||||
border: 2px solid #444;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
canvas {
|
||||
display: block;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,29 @@
|
||||
:root {
|
||||
font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
|
||||
line-height: 1.5;
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #242424;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
@@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="26.6" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 308"><path fill="#FF3E00" d="M239.682 40.707C211.113-.182 154.69-12.301 113.895 13.69L42.247 59.356a82.198 82.198 0 0 0-37.135 55.056a86.566 86.566 0 0 0 8.536 55.576a82.425 82.425 0 0 0-12.296 30.719a87.596 87.596 0 0 0 14.964 66.244c28.574 40.893 84.997 53.007 125.787 27.016l71.648-45.664a82.182 82.182 0 0 0 37.135-55.057a86.601 86.601 0 0 0-8.53-55.577a82.409 82.409 0 0 0 12.29-30.718a87.573 87.573 0 0 0-14.963-66.244"></path><path fill="#FFF" d="M106.889 270.841c-23.102 6.007-47.497-3.036-61.103-22.648a52.685 52.685 0 0 1-9.003-39.85a49.978 49.978 0 0 1 1.713-6.693l1.35-4.115l3.671 2.697a92.447 92.447 0 0 0 28.036 14.007l2.663.808l-.245 2.659a16.067 16.067 0 0 0 2.89 10.656a17.143 17.143 0 0 0 18.397 6.828a15.786 15.786 0 0 0 4.403-1.935l71.67-45.672a14.922 14.922 0 0 0 6.734-9.977a15.923 15.923 0 0 0-2.713-12.011a17.156 17.156 0 0 0-18.404-6.832a15.78 15.78 0 0 0-4.396 1.933l-27.35 17.434a52.298 52.298 0 0 1-14.553 6.391c-23.101 6.007-47.497-3.036-61.101-22.649a52.681 52.681 0 0 1-9.004-39.849a49.428 49.428 0 0 1 22.34-33.114l71.664-45.677a52.218 52.218 0 0 1 14.563-6.398c23.101-6.007 47.497 3.036 61.101 22.648a52.685 52.685 0 0 1 9.004 39.85a50.559 50.559 0 0 1-1.713 6.692l-1.35 4.116l-3.67-2.693a92.373 92.373 0 0 0-28.037-14.013l-2.664-.809l.246-2.658a16.099 16.099 0 0 0-2.89-10.656a17.143 17.143 0 0 0-18.398-6.828a15.786 15.786 0 0 0-4.402 1.935l-71.67 45.674a14.898 14.898 0 0 0-6.73 9.975a15.9 15.9 0 0 0 2.709 12.012a17.156 17.156 0 0 0 18.404 6.832a15.841 15.841 0 0 0 4.402-1.935l27.345-17.427a52.147 52.147 0 0 1 14.552-6.397c23.101-6.006 47.497 3.037 61.102 22.65a52.681 52.681 0 0 1 9.003 39.848a49.453 49.453 0 0 1-22.34 33.12l-71.664 45.673a52.218 52.218 0 0 1-14.563 6.398"></path></svg>
|
||||
|
After Width: | Height: | Size: 1.9 KiB |
@@ -0,0 +1,10 @@
|
||||
<script>
|
||||
let count = $state(0)
|
||||
const increment = () => {
|
||||
count += 1
|
||||
}
|
||||
</script>
|
||||
|
||||
<button onclick={increment}>
|
||||
count is {count}
|
||||
</button>
|
||||
@@ -0,0 +1,9 @@
|
||||
import { mount } from 'svelte'
|
||||
import './app.css'
|
||||
import App from './App.svelte'
|
||||
|
||||
const app = mount(App, {
|
||||
target: document.getElementById('app'),
|
||||
})
|
||||
|
||||
export default app
|
||||
Reference in New Issue
Block a user