html5指南针实现

html5指南针实现

概念

地球坐标系

地球坐标系是相对于地心的,也就是说,它的轴是基于重力方向和磁场北方向。我们使用大写的X,Y,Z来描述地球坐标系的轴。

  • X轴沿着地平面,垂直于Y轴,向东为正,向西为负。
  • Y轴沿着地平面,向北(北极,不是磁场北)为正,向南为负。
  • Z轴垂直于地平面,想象成一条线连接着设备跟地心。背对地心的方向为正,指向地心的方向为负。

设备坐标系

设备坐标系是相对于设备中心的。我们使用小写的x,y,z来描述它的轴。

x轴沿着屏幕表面,向右为正,向左为负。
y轴沿着屏幕表面,向上为正,向下为负。
z轴垂直屏幕表面或键盘,远离屏幕的方向为正。

Alpha

围绕z轴旋转设备将使alpha角度值发生变化:

alpha为0°时表示设备的顶部正指北极方向,当设备向左旋转时,alpha将增加。

Beta

围绕x轴旋转,也就是前后旋转,将使beta值发生改变:

当beta为0° 时表示设备顶部和底部与地表面的距离是一样的,当设备向前翻转时,beta递增到180°,向后翻转递减到-180°。

Gamma

当围绕y轴旋转,也就是左右倾斜设备时,将使gamma值发生改变:

gamma等于0°表示设备左右两边与地表面的距离相等,当设备向右翻转时,gamma递增到90°,向左翻转时,递减到-90°。

指南针实现

要接收设备方向变化信息,你只需要注册监听deviceorientation事件:

window.addEventListener("deviceorientation", handleOrientation, true);

注册完事件监听处理函数后(对应这个例子中的handleOrientation),监听函数会定期地接收到最新的设备方向数据。

方向事件对象中包含四个值:

DeviceOrientationEvent.absolute(返回的是个bool值表示设备是否绝对支持方向定位)

DeviceOrientationEvent.alpha(0°为指北方向)

DeviceOrientationEvent.beta

DeviceOrientationEvent.gamma

if (window.DeviceOrientationEvent) {
    var timer = null, nowTime = +new Date();
    window.addEventListener("deviceorientation", function(event) {
        var alpha = null;
        if (event.webkitCompassHeading) {
            alpha = event.webkitCompassHeading;
        } else {
            alpha = event.alpha;
        }
        var selfDegress = 360 - alpha;
        if (+new Date() - nowTime > 1000) {
            nowTime = +new Date();
            var userPointer = document.getElementById("userPointer");
            if (userPointer) {
                userPointer.style.transform = "translateX(-50%) rotate(" + selfDegress + "deg)";
                userPointer.style.transformOrigin = "50% 100%";
            }
        }
    }, false)
}