자바 스크립트에서 수평선과 장치 사이의 각도를 얻는 방법은 무엇입니까?

Question

내 웹 페이지에 물 한 컵을 보여주고 싶습니다. 사용자가 장치를 돌릴 때 물이 자연스러운 수평선까지 내려 가야합니다.

window.addEventListener('deviceorientation', this.handleOrientation.bind(this)); 

handleOrientation(orientData) { 
    var absolute = orientData.absolute; 
    var alpha = orientData.alpha; 
    var beta = orientData.beta; 
    var gamma = orientData.gamma; 
} 

위에서 4 각도 정보를 얻을 수 있습니다. 그러나 장치에서 수평선까지의 현재 각도를 얻는 방법을 모르므로 물을 수평선으로 회전하도록 설정할 수 있습니다.

Answer 1

MDN의 the example과 trigonometry의 비트를 기반으로 아래 코드를 만들 수있었습니다. Android에서 Chrome을 성공적으로 테스트 한 결과, Firefox는 슬프게도 deviceorientation 이벤트를 발생시키지 않습니다 (MDN의 예도 작동하지 않음).

다른주의 사항은 화면 방향입니다 (예 : 기기가 현재 가로 모드 인 경우). 일부 브라우저에서는 이전 API (window.orientation)가 지원되지 않지만 새 API (screen.orientation)는 완전히 구현되지 않았고 다르게 작동합니다.

var watercup = document.querySelector('#watercup'); 
 

 
function handleOrientation(event) { 
 
    var x = event.beta; // In degree in the range [-180,180], x, 'front to back' 
 
    var y = event.gamma; // In degree in the range [-90,90], y, 'left to right' 
 
    var z = event.alpha; // 0-360, z, compass orientation 
 

 
    // coord 1: 0,0 
 
    // coord 2: x,y 
 
    // calculate the angle 
 
    var rad = Math.atan2(y, x); 
 
    var deg = rad * (180/Math.PI); 
 

 
    // take into account if phone is held sideways/in landscape mode 
 
    var screenOrientation = screen.orientation || screen.mozOrientation || screen.msOrientation; 
 
    // 90, -90, or 0 
 
    var angle = screenOrientation.angle || window.orientation || 0; 
 
    
 
    deg = deg + angle; 
 

 
    watercup.innerHTML = Math.round(deg); 
 
    watercup.style.transform = 'rotate('+ -deg +'deg)'; 
 
} 
 

 
window.addEventListener('deviceorientation', handleOrientation);

#watercup { 
 
    border:2px solid #aaa; 
 
    width:100px; 
 
    height:200px; 
 
    background: linear-gradient(to bottom, white 20%, lightblue 20%, blue); 
 
    margin: 20px auto; 
 
}

<div id="watercup"></div>