노마드코더 JS로 그림 앱 만들기 - 2

그림판의 다양한 기능 추가하기

input 필드의 range 타입을 이용하여 브러쉬의 굵기 지정해주기

  <input id="line-width" type="range" min="1" max="10"
    value="5" step="0.5" />

const lineWidth = document.querySelector('#line-width');

ctx.lineWidth = lineWidth.value;

function onLineWidthChange(evt) {
  ctx.lineWidth = evt.target.value;
}

lineWidth.addEventListener('change', onLineWidthChange);

추가로 위처럼 굵기를 지정해주면, 선이 그려질때마다 같은 경로를 참조하고 있으므로 굵기가 변하는 버그가 생긴다.

이를 위해서 마우스가 Up 되거나 leave 될 때 컨텍스트를 beginPath() 해준다.

 

선의 색 바꿔주기

  <input type="color" id="color" />

const colorSelector = document.querySelector('#color');

function onColorChange(evt) {
  ctx.strokeStyle = evt.target.value;
  ctx.fillStyle = evt.target.value;
}
colorSelector.addEventListener('change', onColorChange);

미리 만들어진 색상을 제공해주기

  <div class="color-option" style="background-color: #1abc9c;"
    data-color="#1abc9c"></div>
  <div class="color-option" style="background-color: #3498db;"
    data-color="#3498db"></div>
  <div class="color-option" style="background-color: #34495e;"
    data-color="#34495e"></div>
  <div class="color-option" style="background-color: #8e44ad;"
    data-color="#8e44ad"></div>
  <div class="color-option" style="background-color: #eeff54;"
    data-color="#eeff54"></div>
  <div class="color-option" style="background-color: #f15345;"
    data-color="#f15345"></div>
  <div class="color-option" style="background-color: #fd822b;"
    data-color="#fd822b"></div>

색상 틀을 만들고, data- 속성을 사용하면 자바스크립트 상에 해당 데이터를 읽어올 수 있다.

data-이름 형식으로

 

위처럼 만들어놓은 색상들을...

const colorOptions = Array.from(document.getElementsByClassName('color-option'));

Array.from() 을 사용하여 HTMLElement 속성을 배열로 바꿔준다.

html 상에서 data- 로 지정해준 컬러값은 자바스크립트에서 dataset으로 접근해줄 수 있으므로 아래처럼 해주면 클릭하는 색에 따라 선의 색이 변경된다.

function onColorClick(evt) {
  ctx.strokeStyle = evt.target.dataset.color;
  ctx.fillStyle = evt.target.dataset.color;
}

colorOptions.forEach(color => color.addEventListener('click', onColorClick));

 

Fill 버튼 만들기

  <button id="mode-btn">Fill</button>

let isFilling = false;
function onModeClick() {
  if(isFilling) {
    isFilling = false;
    modeBtn.innerText = "Fill";
  } else {
    isFilling = true;
    modeBtn.innerText = "Draw";

  }
}

function onCanvasClick() {
  if(isFilling) {
    ctx.fillRect(0,0, 500, 500);
  }
}

canvas.addEventListener('click', onCanvasClick);
modeBtn.addEventListener('click', onModeClick);

 

리셋 버튼 구현

const destroyBtn = document.getElementById('destroy-btn');

// 리셋 버튼
function onDestroyClick() {
  ctx.fillStyle = 'white';
  ctx.fillRect(0, 0, 500, 500);
}

destroyBtn.addEventListener('click', onDestroyClick);

 

 

지우기 모드

const eraserBtn = document.getElementById('eraser-btn');


// 지우개 버튼
function onEraseBtn() {
	ctx.strokeStyle = 'white';
	isFilling = false;
  	modeBtn.innerHTML = 'Fill';
}

eraserBtn.addEventListener('click', onEraseBtn);