关于js陀螺仪的理解分析


Posted in Javascript onApril 11, 2019

检测设备方向

监听 deviceorientation

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

event中包含以下几个值

属性 描述
type 事件的类型。
bubbles 事件是否正常起泡
cancelable 该活动是否可以取消?
alpha 设备绕Z轴的当前方向; 也就是说,设备围绕垂直于设备的线旋转多远。
beta 设备围绕X轴的当前方向; 也就是说,设备向前或向后倾斜多远。
gamma 设备绕Y轴的当前方向; 也就是说,设备向左或向右转动多远。
absolute 如果方向是作为设备坐标系和地球坐标系之间的差异提供的,则该值是该值; 如果设备无法检测到地球坐标系,则此值为false。

需要重点关注这四个返回值

  • alpha
  • beta
  • gamma
  • absolute

手机轴线如图:

关于js陀螺仪的理解分析

一、理解alpha

alpha 是设备绕Z轴的方向

它的取值范围在0到360度之间。当设备顶端指向正北方向时,该属性的取值为0。

即:围绕垂直手机屏幕的轴转动

如图:

关于js陀螺仪的理解分析

二、理解beta

beta 是设备绕X轴的方向

它的取值范围在-180到180度之间。当设备与地球表面保持平行时,该属性的取值为0。

即:围绕平行音量键的轴转动

如图:

关于js陀螺仪的理解分析

三、理解gamma

gamma 是设备绕Y轴的方向

它的取值范围在-90到90度之间。当该设备与地球表面保持平行时,该属性的取值为0。

即:围绕平行充电口的轴转动

如图:

关于js陀螺仪的理解分析

四、理解absolute

absolute 是用来判断是否是地球坐标系。

如果当前设备坐标系与地球坐标系相对应,则返回true,

否则返回false;

返回值为true时候,可以进行使用其他坐标系作为基准

总结

  alpha => 围绕垂直手机屏幕的轴转动
  beta  => 围绕平行音量键的轴转动
  gamma => 围绕平行充电口的轴转动

  absolute => 返回是否与地球坐标系相对应

示例代码:

if (window.DeviceOrientationEvent) {
 window.addEventListener("deviceorientation", function(event) {
  // alpha: 围绕垂直手机屏幕的轴转动的旋转角度
  var rotateDegrees = event.alpha;
  // gamma: 围绕平行充电口的轴转动的旋转角度
  var leftToRight = event.gamma;
  // beta: 围绕平行音量键的轴转动的旋转角度
  var frontToBack = event.beta;

  handleOrientationEvent(frontToBack, leftToRight, rotateDegrees);
 }, true);
}

var handleOrientationEvent = function(frontToBack, leftToRight, rotateDegrees) {
 // 弹奏一曲夏威夷吉他
};

对于浏览器兼容性方面 可以在使用时候参照MDN的说明

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
jQuery 操作option的实现代码
Mar 03 Javascript
node.js中watch机制详解
Nov 17 Javascript
浅析JavaScript动画
Jun 10 Javascript
javascript中tostring()和valueof()的用法及两者的区别
Nov 16 Javascript
jQuery实现的选择商品飞入文本框动画效果完整实例
Aug 10 Javascript
AngularJS控制器controller给模型数据赋初始值的方法
Jan 04 Javascript
js仿QQ邮箱收件人选择与搜索功能
Feb 10 Javascript
浅析Vue自定义组件的v-model
Nov 26 Javascript
解决在vue+webpack开发中出现两个或多个菜单公用一个组件问题
Nov 28 Javascript
vue中的数据绑定原理的实现
Jul 02 Javascript
vue-cli3.X快速创建项目的方法步骤
Nov 14 Javascript
JavaScript实现鼠标经过表格某行时此行变色
Nov 20 Javascript
angular 表单验证器验证的同时限制输入的实现
Apr 11 #Javascript
angular 实现同步验证器跨字段验证的方法
Apr 11 #Javascript
vue实现新闻展示页的步骤详解
Apr 11 #Javascript
记一次用vue做的活动页的方法步骤
Apr 11 #Javascript
vue数据初始化initState的实例详解
Apr 11 #Javascript
Vue起步(无cli)的啊教程详解
Apr 11 #Javascript
vue+vuex+json-seiver实现数据展示+分页功能
Apr 11 #Javascript
You might like
ajax取消挂起请求的处理方法
2013/03/18 PHP
深入PHP许愿墙模块功能分析
2013/06/25 PHP
phplot生成图片类用法详解
2015/01/06 PHP
PHP实现动态柱状图改进版
2015/03/30 PHP
Mac下php 5升级到php 7的步骤详解
2017/04/26 PHP
PHP中检查isset()和!empty()函数的必要性
2019/02/13 PHP
PHP filesize函数用法浅析
2019/02/15 PHP
angularJS提交表单(form)
2015/02/09 Javascript
JS给超链接加确认对话框的方法
2015/02/24 Javascript
javascript实现C语言经典程序题
2015/11/29 Javascript
Angular在一个页面中使用两个ng-app的方法(二)
2017/02/20 Javascript
vue如何集成raphael.js中国地图的方法示例
2017/08/15 Javascript
JS随机排序数组实现方法分析
2017/10/11 Javascript
Angular通过指令动态添加组件问题
2018/07/09 Javascript
jQuery超简单遮罩层实现方法示例
2018/09/06 jQuery
webpack 开发和生产并行设置的方法
2018/11/08 Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
2019/04/24 Javascript
layer扩展打开/关闭动画的方法
2019/09/23 Javascript
Vue 请求传公共参数的操作
2020/07/31 Javascript
js实现盒子移动动画效果
2020/08/09 Javascript
Python 12306抢火车票脚本
2018/02/07 Python
对python pandas 画移动平均线的方法详解
2018/11/28 Python
Pandas之read_csv()读取文件跳过报错行的解决
2020/04/21 Python
python中实现栈的三种方法
2020/12/19 Python
GUESS盖尔斯法国官网:美国时尚品牌
2016/09/23 全球购物
外企C语言笔试题
2013/11/10 面试题
校园网站的创业计划书范文
2013/12/30 职场文书
函授教育个人学习的自我评价
2013/12/31 职场文书
网上商城创业计划书范文
2014/01/31 职场文书
社区敬老月活动实施方案
2014/02/17 职场文书
2015年前台文员工作总结
2015/05/18 职场文书
收入证明范本
2015/06/12 职场文书
学生会2016感恩节活动小结
2016/04/01 职场文书
CSS3实现的水平标题菜单
2021/04/14 HTML / CSS
Python函数中的不定长参数相关知识总结
2021/06/24 Python
浅谈如何保证Mysql主从一致
2022/03/13 MySQL