[맥진 앱 만들기] STEP1. PC & 모바일 그림판 앱🎨 만들기 (Javascript & Canvas)

노마드코더 javascript 그림판 만들기를 활용하여 mobile도 가능한 앱을 만들어보았다
모바일에서는 mousedown, mouseup이 아니라
touchmove, touchend 등을 활용해야 한다!

0. Touch Event

touchstart : 터치할 때 발생하는 이벤트
touchmove : 터치한 게 이동할 때 발생하는 이벤트 (손 안떼고 쭉 그을 때)
touchend : 손가락 뗄 때 발생하는 이벤트

이 3가지를 기존에 사용했던 mousedown 등의 이벤트 대신 활용해야 한다

1. Mobile & PC인지 구별하기

해당 기기가 맞으면 ismobile = true가 나오도록 코드를 작성한다

let isMobile = false;
function checkMobile(){
    if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
        isMobile = true;
    }else{
        isMobile = false;
    }
};
checkMobile();
console.log(isMobile);
// mobile이면 true 출력

2. 손가락의 (x,y) 구하기

모바일 환경에서는 손가락의 위치를 (event.offsetX, event.offsetY) 로 알 수 없다
아래의 코드를 작성해줘야 한다

function getTouchPos(e) {
    return {
        x: e.touches[0].clientX - e.target.offsetLeft,
        y: e.touches[0].clientY - e.target.offsetTop + document.documentElement.scrollTop
    }
}

3. 본격 Touch Event 함수 만들기

1. touchstart 관련 함수

function touchStart(e) {
    e.preventDefault();
    isPainting = true;
    const { x, y } = getTouchPos(e);
    startX = x;
    startY = y;
}

2. touchmove 관련 함수

function touchMove(e) {
    if(!isPainting) return;
    const { x, y } = getTouchPos(e);
    ctx.lineTo(x, y);
    ctx.stroke();
    startX = x;
    startY = y;
}

3. touchend 관련 함수

function touchEnd(e) {
    if(!isPainting) return;
    // 새로운 path로 설정 안해주면 모든 친구들 같이 변해요
    ctx.beginPath();
    // 마지막 점에서 이어지는 문제 해결
    const { x, y } = getTouchPos(e);
    startX = x;
    startY = y;
    ctx.arc(startX, startY, ctx.lineWidth/2, 0, 2*Math.PI);
    ctx.fillStyle = ctx.strokeStyle;
    ctx.fill();
    isPainting = false;
}

이렇게 코드를 짜면 된다

Mobile 관련 전체 코드

function getTouchPos(e) {
    return {
        x: e.touches[0].clientX - e.target.offsetLeft,
        y: e.touches[0].clientY - e.target.offsetTop + document.documentElement.scrollTop
    }
}
function touchStart(e) {
    e.preventDefault();
    isPainting = true;
    const { x, y } = getTouchPos(e);
    startX = x;
    startY = y;
}
function touchMove(e) {
    if(!isPainting) return;
    const { x, y } = getTouchPos(e);
    ctx.lineTo(x, y);
    ctx.stroke();
    startX = x;
    startY = y;
}
function touchEnd(e) {
    if(!isPainting) return;
    ctx.beginPath();
    const { x, y } = getTouchPos(e);
    startX = x;
    startY = y;
    ctx.arc(startX, startY, ctx.lineWidth/2, 0, 2*Math.PI);
    ctx.fillStyle = ctx.strokeStyle;
    ctx.fill();
    isPainting = false;
}

let isMobile = false;
function checkMobile(){
    if(/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)){
        isMobile = true;
    }else{
        isMobile = false;
    }
};
checkMobile();
console.log(isMobile);
if(isMobile){
    // 모바일 버전
    canvas.addEventListener("touchmove", touchMove, false);
    canvas.addEventListener("touchstart", touchStart, false);
    canvas.addEventListener("touchend", touchEnd, false);
}else{
    // pc버전
    canvas.onmousemove = onMove;
    canvas.addEventListener("mousemove", onMove);
    canvas.addEventListener("mousedown", onMouseDown);
    canvas.addEventListener("mouseup", onMouseUp); 
    canvas.addEventListener("mouseleave", onMouseUp); // 그림판 바깥에 갔을때도 false
}

+) 글자 붙여넣기 & 화면 페인트하기는 모바일 환경에서 작동되지 않는다 ... 해결할 수 있겠지만 나는 어차피 이 기능들 안 쓸거라서 안 찾음 ...
필요하신 분들은 따로 찾아서 쓰세요 !

결과

ㅋㅋㅋ 성공 ~~

모쪼록 도움이 되길 ..

이거 응용해서 리액트 & firebase로 맥진 앱 만들기 이제부터 시작한다 !
그림판과 텍스트 전부 저장할 수 있는 앱 만들 수 있을 .. 까? 몰랑 해보지뭐 ~~
그럼 안녕 ~~

참고링크 : https://joylee-developer.tistory.com/135