[바닐라JS로 그림판 만들기] Brush Size

[출처-유튜브 노마드 코더 Nomad Coders]

https://youtu.be/j4cAIJutjVI

 

다음 단계로는 jsRange 아이디를 추가하는게 필요하다.

 

추가할 것▼

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

// range 이벤트는 input에 반응할 것이다.

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

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

 

 

app.js

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

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

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

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);
    } else {
        ctx.lineTo(x, y);
        ctx.stroke();
    }
}

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

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

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);
}

잘 작동된다.

 

 

 

하지만 우리가 찾고싶은건 이것이 아님.. (니꼬쌤 왈)

event.target.value를 열심히 찾는다.

찾았다!!!!!

 

 

다시 코드를 수정한다.

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

step은 바를 움직일때마다 얼마씩 증가시키는지 설정하는 것이다.

현재는 step을 0.1로 설정해놨음.

위를 보면 0.1씩 증감하는것을 확인할 수 있다.

 

 

 

다음으론 handleRangeChange 함수에다가 override를 해준다.

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

된다!!!!!

새로고침을 하면 다시 2.5step(max가 5step이니까 중간지점)으로 돌아간다.

 

 

 

이제 fill(색상 채우기)를 할 것이다!

FILL 버튼을 클릭하면 PAINT 버튼으로 바뀌도록 만든다.

 

추가할 것▼

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

let filling = false;

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

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

 

 

app.js

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);
}