[그림 앱 만들기] 툴(색상 선택, 채우기, 버리기, 지우기) 만들기

색상 선택

기능

색상 네모를 선택하여 선의 색을 선택할 수 있다.

 

기술

- 색상의 div는 data-color:값으로 설정되어 있다.

<div
    class="color-option"
    style="background-color: #ecf0f1"
    data-color="#ecf0f1"
></div>

- 특정 색(div)이 클릭되면 해당 요소의 정보를 불러온다.

const chosenColor = event.target.dataset.color;

- 이미 설정된 네모를 선택하면 input(type="color")의 색도 함께 바뀌도록 설정한다.

 

data attributes 참고

https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes

---

채우기

기능

버튼 Fill을 클릭하고 캔버스에 클릭하면 색상이 채워진다.

 

기술

- isFilling이라는 변수를 만들어 Fill 버튼을 누르면 값을 true로 설정한다.

- 캔버스가 클릭될 때 isFilling이 true라면 현재 색상으로 캔버스 크기의 사각형을 그린다.

- isFilling이 true일 땐 버튼의 텍스트를 Draw로 변경하고, 클릭될 땐 isFilling 값을 false로 변경한다.

---

버리기

기능

 Destroy 버튼을 클릭하면 캔버스가 흰색으로 초기화된다.

 

기술

- Destroy 버튼을 클릭하면 캔버스 크기의 흰색 사각형을 그린다.

- 버튼을 클릭하면 Fill의 속성을 지니고 있기 때문에, Draw 모드로 변경한다.

---

지우기

기능

Erase 버튼을 클릭하고 캔버스에 마우스를 드래그하면 해당 영역이 지워진다.

 

기술

- Erase 버튼을 클릭하면 Draw모드와 같으나 흰색 선을 그린다.

- Draw 모드와 속성이 같아 색상을 선택하거나 채우기를 선택하기 전까지 지우기가 가능하다.

---

https://github.com/soaringwave/html-JS-css/commit/06e6717f60cc552e1853cb8ead87710e4c221db0