Brush Size

 

 

 

자, 다음 단계는 

이 jsRange 아이디를 추가하는게 필요하다. 

 

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

function handleRangeChange(event) {
  console.log(event);
}

if (range) {
  range.addEventListener("input", handleRangeChange);
}

 

위와 같은 코드를 작성해서 const range가 잘 동작하는지 확인할 필요가 있다. 

 

 

콘솔에 출력이 되는지 확인하고, target을 확인해보자. 

 

event.value값. 바로 우리가 원하는 것이다. 

 

브러시 range의 value값에 따라 브러시 크기가 변해야 하기 때문이다. 

 

전에 최소, 최대 사이즈 그리고 steps(단위)에 대해 말했던 건데, 

 

steps는 항상 내가 움직일 때마다 얼마씩 증가시키는지 설정하는 것이다. 

 

우리는 이제 여기서 또 override를 할거다. 

 

context들을 보자.

 

 

ctx.lineWidth = 2.5;

우린 이 친구에게 변화를 줄것이다. 

 

아래와 같이 override한다.

 

function handleRangeChange(event) {
  const size = event.target.value;
  ctx.lineWidth = size;
}

 

그러면 우리가 range값을 설정할때마다 lineWidth가 변화되어서 두께가 바뀐다. 

 

 

---

이제 fill 버튼이 실행되도록 만들어보자.

 

예를들면, fill 버튼을 클릭하고, 색을 선택한뒤 캔버스를 누르면, 

캔버스 전체에 색상이 입혀지게 하고싶다.

 

먼저 여기 있는 fill 버튼을 클릭하면, 

이 버튼이 paint로 바뀌게 하고 싶다. 

 

그 버튼 안에 있는 html이 변화되도록 하면된다. 

 

fill버튼의 아이디 값을 가져온다. 

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

let filling = false;

function handleModeClick(event) {
    
}

if (mode) {
  mode.addEventListener("click", handleModeClick);
}

 

let filling = false;

 

filling 변수 정의를 하는데, 

 

filling을 하고 있으면 그걸 나에게 말해줄 변수가 필요하다. 

 

만약 내가 filling mode면 이렇게 브러쉬로 그려지는게 아니라, 

내가 filling mode에서 canvas를 클릭하면 canvas 전체에 색이 채워지게 하고 싶은것이다. 

 

그래서 우리는 filling mode인지 아닌지 알 수 있는게 필요한 것이다. 

 

함수는 아래와 같이 작성한다. 

 

function handleModeClick(event) {
  if (filling === true) {
    filling = false;
    mode.innerText = "fill";
  } else {
    filling = true;
    mode.innerText = "paint";
  }
}

 

그럼 버튼을 누를때마다 filling의 불린값도 변화, 텍스트도 fill 혹은 paint로 변경된다.