[바닐라js로 그림판 만들기] Canvas Events

기본적인 HTML과 CSS로 setup을 일단 끝낸 상태에서, 이제 자바스크립트를 작성할 것이다.

먼저 캔버스 위에 마우스를 두면 그것을 감지하는 것을 할 것이다.

지금부터 canvas는 div라고 상상한다.

 

const canvas = document.getElementById("jsCanvas");

먼저 자바스크립트에서 canvas를 가져온다.

 

function onMouseMove(event){

    console.log(event);

}

 

if(canvas){

    //canvas가 존재하는지 확인

    canvas.addEventListener("mousemove",onMouseMove);

}

Canvas가 존재한다면, canvas안에서 마우스가 움직일 때 (mousemove) 이벤트를 콘솔창에 찍도록 일단 시험해본다. 실행하고 콘솔창을 보면 mouseEvent가 좌표도 찍히고 잘 나오는 것을 볼 수 있다. 그런데 여기서 관련 없는 값들이 많은데 여기서 필요한 건 타겟 객체 내에서의 마우스 좌표를 알려주는 offsetX, offsetY이므로 두 값을 가져온다.

 

function onMouseMove(event){

    const x = event.offsetX;

    const y = event.offsetY;

    console.log(x,y);

}

이렇게 두 값을 가져오고 콘솔로 확인해보면 잘 나타나는 것을 확인할 수 있다.

그 다음에 해볼 것은 캔버스 안에 마우스가 들어왔을 때 캔버스를 클릭했을 때 painting을 시작하게 하는 것이다. 그것도 event로 해야 한다.

 

let painting = false; /*painting은 기본적으로 false이지만

                    마우스를 클릭했을 때 true*/

painting이라는 변수를 기본 값을 false로 선언해준다.

 

if(canvas){

    //canvas가 존재하는지 확인

    canvas.addEventListener("mousemove",onMouseMove);

    canvas.addEventListener("mousedown", onMouseDown);

    canvas.addEventListener("mouseup",onMouseUp);

}

 

function onMouseUp(event){

    painting = false;

}

function onMouseDown(event){

    painting = true;

}

Mousedown은 HTML태그에 마우스 버튼을 누르는 순간 발생하는 이벤트이고 mouseup은 눌러진 마우스 버튼이 놓여지는 순간 발생하는 이벤트이다. 일단은 위와 같이 임시로 작성한다. Mousedown일 때 painting은 시작해야 하고, mouseup일 때 painting은 다시 false로 되어야 한다.

 

canvas.addEventListener("mouseleave",onMouseLeave);

 

function onMouseLeave(event){

    painting = false;

}

그리고 painting을 하다가 마우스가 캔버스 바깥을 벗어나면 painting은 다시 false로 설정되어야 한다. 그런 이벤트를 하나 또 만든다. 그것은 mouseleave로 설정한다.

 

위처럼 반복해도 좋지만, 더 좋은 방법은 여기에 stopPainting이라는 function을 만드는 것이다.

stopPainting 함수를 만들고, painting=false 라는 코드를 안에 작성한다.

그리고 onMouseLeave 함수를 지우고 stopPainting으로 대체한다.

그러면 onMouseUp도 없어도 되지않나 싶은데, mouseup도 stopPainting을 하지 않는 이유는 나중에 여기에는 line이 필요하기 때문이다. 실제로 그리는게 필요하니까 stop Painting으 하지 않은 것이다.