다각형을 그리고 클릭해서 지울 수 있는 캔버스를 리액트로 구현했습니다. 🖌
1
stars
0
forks
source link
기술스택
- React
- Sass를 활용한 스타일 코드 작성
- 따라서 반드시 프로젝트 폴더에서 npm install 후 실행 바랍니다.
구현 내용
- Canvas와 List 컴포넌트로 구성된 페이지
- Canvas에 마우스 클릭으로 그리기를 시작할 수 있고 마우스클릭을 떼면 그 점에서 그리기가 끝나고 시작점과 끝점을 이어 다각형이 완성됨
- 완성한 다각형들은 오른쪽 List 에 항목으로 추가됨
- Delete Mode에는 (체크박스 선택 시) 다각형의 내부를 클릭해서 삭제할 수 있고 새로 그리기 기능은 사용할 수 없음
- 오른쪽 하단의 +/- 버튼을 사용해 Canvas의 정중앙을 기준으로 화면의 배율을 조절할 수 있음 (원래 배열로 돌아왔을 때 처음 다각형 형태 유지)