clean up
This commit is contained in:
parent
e339f7f9cb
commit
a2ff5e8e55
@ -4,11 +4,24 @@
|
||||
let canvas;
|
||||
let ctx;
|
||||
const GRID_SIZE = 40; // pixels per grid unit
|
||||
const WIDTH = 800;
|
||||
const HEIGHT = 640;
|
||||
const WIDTH = 320;
|
||||
const HEIGHT = 320;
|
||||
|
||||
let userPoint = { x: 5, y: 2 };
|
||||
|
||||
// Rectangle coordinates
|
||||
const blueRect = { x1: 6, y1: 1 }; // Blue rectangle corner
|
||||
const redRect = { x1: 1, y1: 7 }; // Red rectangle corner
|
||||
|
||||
// Calculate rectangle areas
|
||||
$: blueWidth = Math.abs(blueRect.x1 - userPoint.x);
|
||||
$: blueHeight = Math.abs(blueRect.y1 - userPoint.y);
|
||||
$: blueArea = blueWidth * blueHeight;
|
||||
|
||||
$: redWidth = Math.abs(redRect.x1 - userPoint.x);
|
||||
$: redHeight = Math.abs(redRect.y1 - userPoint.y);
|
||||
$: redArea = redWidth * redHeight;
|
||||
|
||||
$: if (ctx && userPoint) {
|
||||
redraw();
|
||||
}
|
||||
@ -21,10 +34,10 @@
|
||||
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)');
|
||||
drawRectangle(userPoint.x, userPoint.y, 1, 7, 'rgba(255, 0, 0, 0.3)');
|
||||
drawLineSegment(1, 1, 6, 7, '#ff3e00');
|
||||
drawLabel('A', 1, 1);
|
||||
drawLabel('B', 6, 7);
|
||||
drawLabel('C', 6, 7);
|
||||
drawUserPoint();
|
||||
}
|
||||
|
||||
@ -50,20 +63,16 @@
|
||||
}
|
||||
|
||||
function toCanvasCoords(x, y) {
|
||||
const centerX = WIDTH / 2;
|
||||
const centerY = HEIGHT / 2;
|
||||
return {
|
||||
x: centerX + x * GRID_SIZE,
|
||||
y: centerY - y * GRID_SIZE
|
||||
x: x * GRID_SIZE,
|
||||
y: HEIGHT - 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
|
||||
x: canvasX / GRID_SIZE,
|
||||
y: (HEIGHT - canvasY) / GRID_SIZE
|
||||
};
|
||||
}
|
||||
|
||||
@ -112,7 +121,7 @@
|
||||
ctx.font = 'bold 16px monospace';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.textBaseline = 'bottom';
|
||||
ctx.fillText('C', coords.x, coords.y - 12);
|
||||
ctx.fillText('B', coords.x, coords.y - 12);
|
||||
}
|
||||
|
||||
function drawGrid() {
|
||||
@ -120,9 +129,6 @@
|
||||
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;
|
||||
@ -143,20 +149,20 @@
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
// Draw axes
|
||||
// Draw axes (left and bottom edges)
|
||||
ctx.strokeStyle = '#666';
|
||||
ctx.lineWidth = 2;
|
||||
|
||||
// Y-axis
|
||||
// Y-axis (left edge)
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(centerX, 0);
|
||||
ctx.lineTo(centerX, HEIGHT);
|
||||
ctx.moveTo(0, 0);
|
||||
ctx.lineTo(0, HEIGHT);
|
||||
ctx.stroke();
|
||||
|
||||
// X-axis
|
||||
// X-axis (bottom edge)
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(0, centerY);
|
||||
ctx.lineTo(WIDTH, centerY);
|
||||
ctx.moveTo(0, HEIGHT);
|
||||
ctx.lineTo(WIDTH, HEIGHT);
|
||||
ctx.stroke();
|
||||
|
||||
// Draw axis labels
|
||||
@ -166,23 +172,22 @@
|
||||
|
||||
// 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);
|
||||
}
|
||||
const value = Math.round(x / GRID_SIZE);
|
||||
ctx.fillText(value, x, HEIGHT - 5);
|
||||
}
|
||||
|
||||
// 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);
|
||||
ctx.textAlign = 'left';
|
||||
for (let y = 0; y < HEIGHT; y += GRID_SIZE) {
|
||||
const value = Math.round((HEIGHT - y) / GRID_SIZE);
|
||||
if (value > 0) {
|
||||
ctx.fillText(value, 5, y + 5);
|
||||
}
|
||||
}
|
||||
|
||||
// Origin label
|
||||
ctx.fillText('0', centerX - 10, centerY + 20);
|
||||
ctx.textAlign = 'left';
|
||||
ctx.fillText('0', 5, HEIGHT - 5);
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -191,6 +196,27 @@
|
||||
<div class="canvas-container">
|
||||
<canvas bind:this={canvas} width={WIDTH} height={HEIGHT} on:mousemove={handleMouseMove}></canvas>
|
||||
</div>
|
||||
|
||||
<div class="calculations">
|
||||
<h2>Rectangle Areas</h2>
|
||||
<p class="point-c">Point B: ({userPoint.x.toFixed(2)}, {userPoint.y.toFixed(2)})</p>
|
||||
|
||||
<div class="rect-calc blue" class:largest={blueArea > redArea}>
|
||||
<h3>Blue Rectangle</h3>
|
||||
<p>Corner: ({blueRect.x1}, {blueRect.y1})</p>
|
||||
<p>Width = |{blueRect.x1} - {userPoint.x.toFixed(2)}| = {blueWidth.toFixed(2)}</p>
|
||||
<p>Height = |{blueRect.y1} - {userPoint.y.toFixed(2)}| = {blueHeight.toFixed(2)}</p>
|
||||
<p class="area">Area = {blueWidth.toFixed(2)} × {blueHeight.toFixed(2)} = <strong>{blueArea.toFixed(2)}</strong></p>
|
||||
</div>
|
||||
|
||||
<div class="rect-calc red" class:largest={redArea > blueArea}>
|
||||
<h3>Red Rectangle</h3>
|
||||
<p>Corner: ({redRect.x1}, {redRect.y1})</p>
|
||||
<p>Width = |{redRect.x1} - {userPoint.x.toFixed(2)}| = {redWidth.toFixed(2)}</p>
|
||||
<p>Height = |{redRect.y1} - {userPoint.y.toFixed(2)}| = {redHeight.toFixed(2)}</p>
|
||||
<p class="area">Area = {redWidth.toFixed(2)} × {redHeight.toFixed(2)} = <strong>{redArea.toFixed(2)}</strong></p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
<style>
|
||||
@ -215,4 +241,84 @@
|
||||
canvas {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.calculations {
|
||||
margin-top: 2rem;
|
||||
display: flex;
|
||||
gap: 2rem;
|
||||
flex-wrap: wrap;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.calculations h2 {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.point-c {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
color: #646cff;
|
||||
font-family: monospace;
|
||||
font-size: 1.1em;
|
||||
font-weight: bold;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.rect-calc {
|
||||
background: #242424;
|
||||
border-radius: 8px;
|
||||
padding: 1.5rem;
|
||||
min-width: 300px;
|
||||
border: 2px solid;
|
||||
}
|
||||
|
||||
.rect-calc.blue {
|
||||
border-color: #646cff;
|
||||
}
|
||||
|
||||
.rect-calc.red {
|
||||
border-color: #ff0000;
|
||||
}
|
||||
|
||||
.rect-calc.largest {
|
||||
box-shadow: 0 0 20px rgba(255, 255, 255, 0.3),
|
||||
0 0 40px rgba(255, 255, 255, 0.2);
|
||||
transform: scale(1.02);
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.rect-calc h3 {
|
||||
margin-top: 0;
|
||||
margin-bottom: 1rem;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.rect-calc.blue h3 {
|
||||
color: #646cff;
|
||||
}
|
||||
|
||||
.rect-calc.red h3 {
|
||||
color: #ff0000;
|
||||
}
|
||||
|
||||
.rect-calc p {
|
||||
margin: 0.5rem 0;
|
||||
color: #ccc;
|
||||
font-family: monospace;
|
||||
}
|
||||
|
||||
.rect-calc .area {
|
||||
margin-top: 1rem;
|
||||
padding-top: 1rem;
|
||||
border-top: 1px solid #444;
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.rect-calc strong {
|
||||
color: #fff;
|
||||
font-size: 1.2em;
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user