javaScript. Painting App 구현 - (6) Fill mode

 

javaScript. Painting App 구현 - (5) Brush Size

지난 회차 진행사항

 

- 브러시 사이즈 조절

function changeSize(event) {
    // const size = range.value;
    const size = event.target.value;
    ctx.lineWidth = size;
}

 

- fill / paint 모드 변경

function handleModeClick(event) { 
    if(filling === true) {        // filling 모드이면
        filling = false;           
        mode.innerText = "fill"
    } else {
        filling = true;
        mode.innerText = "paint"    // paint 모드이면 ㅡ 맨처음
    }
}

 

 

---

 

 

app.js

 

const canvas = document.getElementById("jsCanvas");
const colors = document.getElementsByClassName("jsColors");
const range = document.getElementById("jsRange");
const mode = document.getElementById("jsMode");
const ctx = canvas.getContext("2d");

const INITIAL_COLOR = "#2c2c2c";


canvas.width = document.getElementsByClassName("canvas")[0].offsetWidth;
canvas.height = document.getElementsByClassName("canvas")[0].offsetHeight;



// Default
ctx.strokeStyle = INITIAL_COLOR;
ctx.fillStyle  = INITIAL_COLOR;
ctx.lineWidth = 2.5;

let filling = false;
let painting = 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);
        console.log('creating path in', x, y);
    } else {
        ctx.lineTo(x, y);
        ctx.stroke();
        console.log('creating line in', x, y);
    }
}


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

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

function fillColor(event) {
    if(filling) {
        ctx.fillRect(0, 0, canvas.width, canvas.height);
    }
}

function handleModeClick(event) { 
    if(filling === true) {        // filling 모드이면
        filling = false;           
        mode.innerText = "fill"
    } else {
        filling = true;
        mode.innerText = "paint"    // paint 모드이면 ㅡ 맨처음
    }
}



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




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


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



mode.addEventListener('click', handleModeClick);

 

- 변경사항

 

1.

function handleModeClick(event) { 
    if(filling === true) {        // filling 모드이면
        filling = false;           
        mode.innerText = "fill"
    } else {
        filling = true;
        mode.innerText = "paint"    // paint 모드이면 ㅡ 맨처음
    }
}

 

 

2. 

canvas.addEventListener('click', fillColor);

** click과 mousedown의 차이는?

mousedown	마우스를 클릭하고 있는 상태 = 마우스 클릭을 누르고 마우스에서 손가락을 떼지않은 상태
click	클릭을 하고 마우스에서 뗀 것

 

 

 

3. 

const INITIAL_COLOR = "#2c2c2c";

- 여러번 사용되는 문자열을 저장하는 변수이다.

이는 대문자로 작성하는것이 관례이며,

오타로 인한 에러 발생을 막을 수 있다.

 

(변수로 저장해야 디버깅 가능하므로)

 

 

ctx.strokeStyle = INITIAL_COLOR;
ctx.fillStyle  = INITIAL_COLOR;

strokeStyle의 디폴트값과

fillStyle의 디폴트 값을 설정한다.

 

이전에는 stroke만 했다면

이제는 fill도 스타일 지정을 해준다.

 

(둘다, 따로 설정을 안해주면 #000 - black 임)

 

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

이전에 작성했던 color를 클릭해서 그 색상을 따서 style에 적용시키는 함수이다.

이 함수는 

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

위와 같은 이벤트리스너에 연결된 함수이다.

 

이전에는, stroke스타일만 지정해주었다면

이제는 filling 이 true일때, 즉 filling 모드일때

fillstyle을 해당 color를 대입해준다.

 

>> color은 event.taget.style.backgroundcolor이다.

 

 

 

4.

 

if (canvas) {
    canvas.addEventListener('mousemove',onMouseMove);   
    canvas.addEventListener('mousedown', startPainting); 
    canvas.addEventListener('mouseup', stopPainting);  
    canvas.addEventListener('mouseleave', stopPainting); 
    canvas.addEventListener('click', fillColor);  // 추가된 부분
}

 

이제 addEventListener을 추가해준 부분에 해당하는

fillColor함수를 선언한다.

 

function fillColor(event) {
    if(filling) {
        ctx.fillRect(0, 0, canvas.width, canvas.height);
    }
}

여기서 ctx.fillRect는사각형 모양으로 fill해주는 메소드이다.매개변수로 들어가는 값은 순서대로x좌표, y좌표, width, height 순이다.

 

x,y,w,h순

 

 

 

 

 

 

 

 

 

---

REFERENCE

Nomadcoder - Free Course

• https://nomadcoders.co/javascript-for-beginners-2/lobby
• https://www.youtube.com/watch?v=jlOtDiYt9wg