Toggle navigation
Toggle navigation
This project
Loading...
Sign in
강동현
/
nodejs-game
Go to a project
Toggle navigation
Toggle navigation pinning
Projects
Groups
Snippets
Help
Project
Activity
Repository
Pipelines
Graphs
Issues
0
Merge Requests
0
Wiki
Snippets
Network
Create a new issue
Builds
Commits
Issue Boards
Authored by
Overnap
2021-06-08 06:17:48 +0900
Browse Files
Options
Browse Files
Download
Email Patches
Plain Diff
Commit
7f3f404c1e12b7da50068d364e9ea2499800bfb4
7f3f404c
1 parent
764e194a
마우스 이벤트리스너 및 그림 그리기 기능 추가
Hide whitespace changes
Inline
Side-by-side
Showing
1 changed file
with
52 additions
and
0 deletions
web/src/components/room/Canvas.tsx
web/src/components/room/Canvas.tsx
View file @
7f3f404
import React, { useCallback, useEffect, useRef, useState } from 'react';
import { Vector } from './types';
// 참고 : https://basketdeveloper.tistory.com/79
export const Canvas: React.FC = () => {
const canvasRef = useRef<HTMLCanvasElement>(null);
const [mousePosition, setMousePosition] = useState<Vector>({ x:0, y:0 });
const [isPainting, setIsPainting] = useState(false);
const getCoordinates = useCallback((event: MouseEvent): Vector | undefined => {
if (!canvasRef.current) {
...
...
@@ -33,6 +38,53 @@ export const Canvas: React.FC = () => {
}
}, []);
const startPaint = useCallback((event: MouseEvent) => {
const coordinates = getCoordinates(event);
if (coordinates) {
setIsPainting(true);
setMousePosition(coordinates);
}
}, []);
const paint = useCallback(
(event: MouseEvent) => {
// 드래그 방지
event.preventDefault();
event.stopPropagation();
if (isPainting) {
const newMousePosition = getCoordinates(event);
if (mousePosition && newMousePosition) {
drawLine(mousePosition, newMousePosition);
setMousePosition(newMousePosition);
}
}
},
[isPainting, mousePosition]
);
const exitPaint = useCallback(() => {
setIsPainting(false);
}, []);
useEffect(() => {
if (canvasRef.current) {
const canvas: HTMLCanvasElement = canvasRef.current;
canvas.addEventListener('mousedown', startPaint);
canvas.addEventListener('mousemove', paint);
canvas.addEventListener('mouseup', exitPaint);
canvas.addEventListener('mouseleave', exitPaint);
return () => {
canvas.removeEventListener('mousedown', startPaint);
canvas.removeEventListener('mousemove', paint);
canvas.removeEventListener('mouseup', exitPaint);
canvas.removeEventListener('mouseleave', exitPaint);
};
}
}, [startPaint, paint, exitPaint]);
return (
<div className='mx-3 px-2 py-1 rounded shadow'>
<canvas ref={canvasRef} width='512' height='384' />
...
...
Please
register
or
login
to post a comment