목차(클릭하세요)
클로드3로 구현한 실습용 사이트
import React, { useState, useEffect, useRef } from 'react';
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
import { Button } from "@/components/ui/button";
import { Slider } from "@/components/ui/slider";
const ImageToVectorSimulation = () => {
const [gridSize, setGridSize] = useState(5);
const [pixelValues, setPixelValues] = useState([]);
const canvasRef = useRef(null);
useEffect(() => {
initializePixelValues();
}, [gridSize]);
const initializePixelValues = () => {
const newPixelValues = Array(gridSize * gridSize).fill(0);
setPixelValues(newPixelValues);
};
const handlePixelClick = (index) => {
const newPixelValues = [...pixelValues];
newPixelValues[index] = newPixelValues[index] === 0 ? 255 : 0;
setPixelValues(newPixelValues);
};
const drawGrid = () => {
const canvas = canvasRef.current;
const ctx = canvas.getContext('2d');
const cellSize = canvas.width / gridSize;
ctx.clearRect(0, 0, canvas.width, canvas.height);
pixelValues.forEach((value, index) => {
const x = (index % gridSize) * cellSize;
const y = Math.floor(index / gridSize) * cellSize;
ctx.fillStyle = `rgb(${value}, ${value}, ${value})`;
ctx.fillRect(x, y, cellSize, cellSize);
ctx.strokeStyle = '#ccc';
ctx.strokeRect(x, y, cellSize, cellSize);
});
};
useEffect(() => {
drawGrid();
}, [pixelValues, gridSize]);
return (
<Card className="w-full max-w-2xl mx-auto">
<CardHeader>
<CardTitle>이미지에서 벡터로의 변환 시뮬레이션</CardTitle>
</CardHeader>
<CardContent className="space-y-4">
<div>
<p className="mb-2">그리드 크기: {gridSize}x{gridSize}</p>
<Slider
value={[gridSize]}
onValueChange={([newSize]) => setGridSize(newSize)}
min={3}
max={10}
step={1}
/>
</div>
<div className="flex justify-center">
<canvas
ref={canvasRef}
width={300}
height={300}
onClick={(e) => {
const rect = canvasRef.current.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const cellSize = 300 / gridSize;
const index = Math.floor(y / cellSize) * gridSize + Math.floor(x / cellSize);
handlePixelClick(index);
}}
style={{ cursor: 'pointer' }}
/>
</div>
<div>
<p className="mb-2">벡터 표현:</p>
<div className="bg-gray-100 p-2 rounded overflow-x-auto">
[{pixelValues.join(', ')}]
</div>
</div>
<div>
<p className="mb-2">설명:</p>
<p>
이 시뮬레이션은 간단한 흑백 이미지가 어떻게 벡터로 변환되는지 보여줍니다. 각 픽셀은 0(검은색)
또는 255(흰색) 값을 가집니다. 그리드의 각 셀을 클릭하여 픽셀 값을 변경할 수 있습니다.
이미지의 모든 픽셀 값은 1차원 벡터로 표현됩니다.
</p>
</div>
</CardContent>
</Card>
);
};
export default ImageToVectorSimulation;
JavaScript
복사