[JavaScript] #2.0 Canvas Events (#코딩공부)

https://youtu.be/Efmq3MY7BN8

---

<복습>

https://wook-2124.tistory.com/100

[JavaScript] #1.2 Styles part Two (#코딩공부)

 

<준비물>

https://code.visualstudio.com/

Visual Studio Code - Code Editing. Redefined

 

<코드기록>

// canvas에 마우스를 가져가면 인식할 수 있게함
const canvas = document.getElementById("jsCanvas");

function onMouseMove(event) {
  console.log(event);
}

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


// canvas안의 마우스 위치 좌표값인 offsetX, offsetY 가져오기
function onMouseMove(event) {
    const x = event.offsetX;
    const y = event.offsetY;
    console.log(x, y);
}


// canvas에 마우스를 click했을 때 동작할 mousedown을 만들고
// 반대로 mouse를 땟을 때 painting이 false 되도록 mouseup도 만듦
const canvas = document.getElementById("jsCanvas");
// let으로 painting이 event에 따라 변화되게 정의함
let painting = false;

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

function onMouseDown(event) {
  painting = true;
}

function onMouseUp(event) {
  painting = false;
}

if (canvas) {
  canvas.addEventListener("mousemove", onMouseMove);
  canvas.addEventListener("mousedown", onMouseDown);
  canvas.addEventListener("mouseup", onMouseUp);
}


// 최종 코드
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();
}
// mouseup은 canvas 안에서 mouse를 땠을 때 작동
// mouseleave는 canvas에서 mouse가 나온 상황에 작동
if (canvas) {
  canvas.addEventListener("mousemove", onMouseMove);
  canvas.addEventListener("mousedown", onMouseDown);
  canvas.addEventListener("mouseup", onMouseUp);
  canvas.addEventListener("mouseleave", stopPainting);
}

---

1. Mouse Move

canvas에 mouse를 갖다대면 인식할 수 있도록 event를 설정했다.

 

Mouse event가 발생해서 console에 screenX, screenY, clientX, clientY로 좌표가 찍힌다.

 

canvas 안에서의 mouse event만 인식하면 되기 때문에 canvas 밖에서의 좌표, 즉 윈도우 전체의 좌표인 clientX와 clientY는 무시하고, canvas 안 mouse 위치 좌표값인 offsetX와 offsetY만 가져와서 console로 출력하자.

---

2. Mouse Down, Mouse Up, Mouse Leave

canvas에 mouse click event가 발생했을 때, 즉 canvas에 그림을 그리기 시작했을 때를 위한 function을 만들었다.

 

let으로 painting이 각각의 event에 따라 변화되게 정의했다. "mousedown"은 canvas에 mouse click이 되면 painting을 true로 바꾸고, "mouseup"은 반대로 canvas에 mouse click이 멈추면 painting을 false로 바꾼다.

 

"mouseleave"는 canvas에서 mouse 자체가 떠나서 window에 머무를 경우에 onMouseLeave function을 호출해서 painting을 false로 바꾼다.

 

그러나 여기서 onMouseUp과 onMouseLeave function 둘 다 painting = false로, 같은 기능을 두 개의 function으로 나누는 것은 비효율적이니 하나로 묶어보자.

 

function stopPainting으로 painting = false 기능을 갖게 하고, function onMouseUp이 호출 됐을 때와 "mouseleave" event가 발생했을 때 실행되도록 했다.

 

여기서 주의할 점은, "mouseleave"는 canvas에서 mouse가 완전히 나와 window에 머무르는 상황이라 function을 만들어서 추가할 기능이 없지만, "mouseup"은 canvas 안에서 mouse가 때진 상태의 작동이기 때문에 function을 만들어 추가할 기능이 있을 수도 있으니 따로 stopPainting만 function 안에서 호출했다.

 

---

※ 코로나19 조심하세요!!!!