javascript touch event 사용해보기

자바스크립트에서는 모바일화면에서의 인터렉션을 구현하기 위해 touch event 를 제공해줍니다. 이를 활용하면 모바일에서 터치를 이용한 인터렉션을 구현할 수 있습니다. 

1. event 등록하기

false로 하는 이유는 event가 상위 엘리먼트로 전달되지 않도록 하기 위함입니다.

canvas.addEventListener("touchstart", handleStart,false);
        canvas.addEventListener("touchmove", handleMove,false);
        canvas.addEventListener("touchend", handleEnd, false);

 

 

 

2. touchstart event

 function handleStart(evt) {
    console.log(evt);
    evt.preventDefault();
    if(drawMode === 'fill'){
        ctx.fillRect(0,0,500,500);
    }else {
        ctx.beginPath();
        paintingTrue();

  }
}

3. touchmove event

모바일 환경의 터치 상황을 console로 확인하기 위해서는 크롬의 개발자 도구에서 핸드폰을 선택하면 터치가 가능해집니다!

 function handleMove(evt) {
    evt.preventDefault();
    var touches = evt.changedTouches;
        ctx.lineTo(touches[0].screenX, touches[0].screenY);
        ctx.stroke();
  }

4. touchend event

  function handleEnd(evt) {
    evt.preventDefault();
    ctx.closePath();
    paintingFalse();
  }