如何在javascript中獲取地平線和設備之間的角度？

我想在我的網頁上顯示一杯水。我想要當用戶旋轉他們的設備時，水應該下降到天然線。如何在javascript中獲取地平線和設備之間的角度？

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; 
}

從上面的api中，我可以得到這四個角度信息。但我不知道如何從設備獲取當前角度到地平線，以便我可以將水旋轉到地平線。

來源

2016-11-21 shadox

基於來自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>

來源

2016-11-21 12:45:35 chrki

如何在javascript中獲取地平線和設備之間的角度？

回答

相關問題