javaScript. Painting App 구현 - (2) Canvas Event

javaScript. Painting App 구현 - (1) HTML/CSS

지난 회차 진행사항

- index.html과 style.css 작성

 

 

마크업 + CSS 적용결과

 

---

app.js

 

<canvas>태그 

HTML <canvas> 요소는 캔버스 스크립팅 API 또는 WebGL API와 함께 사용해 

그래픽과 애니메이션을 그릴 수 있습니다.

 

 

 

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


function onMouseMove(event) {
    console.log(event.offsetX, event.offsetY);
}

if(canvas) {
    canvas.addEventListener('mousemove',onMouseMove);
}

우선 document.getElementById로 캔버스 태그를 js로 가져오자.

그리고, if(canvas) 를 해서 canvas가 있는지 검사한 후에

mousemove 이벤트리스너를 실행한다.

 

event를 매개변수로 하여 콘솔에 찍어보면

다음과 같이 마우스가 캔버스태그 위에서 움직일 때 마다

속성값이 쭉 바뀌면서 나온다.

 

자세히 보면 다양한 속성들이 있는데,

이중에서 우리는 

offsetX와 offsetY값이 필요하다.

 

clientX,Y	윈도우 전체 범위 내 마우스 위치
offsetX,Y	캔버스태그 내에서의 마우스 위치

 

MouseEvent - Web API | MDN

 

mdn 문서의 mouse Event의 프로퍼티 항목을 살펴보면

 

 

 

 

client는 DOM컨텐츠 안에서의 위치이고,offset은 타겟 노드(여기서는 canvas태그)의 패딩 끝부분을 기준으로 한 포지션이다.(보더는 포함하지 않음)

 

 

** Read only라는 것은 값을 임의로 변경할 수는 없고, 값을 불러다가 사용할 수는 있다는 뜻임.

 

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

x와 y값을 변수로 저장하고, 확인차 콘솔로그 찍어보면 된다.

 

정상작동함

 

이제, 캔버스 위에서 mousemove(움직였을 때) offset좌표를 얻는 것은 완료했다.

 

이제, 그림을 그리려면 마우스를 클릭+드래그+마우스놓기 의 과정을 거쳐야 한다.

>> painting을 시작하려면 클릭

>> painting을 끝내려면 클릭 끝 (마우스 놓기)

 

따라서, 이 과정도 이벤트리스너로 만든다.

대신, painting의 시작과 끝을 구분하기 위해서 painting이라는 변수를 선언하고, true와 false를 반복하게 한다.

 

if(canvas) {
    canvas.addEventListener('mousemove',onMouseMove);   // 마우스가 위에 있을때
    canvas.addEventListener('mousedown',onMouseDown);   // 마우스 클릭시
    canvas.addEventListener('mouseup', onMouseUp);   // 마우스 클릭 놓았을때
}

🔺 이벤트리스너 부분

 

let painting = false;            // 초기값은 false로 

function onMouseDown(event) {
    painting = true;             // 마우스 클릭시 = true로
}

function onMouseUp(event) { 
    painting = false;           // 마우스 놓으면 = false로
}

🔺 painting 선언 / 함수 선언

 

 

+) 만약 컨버스를 벗어나면 painting이 false가 되어야한다.

>> mouseleave 이벤트 이용.

 

 

mousemove	마우스 움직임	offset좌표 얻기
mousedown	마우스 클릭	painting = true
mouseup	클릭 끝(놓기)	painting = false
mouseleave	타겟에서 마우스가 벗어남	painting = false

 

function onMouseDown(event) {
    painting = true;
}

function onMouseUp(event) {
    painting = false;
}

function onMouseLeave(event) {
    painting = false;
}

위와 같이 세 함수가 동일한 내용이므로

하나의 함수로 합쳐주는 것이 바람직하다.

 

>> painting을 false로 해주므로, stopPainting 이라는 함수를 만들자.

function stopPainting() {
    painting = false;
}

// 여기서는 event 속성을 가져올 필요가 없으므로 

 

 

이벤트리스너 부분도 위 함수를 연결시켜준다.

지금까지의 코드는 다음과 같다.

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

let painting = false;

function stopPainting() {
    painting = false;
}

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

function onMouseDown(event) {
	painting: true;
}

function onMouseUp(event) {
    stopPainting();     // 함수 호출 ㅡ painting = false
}

if(canvas) {
    canvas.addEventListener('mousemove',onMouseMove);   // 마우스가 위에 있을때
    canvas.addEventListener('mousedown', onMouseDown);   // 마우스 클릭시
    canvas.addEventListener('mouseup', onMouseUp);   // 마우스 클릭 놓았을때
    canvas.addEventListener('mouseleave', stopPainting); // 마우스 떠날때
}

 

 

 

 

 

---

REFERENCE

Nomadcoder - Free Course

• https://nomadcoders.co/javascript-for-beginners-2/lobby
• https://www.youtube.com/watch?v=jlOtDiYt9wg