zoukankan      html  css  js  c++  java
  • 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一次。因此我们不需要太过担心带来影响。

  • 相关阅读:
    Linux下安装vmtools的语句
    [WP]BugkuCtf
    Linux文件属性及权限
    学习pwn的前提工作及部分解决方案
    windows环境下MySQL mysql-5.7.17-winx64 (社区服务版,community server)安装教程
    ubuntu14.04 LTS 更新国内网易163源
    session cookie
    java collection map
    重温 总结 maven几个重要概念
    java通信
  • 原文地址:https://www.cnblogs.com/lijianming180/p/12302613.html
Copyright © 2011-2022 走看看