바닐라 JS로 그림 앱 만들기 #2.5~2.6 Filling Mode , Eraser

코딩 많이 안 했더니 감 떨어졌다,,

원하는 기능을 구현할 때 생각과는 다른 방향으로 구현 될 수도 있다는 거 기억하기

ex) 지우기 기능 → 흰색으로 칠하기

function onEraseClick(event){
    ctx.beginPath();
    ctx.fillStyle = "white";
    onMove(event);
}

Filling Mode에서 Destroy(전체 삭제) 버튼 구현하면서 캔버스 모양의 흰색 사각형 채우는 거 보고

지우는 건 이런식으로 하는건가,,? 하면서 구현해 본 코드.

근데 진짜 어림도 없음 ;

fillStyle : 도형을 채우는 색 설정

strokeStyle() : 선 색 설정

function onDestroyClick(){
    ctx.fillStyle = "white";
    ctx.fillRect(0,0,CANVAS_WIDTH,CANVAS_HEIGHT);
}

이게 destroy 버튼 구현하는 이벤트 리스너.

fillStyle을 하는 이유는 fillRect을 하기 위해 !

지금 보니 그냥 함수 사용을 잘못 한 거였다. 아무래도 강의만 보고 따라하다 보니 기억하고 활용을 못 한 달까ㅜ

function onEraseClick(event){
    ctx.strokeStyle = "white";
    isFilling = false;
    modeBtn.innerText = "Fill";
}

결국 지우는 건 이 정도로만 하면 됨 ~~

Fill 모드에서 Erase 를 누르면 자동적으로 Draw모드로 바뀌게 된다. 그래야 그 이후 행동이 자연스러워지므로!

>> 이해 안 되면 Meme Maker 웹으로 확인하기

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Meme Maker</title>
    <link rel="stylesheet" href="styles.css"/>
</head>
<body>
    <canvas></canvas>
    <input id="line-width" type="range" min="1" max="10" value="5" step="0.5"/>
    <input type="color" id="color" />
    <div>
        <div class = "color-option" 
        style="background-color: #1abc9c;" 
        data-color="#1abc9c"></div>
        <div class = "color-option" 
        style="background-color: #2ecc71;" 
        data-color="#2ecc71"></div>
        <div class = "color-option" 
        style="background-color: #3498db;" 
        data-color="#3498db"></div>
        <div class = "color-option" 
        style="background-color: #9b59b6;" 
        data-color="#9b59b6"></div>
        <div class = "color-option" 
        style="background-color: #34495e;" 
        data-color="#34495e"></div>
        <div class = "color-option" 
        style="background-color: #f1c40f;" 
        data-color="#f1c40f"></div>
        <div class = "color-option" 
        style="background-color: #e67e22;" 
        data-color="#e67e22"></div>
        <div class = "color-option" 
        style="background-color: #e74c3c;" 
        data-color="#e74c3c"></div>
    </div>
    <button id="mode-btn">Fill</button>
    <button id="destroy-btn">Destroy</button>
    <button id="eraser-btn">Erase</button>

    <script src = "app.js"> </script>
</body>
</html>

canvas{
    width: 500px;
    height: 500px;
    border: 5px solid black;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
}

.color-option{
    width: 50px;
    height: 50px;
    cursor: pointer;
}

const colorOptions = Array.from(document.getElementsByClassName("color-option"));
// color들을 javascript Array로 만듦
const lineWidth = document.getElementById("line-width");
const color = document.getElementById("color");
const canvas = document.querySelector("canvas");
const ctx = canvas.getContext("2d");
const modeBtn = document.getElementById("mode-btn");
const destroyBtn = document.getElementById("destroy-btn");
const eraserBtn = document.getElementById("eraser-btn");

const CANVAS_WIDTH = 500;
const CANVAS_HEIGHT = 500;
canvas.width = CANVAS_WIDTH;
canvas.height = CANVAS_HEIGHT;

ctx.lineWidth = lineWidth.value;
let isPainting = false;
let isFilling = false;

function onMove(event){
    if(isPainting){
    ctx.lineTo(event.offsetX, event.offsetY);
    ctx.stroke();
    return;
    }
    ctx.moveTo(event.offsetX, event.offsetY);
}

function startPainting(){
    isPainting = true;
}

function onMouseUp(){
    isPainting = false;
}

function cancelPainting(){
    isPainting = false;
    ctx.beginPath(); //모든 line들은 같은 path로 그려지는 것 기억
}

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

function onCOlorChange(event){
    ctx.strokeStyle = event.target.value;
    ctx.fillStyle = event.target.value;
}

function onColorClick(event){
    const colorValue = event.target.dataset.color
    ctx.strokeStyle = colorValue;
    ctx.fillStyle = colorValue;
    color.value = colorValue;
}

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

    }
}

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

function onDestroyClick(){
    ctx.fillStyle = "white";
    ctx.fillRect(0,0,CANVAS_WIDTH,CANVAS_HEIGHT);
}

function onEraseClick(event){
    ctx.strokeStyle = "white";
    isFilling = false;
    modeBtn.innerText = "Fill";

}

canvas.addEventListener("mousemove", onMove);
canvas.addEventListener("mousedown", startPainting);
canvas.addEventListener("mouseup", onMouseUp); 
canvas.addEventListener("mouseleave", cancelPainting);
canvas.addEventListener("click", onCanvasClick);

lineWidth.addEventListener("change", onLineWidthChange);
color.addEventListener("change", onCOlorChange);

colorOptions.forEach(color => color.addEventListener("click", onColorClick));
//모든 color을 가져다가 이벤트리스너를 추가함

modeBtn.addEventListener("click", onModeClick);
destroyBtn.addEventListener("click", onDestroyClick);
eraserBtn.addEventListener("click", onEraseClick);

'바닐라 JS로 그림 앱 만들기' Chapter2 끝!! 기념 코드 중간정리

이제 이미지, 텍스트 넣는거랑 css만 남았당

'웹 프론트엔드 > 바닐라 JavaSctipt' 카테고리의 다른 글

바닐라 JS로 그림 앱 만들기 #2.3~2.4 Paint Color (0)	2024.01.24
바닐라 JS로 그림 앱 만들기 #2.2 Line Width (0)	2024.01.23
바닐라 JS로 그림 앱 만들기 #2.1 Mouse Painting (1)	2024.01.23
바닐라 JS로 그림 앱 만들기 #2.0 Painting Lines (2)	2024.01.23
바닐라 JS로 그림 앱 만들기 #1 THE CANVAS API (2)	2024.01.17

'웹 프론트엔드 > 바닐라 JavaSctipt' 카테고리의 다른 글

티스토리툴바