[JavaScript] #2.4 Brush Size (#코딩공부)

https://youtu.be/j4cAIJutjVI

---

<복습>

https://wook-2124.tistory.com/105

[JavaScript] #2.3 Changing Color (#코딩공부)

 

<준비물>

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

 

<코드기록>

// if문으로 range에 event가 발생할 때마다 handleRangeChange function 실행
// bar를 움직일때마다 target의 value 값이 변하는 것을 출력함
function handleRangeChange(event) {
  console.log(event.target.value);
}

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


// default value(기본값, 2.5)에서 ctx.lineWidth의 size가 
// bar의 움직임에 따라 변경될 수 있도록 override(재정의)함
function handleRangeChange(event) {
  const size = event.target.value;
  ctx.lineWidth = size;
}


// jsMode - Fill을 누르면 전체 색상을 바꿔줄 수 있는 Mode를 만들고
const mode = document.getElementById("jsMode");
// painting과 동일하게 filling 역시 처음에는 false로 default value(기본값)을 설정함
let filling = false;
// "click" event로 handleModeClick function이 실행되고
// if filling ===(equal) true라면, 즉 filling = false 상태인 <Painting Mode>면
// mode(button)을 "FILL" text로 채우고
// else면 filling = true로 <Filling Mode>가 되고 mode(button)을 "PAINT" text로 바꿔줌
function handleModeClick() {
  if (filling === true) {
    filling = false;
    mode.innerText = "Fill";
  } else {
    filling = true;
    mode.innerText = "Paint";
  }
}

if (mode) {
  mode.addEventListener("click", handleModeClick);
}
// 추가로 fill, paint 둘 다 소문자로 적어도 대문자로 변형되도록 설정함
text-transform: uppercase;


// 최종 코드
const canvas = document.getElementById("jsCanvas");
const ctx = canvas.getContext("2d");
const colors = document.getElementsByClassName("jsColor");
const range = document.getElementById("jsRange");
const mode = document.getElementById("jsMode");

canvas.width = 700;
canvas.height = 700;

ctx.strokeStyle = "#2c2c2c";
ctx.lineWidth = 2.5;

let painting = false;
let filling = false;

function stopPainting() {
  painting = false;
}

function startPainting() {
  painting = true;
}

function onMouseMove(event) {
  const x = event.offsetX;
  const y = event.offsetY;
  if (!painting) {
    ctx.beginPath();
    ctx.moveTo(x, y);
  } else {
    ctx.lineTo(x, y);
    ctx.stroke();
  }
}

function handleColorClick(event) {
  const color = event.target.style.backgroundColor;
  ctx.strokeStyle = color;
}

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

function handleModeClick() {
  if (filling === true) {
    filling = false;
    mode.innerText = "Fill";
  } else {
    filling = true;
    mode.innerText = "Paint";
  }
}

if (canvas) {
  canvas.addEventListener("mousemove", onMouseMove);
  canvas.addEventListener("mousedown", startPainting);
  canvas.addEventListener("mouseup", stopPainting);
  canvas.addEventListener("mouseleave", stopPainting);
}

Array.from(colors).forEach(color =>
  color.addEventListener("click", handleColorClick)
);

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

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

---

1. jsRange, Brush Size 조절 Bar

Brush size를 조절할 수 있는 Bar를 만들어보자. id로 정의했으니 class가 아닌 id로 jsRange를 가져오고,

 

range로 정의한 것을 if문을 이용해서, range에 "input" event가 발생하면 handlRangeChange function이 실행되도록 설정했다.

 

보이는 것처럼 Bar의 range를 움직일 때마다 console에 Event가 출력됐다. 그럼 이제 Event Object(target)안에 있는 value만 따로 추출해보자.

 

Bar를 움직일때마다 target의 value 값이 변하는 것이 출력됐다.

 

여기서 Bar의 step, 즉 움직이는 range를 0.1에서 0.01로 바꿔 좀 더 세밀하게 조절할 수 있도록 바꿨다.

 

마지막으로 ctx의 lineWidth가 처음 설정된 default value(기본값, 2.5)에서, Bar를 움직일 때마다 ctx.lineWidth의 size가 변경될 수 있도록 size = event.target.value로 override(재정의)해주면 Brush Size 조절하는 Bar 만들기 끝.

---

2. jsMode, Fill Button(채우기 버튼)

button으로 jsMode를 정의해, Fill button을 누르면 전체 색상을 한번에 채워줄 수 있는 기능을 만들어보자.

 

기본적으로 처음에는 painting도 "click"해야 ture가 되듯이, 즉 canvas에서 mouse를 "click"하는 event가 발생하기 전까지는 let false로 추후에 정의가 바뀔 수 있도록 설정했다. 그리고 filling 역시 default value(기본값)을 false로 설정했다.

 

"click" event로 handleModeClick function이 실행되고 if filling ===(equal) true라면 즉, filling = false 상태인 <Painting Mode>면 mode(button)을 "FILL" text로 채우고, else면 filling = true로 <Filling Mode>가 되고 mode(button)을 "PAINT" text로 바꿔주도록 설정하고, style.css에서 mode(button) text를 무조건 대문자로 표시되도록 uppercase를 적용했다.

 

왼쪽사진) filling = false인 <Painting Mode>로 "FILL" text가 적혀있고,

이 mode(button)을 누르면 <Filling Mode>가 되어

오른쪽사진) filling = true가 되어 다시 <Painting Mode>로 돌아갈 수 있는 "PAINT" text가 된다.

 

---

※ 아직 끝나지 않은 코로나19 조심하세요!!