<추가사항>
※clearCanvas 함수 추가 - 캔버스 초기화
캔버스 화면을 모두 지우고 추출한 캔버스 이미지도 삭제
-ctx.clearRect(x, y, w, h) : 캔버스 영역을 초기화
page - <Canvas.js>
import React, { useEffect, useRef, useState } from "react";
function Canvas() {
const canvasRef = useRef(null);
const [isDrawing, setIsDrawing] = useState(false);
const [lastX, setLastX] = useState(0);
const [lastY, setLastY] = useState(0);
const [outputImageSrc, setOutputImageSrc] = useState(null);
useEffect(() => {
const canvas = canvasRef.current;
const ctx = canvas.getContext("2d");
const drawing = (e) => {
if (!isDrawing) return;
const rect = canvas.getBoundingClientRect();
const offsetX = e.clientX - rect.left;
const offsetY = e.clientY - rect.top;
ctx.beginPath();
ctx.moveTo(lastX, lastY);
ctx.lineTo(offsetX, offsetY);
ctx.strokeStyle = "black";
ctx.lineWidth = 2;
ctx.stroke();
setLastX(offsetX);
setLastY(offsetY);
};
canvas.addEventListener("mousemove", drawing);
return () => {
canvas.removeEventListener("mousemove", drawing);
};
}, [isDrawing, lastX, lastY]);
const drawingCanvas = (e) => {
setIsDrawing(true);
const rect = e.target.getBoundingClientRect();
setLastX(e.clientX - rect.left);
setLastY(e.clientY - rect.top);
};
const stopDrawing = () => {
setIsDrawing(false);
};
const canvasOut = () => {
setIsDrawing(false);
};
const outputCanvasImage = () => {
const canvas = canvasRef.current;
setOutputImageSrc(canvas.toDataURL());
};
//다시 쓰기 함수
const clearCanvas = () => {
const canvas = canvasRef.current;
const ctx = canvas.getContext("2d");
ctx.clearRect(0, 0, canvas.width, canvas.height); //캔버스 전체 영역을 지움
setOutputImageSrc(null); //추출한 이미지도 삭제
};
return (
<div>
<canvas
ref={canvasRef}
width={500}
height={500}
style={{ border: "1px solid black" }}
onMouseDown={drawingCanvas}
onMouseUp={stopDrawing}
onMouseOut={canvasOut}
/>
{outputImageSrc && <img src={outputImageSrc} alt="분석된 이미지" />}
<div>
<button onClick={outputCanvasImage}>추출</button>
<button onClick={clearCanvas}>다시 쓰기</button> <!--다시 쓰기 버튼-->
</div>
</div>
);
}
export default Canvas;
'프로젝트 > 한글 게임' 카테고리의 다른 글
6. Google Vision API (0) | 2024.04.14 |
---|---|
5. 선 한 획 씩 삭제하기 (0) | 2024.04.11 |
3. Canvas 이미지 추출 (0) | 2024.04.11 |
2. 선 그리기 (0) | 2024.04.11 |
1. Canvas (0) | 2024.04.11 |