Today I Learned #21

paintJS javascript 설정 #1

바닐라 JS로 그림판의 기능을 하는 사이트를 구성하기 위하여, 지난 시간까지 html과 css를 구성하였고, 요소들에 대한 클릭, 마우스 이동, 드래그와 같은 반응을 구성하는 javascript 작성을 해보았다.

기본 설정

const canvas = document.getElementById("jsCanvas");
let painting = false;

기존에 jsCanvas로서 id를 지정했던 <canvas>객체를 const를 통해 선언해주고, 그림을 그리는 중인지 여부를 표현하는 painting을 false로서 초기화해주었다.

onMouseMove

if(canvas) 문을 통하여 canvas가 존재하는지 여부를 사전에 확인하고, 만약에 존재한다면 평소의 init()에 해당하는 내용을 해당 조건문 안에 작성했다. canvas.addEventListener("mousemove", onMouseMove); 가장 먼저 작성한 것은 마우스의 움직임에 해당하는 mousemove의 event listener를 가장 먼저 선언해주고, 해당 함수의 내용을 작성했다. onMouseMove의 첫 선언으로서, console.log(event)를 하여 개발자 도구를 통해 확인하였을때, event의 내부에는 clientX와 clientY, offsetX와 offsetY가 있는데, client의 경우는 해당 창 자체의 X와 Y를 의미하고, offset의 경우에는 해당 event가 발생한 target에서 시작하는 X와 Y를 의미한다. 따라서 그림판의 경우는 event.target에 해당하는 offsetX와 offsetY가 필요하기 때문에 다음과 같이 작성하였다.

function onMouseMove(event) {
    const x = event.offsetX;
    const y = event.offsetY;
}

onMouseDown

그림판의 경우, 마우스를 클릭한 상태로 드래그 하는 방식으로 그림을 그린다.
따라서 마우스가 클릭된 상태를 의미하는 mousedown을 인식하여야 하는데, 따라서 canvas.addEventListener("mousedown", onMouseDown); 다음과 같이 event listener를 추가하였다. 또한 해당 onMouseDown 함수의 내용은 그림을 그리는 상태를 표현하기 위해 선언하였던 painting을 true로 정하도록 하였다.

onMouseUp, stopPainting

mousedown을 통해 true가 된 painting은 페이지로 하여금 그림을 그리는 상태, 붓을 내린 상태를 의미하도록 하였고, 그렇다면 붓을 들어올리는 상태도 페이지 상에 존재해야 정상적인 그림을 그릴 수 있게 된다. 따라서, 붓을 들게 되는 상태를 어떤 event를 통해야하는지 정해야 했고, 클릭된 마우스 버튼을 들어올리는 mouseup event와, <canvas>의 내부에서 마우스가 벗어나는 mouseleave event가 적합하다고 판단하였다. 따라서 stopPainting 함수를 생성, painting = false;를 하였다.

canvas.addEventListener("mouseup", onMouseUp);
canvas.addEventListener("mouseleave", stopPainting);

mouseup event에 대한 콜백 함수로 stopPainting 함수가 아닌 onMouseUp을 사용한 이유는, stopPainting이외에도 다른 기능이 추가될 것이기 때문이고, onMouseUp의 내부에는

function onMouseUp(event) {
    stopPainting();
}

로 구성하였다.