Rotation

Type : Constructor

Support : 1.1

Extend : $B.Class

  • RotationEvent 검출기
  • 대상영역의 RotationEvent 검출
    Android, iOS, Touch Device, Windows 지원

Methods

  • Rotation( target, options )

    Rotation 생성
    • target : ElementSelectorjQuery
      터치이벤트 발생시킬 대상.
      ※대상 개체는 단일 개체.
    • options : Object
      • datumPoint : Array
        기준 중심 좌표 x, y배열, 대상 대비 %, (기본값: ['50%', '50%'], px, %단위 지원)
      • baseAngle : Number
        progress를 계산할 기준이 되는 각도 설정 (기본값: 0, 9시 방향이 0도, 0 ~ 360)
      • radius : Array
        호의 x, y축 반지름 설정, (기본값: ['50%', '50%'], px, %단위 지원)

  • degree( degree ) : RotationNumberver 1.1~

    각도설정 및 반환, (실행시 rotation 이벤트 발생)
    • degree : Number
      0 ~ 360 설정할 각도, 설정하지 않으면 현재의 degree를 반환.

  • rotation( progress ) : RotationNumberver 1.1~

    회전 각도설정, (실행시 rotation 이벤트 발생)
    • progress : Number
      음수, 양수 모두 설정 가능, 설정하지 않으면 현재의 progress를 반환.

  • min( progress ) : Rotationver 1.1~

    progress 최소값 설정
    • progress : Number
      음수, 양수 모두 설정 가능, 설정하지 않으면 무한데.

  • max( progress ) : Rotationver 1.1~

    progress 최대값 설정
    • progress : Number
      음수, 양수 모두 설정 가능, 설정하지 않으면 무한데.

  • resize() : Rotationver 1.1~

    resize시 기준 좌표들 다시 계산하여 resize 이벤트 전달

  • reset() : Rotationver 1.1~

    progress = 0 으로 설정 (min, max값이 설정되지 않았을때만 동작)

  • enable() : Rotationver 1.1~

    Rotation 검출 허용 설정

  • disable() : Rotationver 1.1~

    Rotation 검출 비허용 설정

  • clear() : Rotationver 1.1~

    이벤트 및 기본설정 삭제

Events

No. type description property ver
1 rotationstart Rotation 검출 시작 시점
  • target: TouchEvent가 발생한 대상
  • currentTarget: 최초에 등록한 대상
  • degree: 호도각 (0~360)
  • radian: 라디안
  • offsetX, offsetY: 대상 안에서의 마우스 좌표
  • pointX, pointY: 중심점 + 반지름등이 계산된 좌표
  • grow: 1회 rotation된 각도
  • progress: 시작점에서 부터의 angle 수치
 1.1
2 rotationmove Rotation 이동 시점 rotationstart 와 동일 1.1
3 rotationend Rotation 끝나는 시점 rotationstart 와 동일 1.1
3 rotation rotation(), degree() methods로 값이 설정되는 시점 rotationstart 와 동일 1.1
3 resize resize() method가 실행되는 시점 rotationstart 와 동일 1.1

Example

var _rotation = new $B.event.Rotation( '.area', {
            datumPoint: ['50%', '50%'],
            radius: [200, 200],
            baseAngle: 90
        })
        .addListener( 'rotationstart', rotationHandler )
        .addListener( 'rotationmove', rotationHandler )
        .addListener( 'rotationend', rotationHandler )
        .addListener( 'rotation', rotationHandler )
        .addListener( 'resize', rotationHandler )
        .min( -465 )
        .max( 465 )
        .rotation( 0 );


$( window ).on( 'resize', function (e) {
    //대상 사이즈 변경시 포지션 재설정
    _rotation.resize();
});


function rotationHandler (e) {
    switch ( e.type ) {
        case 'rotationstart':
        case 'resize':
        case 'rotation':
        case 'rotationmove':
            $( '.point' ).css({
                'left': e.pointX + 'px',
                'top': e.pointY + 'px'
            });
            break;
        case 'rotationend':
        //
        break;
    }
}