MultiTouch

Type : Constructor

Support : 1.0

Extend : $B.Class

  • 터치 디바이스에서 대상영역의 Multi Touch Gesture검출기
    Pointer가 1개 이상일때만 이벤트가 검출된다.
  • 스마트폰이나 태블릿처럼 Touch가 되는 Device에서 대상영역의 MultiTouch Pan, Rotation, Zoom Event 검출
    Android, iOS, Touch Device 지원. (Android 2.*에서는 지원하지 않는다.)
    Windows IE10~ 지원 (IE 에서는 해당 영역의 스크롤 차단 문제가 있다. touch-action:none)

Methods

  • MultiTouch( target )

    MultiTouch 생성
    • target : ElementSelectorjQuery
      터치이벤트 발생시킬 대상.
      ※대상 개체는 단일 개체.

  • enable() : MultiTouchver 1.0~

    MultiTouch 검출 허용 설정

  • disable() : MultiTouchver 1.0~

    MultiTouch 검출 비허용 설정

  • clear() : MultiTouchver 1.0~

    이벤트 및 기본설정 삭제

Events

No. type description property ver
1 multitouchstart MultiTouch 시작 시점
  • angle: pointer간의 각도 (0~360)
  • growAngle: 1회 움직인 각도
  • pageX, pageY: clientX, clientY와 같지만, 문서가 스크롤되는 경우, 스크롤될 부분까지 포함한 두 pointer간의 중심 좌표.(IE9~)
  • clientX, clientY: 브라우저의 화면상 가장 위쪽 지점에서 부터 두 pointer간의 중심 좌표. (스크롤된 부분 제외)
  • growX, growY: Touch가 1회 움직인량
  • pan: pan 여부 (touch pointer간의 거리가 일정하게 같이 움직일때)
  • distance: pointer간의 거리
  • distanceH, distanceV: 가로, 세로 pointer간의 거리
  • degree: pointer간의 각도 (0~180)
  • radian: pointer간의 radian값
  • radius: pointer간의 반지름
  • scale: pointer간격을 기준 scale 계산 (100% == 1))
  • growScale: scale이 1회 변경된 값
  • pointers: Touchevent Pointer 객체 [{target, pageX, pageY, clientX, clientY, growX, growY}]
 1.0
2 multitouchmove MultiTouch 이동 시점 multitouchstart 와 동일 1.0
3 multitouchend MultiTouch 끝나는 시점 multitouchstart 와 동일 1.0

Example

var multiTouch = new $B.event.MultiTouch( '#wrap > div.banner' )
        .addListener( 'multitouchstart', touchHandler )
        .addListener( 'multitouchmove', touchHandler )
        .addListener( 'multitouchend', touchHandler );

function touchHandler (e) {
    var pointer1 = e.pointers[0],
        pointer2 = e.pointers[1];

    switch ( e.type ) {
        case 'multitouchstart':
            //
            break;
        case 'multitouchmove':
            $( '.pointer1' ).css({
                'left': pointer1.clientX + 'px',
                'top': pointer1.clientY + 'px'
            });

            $( '.pointer2' ).css({
                'left': pointer2.clientX + 'px',
                'top': pointer2.clientY + 'px'
            });

            $( '.center' ).css({
                'left': e.clientX + 'px',
                'top': e.clientY + 'px',
                '-webkit-transform': 'rotate(' + e.angle + 'deg)'
            });

            if ( e.pan ) {
                //
            }

            break;
        case 'multitouchend':
            //
            break;
    }
}