web端手机方向传感器闲谈

因为工作需要,这段时间接触的手机传感器比较多。
总体来说,市场上的传感器表现参差不齐。IPhone在传感器表现方面卓越,而安卓由于什么机型都有,则显得差强人意。


首先还是说说怎么在web端调用手机传感器吧。
这个还是比较简单的,只需要添加一个事件就可以了。
在最新的h5规范里面,引入了 DeviceOrientation 事件。如果没猜错,该接口应该是调用手机里的综合方向传感器。
事实上,手机上的方向传感器有多个。例如在安卓手机上就有11种传感器,而诸如

  • TYPE_GYROSCOPE
  • TYPE_LINEAR_ACCELERATION
  • TYPE_MAGNETIC_FIELD
  • TYPE_ORIENTATION
  • TYPE_ROTATION_VECTOR

均可以用作对手机的状态翻转等进行监测。当然这需要不同的方法,按下不表。
而目测DeviceOrientation方法是结合了重力检测与磁场检测两方面实现的翻转检测。
DeviceOrientation方法主要监测的是手机上的三个翻转角。
你可以将手机水平至于桌面上。

  • 手机在水平面上旋转为alpha角,此角是基于Z轴旋转。实现方式一般是基于磁场。因此在各种机型上你可以发现这个数值差异十分大。
  • 手机正常翻起与桌面夹角为beta角,此角是基于X轴旋转。实现方式一般是基于重力分量。
  • 手机侧翻与桌面夹角为gama角,此角是基于Y轴旋转。实现方式也是基于重力分量。

我们可以在w3c上阅读相关的定义数据。

做一个做简单的调用例子

if (window.DeviceOrientationEvent) {
     大专栏  web端手机方向传感器闲谈window.addEventListener('deviceorientation', function(event) {
        var a = event.alpha,
            b = event.beta,
            g = event.gamma;
        console.log('Orientation - Alpha: ' + a + ', Beta: '+ b + ', Gamma: ' + g);
    }, false);
} else {
    console.log('This device does not support deviceorientation');
}

借用这段代码你就可以看到手机上的方向传感器封装后的API显示出来的数值。
但是当你记录下来后,你可以发现。该数值在IPhone上是连续而且稳定的。但是在安卓上却十分容易产生波动。
那么,如何去除这种波动则成为了一个十分重要的问题了。


事实上,这个问题也很简单。
我们只需要人工制造一个滤波器就可以了。
假设我们接受的数值为X,则设上一次数值为Xp,我们可以运用一个加权函数降低波动带来的影响。

final=Xalpha+(1-alpha)Xp

当然,假如你的要求比较精细。很多时候简单的一次加权并不能完整去除波动。
所以我们可以采用记录多个以往的值进行平均。

final = (X+(Xp1+Xp2+Xp3+Xp4))/5

通过这种方式得出的数值波动会降低并且更加流畅。
鉴于此,对于传感器的数据调用,一定要真机调试取值适配机型,不要想当然的设置。例如当你把手机与地面垂直的时候,由于磁场感应器位置不佳,容易出现各种方向数值紊乱的场景。因此不推荐调用各种极值的数值。


而关于手机传感器调用的频率,大概是50ms一次。因此我们不需要太过担心带来影响。

原文地址:https://www.cnblogs.com/lijianming180/p/12302613.html