关于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 相关文章推荐
扩展js对象数组的OrderByAsc和OrderByDesc方法实现思路
May 17 Javascript
Jquery 切换不同图片示例代码
Dec 05 Javascript
javascript判断图片是否加载完成的方法推荐
May 13 Javascript
微信小程序 选择器(时间,日期,地区)实例详解
Nov 16 Javascript
angular双向绑定模拟探索
Dec 26 Javascript
详解JavaScript调用栈、尾递归和手动优化
Jun 03 Javascript
微信小程序实现图片上传、删除和预览功能的方法
Dec 18 Javascript
基于js中的存储键值对以及注意事项介绍
Mar 30 Javascript
最简单的JS实现json转csv的方法
Jan 10 Javascript
微信小程序template模板与component组件的区别和使用详解
May 22 Javascript
JS/CSS实现字符串单词首字母大写功能
Sep 03 Javascript
解决vue+router路由跳转不起作用的一项原因
Jul 19 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
php操作SVN版本服务器类代码
2011/11/27 PHP
php记录代码执行时间(实现代码)
2013/07/05 PHP
PHP根据传来的16进制颜色代码自动改变背景颜色
2014/06/13 PHP
PHP实现微信申请退款功能
2018/10/01 PHP
php菜单/评论数据递归分级算法的实现方法
2019/08/01 PHP
javascript中的document.open()方法使用介绍
2013/10/09 Javascript
使用jquery选择器如何获取父级元素、同级元素、子元素
2014/05/14 Javascript
JS合并数组的几种方法及优劣比较
2014/09/19 Javascript
JS截取字符串实例详解
2015/11/24 Javascript
12个非常实用的JavaScript小技巧【推荐】
2016/05/18 Javascript
jQuery soColorPacker 网页拾色器
2016/06/22 Javascript
Angularjs 实现分页功能及示例代码
2016/09/14 Javascript
bootstrap实现动态进度条效果
2017/03/08 Javascript
js 取消页面可以选中文字的功能方法
2018/01/02 Javascript
使用微信SDK自定义分享的方法
2019/07/03 Javascript
微信小程序 数据缓存实现方法详解
2019/08/26 Javascript
python双向链表实现实例代码
2013/11/21 Python
Python和Ruby中each循环引用变量问题(一个隐秘BUG?)
2014/06/04 Python
Windows中使用wxPython和py2exe开发Python的GUI程序的实例教程
2016/07/11 Python
python里使用正则表达式的组嵌套实例详解
2017/10/24 Python
Flask框架信号用法实例分析
2018/07/24 Python
Python遍历文件夹 处理json文件的方法
2019/01/22 Python
详解python的四种内置数据结构
2019/03/19 Python
python的slice notation的特殊用法详解
2019/12/27 Python
学习python需要有编程基础吗
2020/06/02 Python
推荐10个CSS3 制作的创意下拉菜单效果
2014/02/11 HTML / CSS
HTML5在线预览PDF的示例代码
2017/09/14 HTML / CSS
福克斯租车:Fox Rent A Car
2017/04/13 全球购物
应届大学毕业生找工作的求职信范文
2013/11/29 职场文书
高三毕业典礼演讲稿
2014/05/13 职场文书
化工专业求职信
2014/07/01 职场文书
音乐教师个人工作总结
2015/02/06 职场文书
2015年社区流动人口工作总结
2015/05/12 职场文书
Python数据可视化之基于pyecharts实现的地理图表的绘制
2021/06/10 Python
python之json文件转xml文件案例讲解
2021/08/07 Python
Python3使用Qt5来实现简易的五子棋小游戏
2022/05/02 Python