Orientation 和 motion 数据解释

总言

当我们要使用 orientation 和 motion 事件时,理解浏览器给我们的相关值是什么意思就显的相当重要了。这篇文章会详细介绍在用的坐标系统并会教你如何全用它们。

警告: 目前,Firefox 和 Chrome 处理坐标的方式不同。在使用它们的时候要多加注意。

坐标系

坐标系是一种描述物体位置的系统,它包含三个轴 (X,Y,Z),三个轴共同描述了物体相对于参照物的位置信息。当我们使用 orientation 和 motion 事件时会接触到两种坐标系统。

地球坐标系

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

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

设备坐标系

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

axes.png

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

备注: 对于手机或平台而言,这里的设备方向总是相对于屏幕的标准方向,大部分是“竖屏”方向。而对于笔记本电脑来说,设备方向是相对于键盘的。如果你想检测设备方向变化来进行补偿调整,你可以使用 orientationchange 事件。

旋转 (Rotation)

旋转描述的是设备在设备坐标系跟地球坐标系中任意轴上的差异值,用角度表示。

Alpha

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

alpha.png

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

Beta

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

beta.png

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

Gamma

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

gamma.png

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