34. 디바이스의 방향 정보를 다루는 자바스크립트 이벤트

Device Orientation

: 중력과의 관계에서 디바이스의 물리적 방향의 번화를 감지할 수 있다.

- 이를 이용하면 모바일 디바이스를 회전시켰을 때 이벤트를 감지하여 적절히 화면을 변화시킬 수 있다.

 

 

디바이스의 방향 정보를 다루는 자바스크립트 이벤트(2)

1. DeviceOrientationEvent

: 가속도계가 기기 방향의 변화를 감지했을 때 발생

 

2. DeviceMotionEvent

: 가속도에 변화가 일어났을 때 발생

 

 

DeviceOrientationEvent

• 디바이스 방향 변화는 3개의 각도(alpha, beta, gamma)를 사용하여 측정
• deviceorientation 이벤트에 리스너를 등록하면 리스너 함수가 주기적으로 호출되어 업데이트된 방향 데이터를 제공

window.addEventListener('deviceorientation', handleOrientation, false);

function handleOrientation(event) {
  var absolute = event.absolute;
  var alpha    = event.alpha;
  var beta     = event.beta;
  var gamma    = event.gamma;

  // Do stuff with the new orientation data
}

 

deviceorientation 이벤트의 값(4)

• DeviceOrientationEvent.absolute
• DeviceOrientationEvent.alpha
• DeviceOrientationEvent.beta
• DeviceOrientationEvent.gamma

# absolute

• 지구좌표계를 사용하는지에 대한 boolean 값
• 일반적으로 사용하지 않는다.

# alpha

• 0도부터 360도까지 범위를 z축을 중심으로 디바이스의 움직임

# beta

• -180도부터 180도까지의 범위를 x축을 중심으로 디바이스의 움직임
• 앞뒤 움직임

# gamma

• -90도부터 90도까지 범위의 y축을 중심으로 디바이스의 움직임
• 좌우 움직임