RotatePanInput | 한국어

RotatePanInput 은 터치로 움직인 각도를 반환해주는 Axes 의 Input 타입으로 PanInput 의 원형 버전입니다.

참고로 Input Type 은 Axes 의 Plugin 입니다. 사용자 입력에 따른 변화값을 Axes 에 전달해주는 역할을 합니다. Axes 는 그 변화값을 누적시켜 최종 좌표 값을 갖게 됩니다. 그리고 Axes 는 그 변경 내용을 사용자에게 이벤트를 통해 전달합니다.

더 자세한 내용은 아래 문서를 참고해 주세요.

• How to create an ui that responds to user actions using eg.axes
• How to create a custom InputType (Korean)

PanInput 은 터치를 통해 x, y 의 좌표가 얼만큼 움직였는지 알려줄 수 있습니다. 반면 RotatePanInput 은 터치 시 특정 축을 중심으로 몇 도 회전되었는지 알려줍니다.

대표적인 사례가 NAVER 그린닷 프로젝트의 홈화면입니다.

사용방법

HTML

<div id="area" class="axes-target"></div>

JS

var input = new eg.Axes.RotatePanInput("#area");

// create eg.Axes with option
var axes = new eg.Axes({
  // property name('angle') could be anything you want (eg. x, y, z...)
  angle: {
    range: [-720, 720] /* from 720 deg to 720 deg */
  }
}).on("change", function(e) {
  console.log("Current angle is", e.pos.angle + "deg";)
});

// Important thing: you need to connect axes with input.
axes.connect("angle", input);

예제

• Codepen - RotatePanInput Basic

주의사항

• 회전의 기준은 Axes 가 적용될 대상 Element 의 중심입니다. 따라서 그린닷 프로젝트와 같은 반원 형태의 경우 Element 의 위치가 보이지 않도록 위치를 조정해야 합니다.