html5指南针实现

2017-10-20

概念

地球坐标系

地球坐标系是相对于地心的,也就是说,它的轴是基于重力方向和磁场北方向。我们使用大写的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)
}

 

本文为原创,未经授权,禁止任何媒体或个人自媒体转载
商业侵权必究,如需授权请联系340443366@qq.com
标签: javascript html5

评论

Loading...

最新评论

相关推荐

ts之类型谓词
在了解类型谓词之前,我们先来了解联合类型。 联合类型 日常开发中,我们会定义为一个支持多种类型的变量,比如一个变量可...
vscode自定义组件属性自动提示
在封装业务组件的时候,组件如果可以提供良好的属性提示,对开发的同事是一种很好的体验。 下面有两种方案可以实现属性文档提...
h5のvideo踩坑
video是h5新增的标签,可以通过 video 标签播放 ogg、mp4 、webm 等格式的视频。 🌽...
scroll-top-icon