javascript - 如何在javascript中获取地平线和设备之间的 Angular ？

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

从上面的api中，我可以获得这四个 Angular 信息。但我不知道如何获取设备到地平线的当前 Angular ，以便我可以将水旋转到地平线。

Answer 1

基于the example来自 MDN 和一些 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>