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();
}
로 구성하였다.
Author And Source
이 문제에 관하여(Today I Learned #21), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@loopbackseal/Today-I-Learned-21저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)