[바닐라js로 그림판 만들기] Brush Size & fill color

1. brush size

const range = document.getElementById("jsRange");

브러쉬 사이즈를 조정할 range를 자바스크립트에서 가져온다.

 

if(range){

    range.addEventListener("input", handleRangeChange)

}

항상 이렇게 확인을 해주는 것이 좋다. (range가 존재할 때)

Range에 이벤트를 추가해주는데, range는 input에 반응하기 때문에 저렇게 작성해준다.(onchange도 있긴 하던데)

 

function handleRangeChange(event){

    console.log(event);

}

이렇게 해서 event를 확인해보면 event.target안에 value가 있는 것을 확인할 수 있다.

 

function handleRangeChange(event){

    const brushSize = event.target.value;

    ctx.lineWidth = brushSize;

}

브러쉬 색상을 변경했던 것 처럼 같은 방법으로 brush 사이즈가 변경이 되었다.

 

2. fill color

여태 우리가 한 것은 브러쉬로 stroke (선을 긋는) 였는데, 이제는 fill(아예 전체 색으로 채워지게 하는)을 해볼 것이다.

우선 가장 먼저 해야할 것은, fill 버튼을 누르면 paint로 바뀌고, 다시 paint를 누르면 fill로 바뀌게 하는 것을 하려고 한다.

그 버튼안에 있는 HTML 태그를 변경하면 된다.

 

const mode = document.getElementById("jsMode");

버튼을 가져온다.

 

if(mode){

    mode.addEventListener("click",handleModeClick);

}

Mode에 이벤트를 추가하는 코드를 넣는다.

 

let filling = false;

그리고 filling 이라는 변수를 만들고 default 값은 false로 둔다. (전역변수임)

 

Filling을 하고 있으면 그걸 나에게 말해줄 variable이 필요하다.

Filling mode일 때 canvas를 클릭하면 canvas 전체에 색이 채워지게 하고 싶은 것이다.

 

function handleModeClick(){

    if(filling === true){ //fill mode

        filling = false;

        mode.innerText ="Fill";

    } else{ // paint mode

        filling = true;

        mode.innerText = "Paint";

    }

}

다음과 같이 작성하면 일단 처음에 fill인 버튼을 클릭하면 paint로 바뀌고

Paint인 버튼을 클릭하면 fill로 바뀌는 것을 볼 수 있다.(fill <-> paint로 toggle)