Question

我一直在为my project使用'deviceorientation'，在iPhone / iPad上测试时，它在横向模式下表现正常，但在纵向模式下有不规则性。

以下是重复的步骤：

以纵向模式在iPad / iPhone上打开此JSFiddle -
将设备移动，就好像您正在通过相机观看并从观察脚部平移，观察地平线，观察天空一样
event.beta 将从0开始 - > +/- 90 - ＆gt; 0
注意 event.gamma 如何在设备到达地平线时跳转， event.beta = 90

Q1：我如何调整此行为？

Q2：有没有办法从这个方向获得一个确定的值（例如0-180），从地面到天空？

HTML

<b>e.alpha :</b> <span id='alpha'></span><br/>
<b>e.beta :</b> <span id='beta'></span><br/>
<b>e.gamma :</b> <span id='gamma'></span><br/>

JS

function deviceOrientationHandler(e){

  var a = document.getElementById('alpha');
  var b = document.getElementById('beta');
  var g = document.getElementById('gamma');

  a.innerText = e.alpha;
  b.innerText = e.beta;
  g.innerText = e.gamma;
}

if (window.DeviceOrientationEvent) {

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

}else{

  console.error('Device orientation not supported in this browser.');
}

Answer 1

组合在一起时的alpha，beta和gamma值会产生一个方向向量，指示设备在哪个方向指向＆＃39;

在您的示例中，当event.beta值超过+/- 90度时，event.alpha值将自行反转。 event.alpha是设备的标题，指向屏幕顶部，因此当您到达地平线时设备的标题会翻转。当event.alpha反转时，必须同时将另一个角度反转应用于其他角度之一，以确保方向向量继续指向正确的方向。

让我们使用一个有效的例子说我们的起始设备方向是{alpha: 270, beta: 89.9, gamma: 0}。我们可以首先围绕alpha值旋转，然后围绕beta值，最后围绕gamma值来确定方向向量。如果我现在将设备旋转到地平线以上，根据您上面提供的说明，设备的标题将从270度翻转到90度。

在这个新方向中，数据不能是{alpha: 90, beta: 89.9, gamma: 0}，因为如果我们使用这些值来确定方向向量（就像我们上面所做的那样），我们会注意到方向向量现在指向相反的方向它应该在哪里。因此，实施方式执行另一轴的同时翻转以考虑一个轴的这种翻转以确保方向矢量继续指向＆＃39;在正确的方向。

iOS实现因此将此新方向中的数据设置为{alpha: 90, beta: 89.9, gamma: 180}，然后方向向量继续指向正确的方向。

这就是您观察到原始event.gamma值的翻转的原因，这是正确的行为，而不是不规则。

Answer 2

这是欧拉角的“万向节锁定”问题。当两个旋转环的角度太近时会发生这种情况（本例中为gamma和alpha），陀螺仪返回以Euler角表示的值，在某些情况下，尽管3d方位角数据保持相对正确，一个单独的gamma值可能会很远并且会返回另一个轴，因此您发现gamma和alpha只是在同时改变，但它们的总和保持不变。

一种解决方法是制作一个矢量，并将旋转顺序设置为与陀螺仪相同，跟踪矢量并去除不需要的尺寸，从而获得正确的伽玛。

这个想法不只是专注于伽玛本身，3d数据毕竟没错，显示形式引起了问题，您几乎不能跳过或更改DeviceOrienationEvent的返回形式，剩下的唯一方法是重新计算关于其他两个维度的正确值。

原谅我的英语不好，希望能对您有所帮助。

修复iOS Safari Javascript'deviceorientation'事件不规则？

2 个答案: