Javascript로 그림판 만들기
●강의를 통한 습득 paint mode와 fill mode
버튼을 클릭 할 때마다 paint와 fill 글씨가 변경
paint mode는
자유롭게 지정한 굵기에 따라, 지정한 색에 따라 마우스를 드래그앤 드롭 하는 대로 따라오며 자유로운 펜글씨로 그림을 그려준다.
fill mode는
canvas에 사용자가 지정한 색으로 전체 색칠해 주는 기능이다.
save mode는
사용자가 canvas에 입력한 그림을 저장해준다.
●추가한 기능
사용자가 색을 선택하면 그 위에 색을 보여주는 기능
fill mode일 때는 연필모양 커서로 변경
paint mode일 때는 페인트통 모양 커서로 변경
text 기능 추가
text 버튼을 누르면 커서가 I 모양으로 변경,
현재까지는 개발자가 지정한 글귀로
사용자가 원하는 위치에 원하는 색깔로
도장이 찍힘
(추후 보완 예정 : 추후에는 원하는 위치에 마우스를 클릭하면
그곳에 input창이 생성되고, 원하는 글귀를 입력,
엔터를 누르면 완성되는 기능으로 추가 할 예정)
clear 기능 추가
전체 캔버스 비워주기
image 입력 기능 추가
사용자가 원하는 파일을 선택해서 캔버스에 입력하는 기능
(한번만 사용가능
문제점 : fill이나 paint 버튼 클릭 전까지 계속 입력할 수 있게 했을 때
이벤트 제거하는 것의 까다로움 그래서 현재는 한번만 입력 가능하도록 변경함)
(어려운 점 : image버튼을 클릭했을 때 이미지를 캔버스에 무조건 입력하는 것이 아니라
사용자가 캔버스를 클릭하면 해당 위치에 이미지를 입력해야 하므로
캔버스 클릭시 이벤트리스너를 만들었다.
그런데 이벤트 리스너의 콜백함수를 바깥으로 따로 뺄 경우 지정한 image의 속성들이
전달되지 않아 이벤트리스너에 바로 함수를 넣어버렸다.
그결과 이벤트리스너를 사용하지 않고 싶을 때 예를 들어 paint모드나 fill모드일 때
이벤트를 지울 수 없게 되어 함께 작동하는 오류가 있었다.
그래서 임시로 한 번만 입력하게 만들어 놓았다.)
(추후 보완 예정 : 원하는 사이즈로 마우스 드래그 앤 드롭을 하면
입력하고자 하는 이미지가 그것에 맞춰 변경이 되게 함,
여러번 입력할 수 있게함.)
화질 개선
fill mode일 때 화질이 좋지 않게 보여 그것을 개선 함
앤티앨리어싱으로 화면에 보이는 픽셀과 직접 사용하는 픽셀을 같게 해줌
●추가하고 싶은 기능
캔버스 크기 변경 기능(사용자가 원하는 크기로)
네모 그리기 기능 (사용자가 원하는 크기로)
원 그리기 기능(사용자가 원하는 크기로)
직선 그리기 기능 (현재는 자유선)
채우기 기능(윈도우에 있는 그림판 기능처럼 현재 색을 인식하여 그 색을 원하는 색으로 paint하는 기능)
text기능을 사용자가 원하는 글씨로 입력하는 기능
실행취소 기능