html5 API입문 (4) - 마우스 핸들러 편 -

html5 API입문 (4) 

- 마우스 핸들러 편 -

캔버스 기능으로 초간단 반응형 그림판을 만들어보자. 전체적인 개요는 마우스를 캔버스에 클릭하고 드레그할 때마다 작은 박스가 마우스 선을 따라 생성되는 어플이다. 

 

[순서]

---

1) 필요 변수 생성

2) 이벤트 핸들러 생성

3) loop구문 만들기

---

1 『 필요 변수 생성 』

 > 글씨 작성에 필요한 변수를 생성하자.

 

---

//필요 변수 생성

 var canvas = document.getElementById('myCanvas');
 var ctx = canvas.getContext('2d');

 var drawings = false;
 var boxes = [ ];       

 var boxSize = 10;          -------->ⓐ

 var Box = function(options){     --------->ⓑ

     this.x = options.x || 10;
     this.y = options.y || 10;
     this.width = options.width;
     this.height = options.height;
     this.color = options.color;

 }

---

ⓐ : 마우스를 드레그할 때마다 생성되는 박스 크기를 10으로 설정한다.

ⓑ : Box 객체를 생성해서, 속성을 설정한다.

 

2 『 핸들러 설정 』 

---

//코드

 document.addEventListener( 'mousedown' , function(e){

     drawings = true;        -------->ⓐ

});

 document.addEventListener('mouseup',function(e){

     drawings = false;       --------->ⓑ
 });

 document.addEventListener('mousemove',function(e){

     if(drawings === true){

            boxes[boxes.length] = new Box({         --------->ⓒ
            x : e.clientX - canvas.offsetLeft,            --------->ⓓ
            y : e.clientY - canvas.offsetTop,            --------->ⓔ
            width : boxSize,
            height : boxSize,
            color : '#000000'                --------->ⓕ
      });
    }
 });

---

ⓐ : 마우스를 클릭하면, drawings 상태가 'true'로 변하고, 드레그로 박스를 생성할 상태가 된다.

 

ⓑ : 마우스를 클릭했다가 떼면, drawings 상태가 'false'가 되어서 드레그로 박스생성이 중단된다.

 

ⓒ : boxes[boxes.length]는 boxes배열의 처음 길이 0에서 mousemove핸들러가 요청될 때마다 new Box로 객체 인스턴스가 생성되고, boxes.length길이는 1씩 증가한다. 따라서 boxes[boxes.length]라고 해두면, boxes[0],boxes[1],boxes[2] ....... boxes배열의 인덱스값이 순서대로 box.x,box.y좌표에 box가 생성된다.

 

ⓓ : 마우스를 클릭하는 위치가 e.clientX는 브라우저에서 마우스 x좌표값을 의미하고, canvas.offsetLeft는 캔버스가 시작되는 x값 좌측의 여백을 의미한다.

 

ⓔ : e.clientY는 브라우저 시작점(좌측 상단)에서의 마우스 세로 좌표값을 의미하고, canvas.offsetTop은 캔버스 밖 여백 세로를 의미한다.

 

ⓕ : 랜덤 색상을 지정하기 전에 임시로 색을 넣어둔다.

 

3 『 루프 구문 작성 』

---

//코드

 function loop( ){

  draw( );
  update( );
  requestAnimationFrame(loop);

 }

 function draw( ){

       ctx.clearRect( 0, 0, canvas.width, canvas.height );  

       boxes.forEach( function( box, i ) {

       ctx.fillRect( box.x, box.y, box.width, box.height );
       ctx.fillStyle = box.color;
    });
 }

 function update( ){ }
 loop( );

---

4 『 랜덤구문 작성 』

---

function randomNum( min, max ){

       return Math.round( Math.random( )*( max - min + 1 ) + min );
 }

 function randomColor( rMax, rMin, gMax, gMin, bMax, bMin, alpha) {

      Rcolor = randomNum( rMax, rMin );
      Gcolor = randomNum( gMax, gMin);
      Bcolor = randomNum( bMax, bMin);

      return 'rgba('+Rcolor+','+Gcolor+','+Bcolor+','+alpha+')'

}

---

> 랜덤구문은 지난 포스팅의 해당부분을 그대로 사용하였다.

 

 

5 『 mousemove 이벤트 핸들러 color 수정 』

---

document.addEventListener( 'mousemove', function(e){

  if(drawings === true){
       boxes[boxes.length] = new Box({

            x : e.clientX - canvas.offsetLeft,
            y : e.clientY - canvas.offsetTop,
            width : boxSize,
            height : boxSize,
            color : randomColor(255,0,255,0,0,255,0.5)
       });
     }
  });

---