关于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 处理表单元素的代码
Feb 15 Javascript
浅谈JavaScript中setInterval和setTimeout的使用问题
Aug 01 Javascript
浅谈js中对象的使用
Aug 11 Javascript
使用开源工具制作网页验证码的方法
Oct 17 Javascript
EsLint入门学习教程
Feb 17 Javascript
VUE实现日历组件功能
Mar 13 Javascript
ES6新特性之Symbol类型用法分析
Mar 31 Javascript
微信小程序开发之从相册获取图片 使用相机拍照 本地图片上传
Apr 18 Javascript
Vue+element-ui 实现表格的分页功能示例
Aug 18 Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 jQuery
uin-app+mockjs实现本地数据模拟
Aug 26 Javascript
vue 在服务器端直接修改请求的接口地址
Dec 19 Vue.js
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 Socket 编程
2010/04/09 PHP
PHP迅雷、快车、旋风下载专用链转换代码
2010/06/15 PHP
2007/12/23更新创意无限,简单实用(javascript log)
2007/12/24 Javascript
jquery 仿QQ校友的DIV模拟窗口效果源码
2010/03/24 Javascript
uploadify 3.0 详细使用说明
2012/06/18 Javascript
js制作的鼠标悬浮时产生的下拉框效果
2012/10/27 Javascript
javascript数组输出的两种方式
2015/01/13 Javascript
详细分析JavaScript函数定义
2015/07/16 Javascript
javascript中apply、call和bind的使用区别
2016/04/05 Javascript
Angular 4依赖注入学习教程之ClassProvider的使用(三)
2017/06/04 Javascript
详解react-webpack2-热模块替换[HMR]
2017/08/03 Javascript
vue.js 获取select中的value实例
2018/03/01 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
2018/03/03 Javascript
编写React组件项目实践分析
2018/03/04 Javascript
vscode中vue-cli项目es-lint的配置方法
2018/07/30 Javascript
在vue中更换字体,本地存储字体非引用在线字体库的方法
2018/09/28 Javascript
npm 语义版本控制详解
2019/09/10 Javascript
Nest.js 授权验证的方法示例
2021/02/22 Javascript
python解析html开发库pyquery使用方法
2014/02/07 Python
python文件读写操作与linux shell变量命令交互执行的方法
2015/01/14 Python
Python中的choice()方法使用详解
2015/05/15 Python
Python基于有道实现英汉字典功能
2015/07/25 Python
Python中对象的引用与复制代码示例
2017/12/04 Python
python爬虫 execjs安装配置及使用
2019/07/30 Python
python绘制封闭多边形教程
2020/02/18 Python
在echarts中图例legend和坐标系grid实现左右布局实例
2020/05/16 Python
python从ftp获取文件并下载到本地
2020/12/05 Python
日本最大的眼镜购物网站:Oh My Glasses
2016/11/13 全球购物
中秋节活动总结
2014/08/29 职场文书
教师党员个人剖析材料
2014/09/29 职场文书
单位租房协议书样本
2014/10/30 职场文书
2014年远程教育工作总结
2014/12/09 职场文书
三年级上册科学教学计划
2015/01/21 职场文书
勤俭节约倡议书范文
2015/04/29 职场文书
学生会干部任命书
2015/09/21 职场文书
Spring boot admin 服务监控利器详解
2022/08/05 Java/Android