자바스크립트 마우스 이벤트 동작시키기 2편

마우스 이벤트를 감지하기 위해서는 이벤트 리스너를 등록한다.

자바스크립트 코드를 작성하자.

1. 마우스 이벤트 리스너 등록

//윈도우 창이 다 불리면 drawScreen 함수를 호출해라.
window.addEventListener("load",drawScreen,false);

window.addEventListener("mouseup" , mouseUp,false);
window.addEventListener("mousedown" , mouseDown,false);
window.addEventListener("mousemove" , mouseMove,false);

 

화면을 그려주는 리스너에 이어서 마우스 mouseup, mousedown, mousemove 이벤트를 등록한다.

실행 함수로는 mouseUp, mouseDown, mouseMove 를 등록한다. 이런 함수를 콜백함수라고 부르기도 한다.

그럼, 콜백함수 를 작성해보자.

2. 콜백함수 작성

//마우스 좌표
var xMouse = 0;
var yMouse = 0;
var clicked = false;

function mouseUp(e){
  clicked = false;
}

function mouseDown(e){
  clicked = true;
  xMouse = e.clientX;
  yMouse = e.clientY;

  drawScreen();
}

function mouseMove(e){
  xMouse = e.clientX;
  yMouse = e.clientY;
  if(clicked)
   drawScreen();
}

 

오늘 우리가 할일은 마우스 이벤트를 받고 그 이벤트에 따라서 이미지를 움직이는 동작을 만들어 볼거다.

이를 위해 좌표점이 필요하다. 마우스가 클릭 되었을때 와 마우스가 움직일때의 좌표점을 기억했다가 해당 동작에서 이미지가 움직일수 있도록 구현한다.

 

var clicked 변수를 사용하는 이유는 마우스 클릭시 와 움직일때만 이미지를 그려주기 위함이다.

mouseDown(e) e 인자 값은 마우스 이벤트를 가지고 있는 클래스 이다.

e.clientX , e.clientY로 현 마우스의 좌표점을 받을 수 있다.

3. 이미지 로딩하기

var img = new Image();
img.src = "alien.png";
img.onload = drawScreen;

 

마우스에 따라 움직이는 이미지를 로딩한다.

이미지 로딩 방법은 하기 포스팅을 참고 바란다.

자바스크립트 캔버스에 이미지 띄우기

 

4. 화면을 그려주는 함수 구현

function drawScreen(){
  //연결된 HTML문서에서 캔버스를 가져온다
  var canvas = document.getElementById("canvas");
  // 2D 그림을 그리기 위해서 컨텍스트를 가져온다.
  var context2D = canvas.getContext("2d");
  //배경색 설정 (검정)
  context2D.fillStyle = "#000000";
  //배경 크기 설정
  context2D.fillRect(0, 0, 700, 500);

  //이미지 그리기
  context2D.drawImage(img, xMouse, yMouse ,100, 100);
}

 

4-1. 웹문서에서 캔버스를 가져온뒤 2d 컨텍스트를 설정하는 작업을 한다.

4-2. 해당 컨텍스트로 이미지를 그린다.

 

손쉽게 캔버스는 그림판(도화지), 컨텍스트는 그림을 그릴 도구들(펜, 붓) 이라고 생각하자.

마우스 이벤트 구현이 완료 되었다.

 

결과화면을 보자.

이미지가 로딩되었고, 마우스 드래그(move)에 따라 이미지가 따라 움직인다.

캔버스는 빨간색 영역이다. 컨텍스트를 사용해서 검정 네모 박스를 그렸다.

그리고 이미지를 불러왔다.

검정 네모 박스 영역이 캔버스 보다 작기때문에 drawscreen() 함수를 계속 호출하더라도

위 오른쪽 이미지와 같이 네모박스 영역 밖에는 잔상이 남는다.

 

마우스 와 키보드 이벤트가 전체 구현된 자바스크립트 코드는 하기와 같다.

//윈도우 창이 다 불리면 drawScreen 함수를 호출해라.
window.addEventListener("load",drawScreen,false);

window.addEventListener("keydown",onkeydown,false);
window.addEventListener("keyup" , onkeyup,false);

window.addEventListener("mouseup" , mouseUp,false);
window.addEventListener("mousedown" , mouseDown,false);
window.addEventListener("mousemove" , mouseMove,false);

var img = new Image();
img.src = "alien.png";
img.onload = drawScreen;

//마우스 좌표
var xMouse = 0;
var yMouse = 0;
var clicked = false;

function mouseUp(e){
  clicked = false;
}

function mouseDown(e){
  clicked = true;
  xMouse = e.clientX;
  yMouse = e.clientY;

  drawScreen();
}

function mouseMove(e){
  xMouse = e.clientX;
  yMouse = e.clientY;
  if(clicked)
   drawScreen();
}


var keyStatus ="";
var keyInfo="";

function onkeydown(e){
  keyInfo = e.key;
  keyStatus = e.type;
  drawScreen();
}
function onkeyup(e){
  keyInfo = e.key;
  keyStatus = e.type;
  drawScreen();
}

function drawScreen(){
  //연결된 HTML문서에서 캔버스를 가져온다
  var canvas = document.getElementById("canvas");
  // 2D 그림을 그리기 위해서 컨텍스트를 가져온다.
  var context2D = canvas.getContext("2d");
  //배경색 설정 (검정)
  context2D.fillStyle = "#000000";
  //배경 크기 설정
  context2D.fillRect(0, 0, 700, 500);

  //이미지 그리기
  context2D.drawImage(img, xMouse, yMouse ,100, 100);

  //키보드 입력값 적을 텍스트 정보
  context2D.fillStyle = "#ff0000";
  context2D.font = "15px Arial";
  context2D.textBaseline = "top";
  context2D.fillText("Inputed key:" +  keyInfo,10,10);
  context2D.fillText("key status :" + keyStatus,10,30);
}