Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Deviceaccess

504 views

Published on

  • Be the first to comment

Deviceaccess

  1. 1. HTML5 开发Web,MobileWeb & Apps范圣刚安博中程在线
  2. 2. Geolocation定位和跟踪
  3. 3. 介绍安博中程在线Geolocation工作原理Geolocation APIExample相关资源··getCurrentPosition方法Geolocation数据Handling ErrorsPositionOptions对象watchPosition()方法和clearWatch()方法-----··3/42
  4. 4. 浏览器支持情况安博中程在线geolocation4/42
  5. 5. Geolocation 工作原理识别地理位置的主要方法:安博中程在线通过IP地址利用基站获取手机网络的接入位置通过利用卫星定位获得经纬度信息的GPS设备···5/42
  6. 6. Geolocation API可以获得用户所在地理位置的经纬度信息调用 Geolocation API 从全局 navigator对象的 geolocation属性开始:navigator.geolocation安博中程在线123456<script type=text/javascript>  // 最简单的使用方式:没有做任何的检测,错误处理,也没有选项参数  function find_my_location() {    navigator.geolocation.getCurrentPosition(show_map);  }</script>6/42
  7. 7. Geolocation API检测浏览器是否支持地理位置API方法1: 检测检测 全局对象 navigator 是否具有 geolocation 属性方法2: 使用Modernizr提供的方法 检测检测安博中程在线12345<script type=text/javascript>  function supports_geolocation() {    return !!navigator.geolocation;  }</script>123456789<script type=text/javascript>  function find_my_location() {    if (Modernizr.geolocation) {        navigator.geolocation.getCurrentPosition(show_map);    } else {        // 浏览器没有提供原生支持,使用回退方案    }  }</script>7/42
  8. 8. Geolocation APIgetCurrentPosition()使用getCurrentPosition()方法 获取当前位置信息获取当前位置信息 .安博中程在线123456789101112131415<script type=text/javascript>    function find_my_location() {        if (Modernizr.geolocation) {            navigator.geolocation.getCurrentPosition(show_map);        } else {            // 其他方案        }    }         function show_map(position) {        var latitude = position.coords.latitude;        var longitude = position.coords.longitude;        alert(Lat:  + latitude +  Lon:  + longitude);    }</script>8/42
  9. 9. Position 数据成功的回调函数的参数是一个 Position对象,包括 coords和 timestamp两个属性。属性 类型 备注coords.latitude double 纬度(度)coords.longitude double 经度(度)coords.accuracy double 精度(米)coords.altitude double或null 海拔(米)coords.altitudeAccuracy double或null 海拔精度(米)coords.heading double或null 度(顺时针,以正北为基准)coords.speed double或null 米/秒timestamp DOMTimeStamp 可以转成Date对象安博中程在线 9/42
  10. 10. Handling ErrorsgetCurrentPosition()的第二个参数(可选)——容错处理的回调函数:在获取地理位置过程中有任何错误,都会调用该回调函数,并且会传入一个PositionError对象作为参数。安博中程在线123456789101112131415<script type=text/javascript>  function find_my_location() {    if (Modernizr.geolocation) {      navigator.geolocation.getCurrentPosition(show_map, handle_error);    } else {      // 其他方案    }  }     function handle_error(err) {    if (err.code == 1) {      // 用户说不!    }  }    </script>    10/42
  11. 11. PositionError 对象属性 类型 备注code short 可枚举message DOMString 与终端用户无关其中code属性具有以下属性值:安博中程在线PERMISSION_DENIED(1): 用户不同意被获取位置信息。POSITION_UNAVAILABLE(2): 网络不可用或者无法连接到获取位置信息的卫星。TIMEOUT(3): 网络可用但是花了太长时间的计算用户的位置上。UNKNOWN_ERROR(0): 发生其他未知错误。····11/42
  12. 12. PositionOptions 对象两种定位方式和缓存的位置信息属性 类型 默认值 备注enableHighAccuracy boolean false 设成 true 可能会使得获取位置的速度变慢timeout long 没有默认值 单位:毫秒maximumAge long 0 单位:毫秒安博中程在线 12/42
  13. 13. Device Orientation设备事件
  14. 14. 设备事件设备事件可以让开发人员确定用户在怎样使用设备(智能手机,平板电脑)安博中程在线orientationChange事件MozOrientation事件deviceorientation事件devicemotion事件····http://dev.w3.org/geo/api/spec-source-orientation14/42
  15. 15. orientationchange 事件苹果公司为移动 Safari 添加了 orientationchange事件,以便开发人员能确定用户何时将设备由横向查看模式切换为纵向查看模式。移动 Safari 的window.orientation属性中可能包含3个值:安博中程在线0表示肖像模式(Portrait)90表示向左旋转的横向模式(“主屏幕”按钮在右侧)-90表示向右旋转的横向模式(“主屏幕”按钮在左侧)···15/42
  16. 16. 处理 orientationchange 事件这时的 event对象不包含任何有价值信息,唯一相关的信息可以通过window.orientation访问到。安博中程在线12345678910111213function updateOrientation() {    switch(window.orientation) {    case 0:    // ...    case ­90:                            // ....    case 90:    // ...    case 180:    // ...    }};    window.addEventListener(orientationchange, updateOrientation, false);16/42
  17. 17. Demo: orientationchange根据 orientationchange 事件动态更改图像大小安博中程在线 17/42
  18. 18. landscape 模式下把图片宽高调小安博中程在线iPad 下:http://192.168.1.113:8000/demo/device-access/orientation/orientationchange.html18/42
  19. 19. Demo:orientation-mediaquery实现这个效果也可以使用媒体查询方式安博中程在线rel="stylesheet" media="all and (orientation:portrait)" href="css/portrait.css">rel="stylesheet" media="all and (orientation:landscape)" href="css/landscape.css">http://192.168.1.113:8000/demo/device-access/orientation/orientationchange-mediaquery.html19/42
  20. 20. deviceorientation 事件加速度计检测到设备的方向发生变化时,会在 window对象上触发deviceorientation事件。用于告诉我们设备在空间上朝向哪儿。设备坐标系的概念:x轴方向是从左往右,y轴方向是从下往上,z轴方向是从后往前。当设备静止放在水平桌面时,这三个值都是 0。安博中程在线 20/42
  21. 21. deviceorientation 事件对象事件对象包含着每个轴相对于设备静止状态下发生变化的信息。设备坐标系的概念:x轴方向是从左往右,y轴方向是从下往上,z轴方向是从后往前。当设备静止放在水平桌面时,这三个值都是 0。其中三个主要的属性:安博中程在线alpha: 在围绕 z轴旋转时(即左右旋转时),y轴的度数差。beta: 在围绕 x轴旋转时(即前后旋转时),z轴的度数差。gamma: 在围绕 y轴旋转时(即扭转设备时),z轴的度数差。···21/42
  22. 22. alpha围绕 z 轴旋转会引起 alpha 旋转角度发生变化。当设备顶部指向地球正北方向时,alpha 角是 0 度,设备向左边旋转时增大,介于 0 -360 度之间。安博中程在线 22/42
  23. 23. beta围绕 x 轴旋转,也就是前后翻转(朝着用户或者远离用户)时,会引起 beta 旋转角度变化。设备水平放置时,beta 角度是 0 度;向上翻逐步增加到 180 度;向下翻减少到 -180度。安博中程在线 23/42
  24. 24. gamma围绕 y 轴旋转,会引起 gamma 角度值的变化。水平放置角度是 0,向右拧增加到 90 度;向左拧减少到 -90 度。安博中程在线 24/42
  25. 25. Demo: deviceorientation安博中程在线Rotate Chrome模拟 orientation 事件:http://louisremi.github.com/orientation-devtool/··25/42
  26. 26. MozOrientation 事件兼容移动版 FirefoxFirefox 移动浏览器上实现的检测设备方向的事件。静止状态下,x 值为 0,y 值为0,z 值为 1。这几个值都介于1和-1之间。安博中程在线向右倾斜,x 会减少到 -1;向左倾斜,x 会增大到 1向远离用户方向倾斜,y 值会减少到 -1;向接近用户方向倾斜,y 值会增大到 1;··12345      // 针对 Android 版的 Firefoxif (!evt.gamma && !evt.beta) {  evt.gamma = ­(evt.x * (180 / Math.PI));  evt.beta = (evt.y * (180 / Math.PI));}26/42
  27. 27. deviceorientation 补充说明截止2013年1月,Mozilla 声称自 FF6+ 之后都支持 deviceorientation事件,实际并不支持;反而是号称从 3.6 开始支持,但是后面又移走的 MozOrientation事件在Android 版的 Firefox 上支持 MozOrientation事件。Chrome 和 Android 版的 WebKit,iOS4.2+ 的 Safari 均支持 deviceorientation事件。安博中程在线参见:http://caniuse.com/#feat=deviceorientation27/42
  28. 28. devicemotion 事件deviceorientation的超集,除了方向信息以外,还有加速度信息。安博中程在线acceleration: 一个包含 x,y,z 属性的对象,不考虑重力加速度的情况。accelerationIncludingGravity: 考虑 z 轴自然重力加速的情况下,告诉你每个方向上的加速度。··28/42
  29. 29. Touch Events触控事件
  30. 30. 触控和手势Notes: 有些手势不产生事件,有些手势需要在一定的条件下才会产生事件;但是我们可以通过组合各种手势进行处理。安博中程在线One-Finger EventsTwo-Finger EventsMulti-Touch Events·The panning gestureThe touch and hold gestureThe double-tap gesture····The pinch open gestureTwo-finger panning gesture···30/42
  31. 31. Multi-touch Events安博中程在线TouchEventTouchTouchList···31/42
  32. 32. TouchEvent 事件类型安博中程在线touchstart: 当手指触摸屏幕时触发(即使已经有一个手指已经放在了屏幕上)touchmove: 当手指在屏幕上滑动时连续的触发touchend: 当手指从屏幕上移开时触发touchcancel: 当系统停止跟踪触摸时触发····32/42
  33. 33. TouchEvent 的属性安博中程在线首先是在鼠标事件中常见的属性: bubbles, cancelable, detail, altKey, ctrlKey ...其次是三个用于跟踪触摸的属性:··touches: 表示当前跟踪的触摸操作的 Touch对象的数组targetTouches: 特定于事件目标的 Touch对象的数组changeTouches: 表示自上次触摸以来发生了什么改变的 Touch对象的数组---33/42
  34. 34. Touch 对象的属性安博中程在线clientX: 相对于 viewport 的 x 坐标,类型 long,单位像素clientY: 相对于 viewport 的 y 轴坐标identifier:触控点的唯一标识(比方说一根手指就是一个一个触控点)pageX: 页面中的 x 坐标pageY:页面中的 y 坐标screenX:屏幕中的 x 坐标screenY:屏幕中的 y 坐标target:触摸的 DOM 节点目标········34/42
  35. 35. Multi-touch DemoTouch Events + Canvas安博中程在线设置触控事件处理程序跟踪新的触控(touchstart)发生随着滑动(touchmove)进行 Canvas 绘制处理触控结束(touchend)事件处理触控取消(touchcancel)事件·····35/42
  36. 36. The panning gesture直到用户停止 panning 的时候,One-finger panning 才会产生一个 onscroll事件安博中程在线A touch-scrollable div: http://eightmedia.github.com/hammer.js/scroll/36/42
  37. 37. The touch and hold gesture长按不会产生事件;但是如果触控的是图片,可点击链接或是可编辑内容等往往会生成一个 information bubble。(复制,粘贴,全选,图片另存为 ...)安博中程在线Basic demo: http://eightmedia.github.com/hammer.js/demo/37/42
  38. 38. The double-tap gesturedouble tap 也不产生任何事件安博中程在线Basic demo: http://eightmedia.github.com/hammer.js/demo/38/42
  39. 39. The pinch open gesturepinch open gesture 不产生任何鼠标事件安博中程在线http://eightmedia.github.com/hammer.js/zoom/, http://eightmedia.github.com/hammer.js/zoom/index2.html39/42
  40. 40. Two finger panning gesture安博中程在线两根手指按住屏幕并移动,如果落在可滚动的元素上,产生 mousewheel事件如果元素不是可滚动的,移动网页。在 panning 过程中不产生事件当用户停止 panning 时,产生一个 onscroll事件···http://eightmedia.github.com/hammer.js/zoom/, http://eightmedia.github.com/hammer.js/zoom/index2.html40/42
  41. 41. 扩展阅读安博中程在线W3C地理位置 APIgeo.js, 地理位置的JS Framework。依照W3C地理位置 API规范封装了底层系统特定的实现。This End Up: Using Device OrientationCan I Use?Specification: Touch EventsDrag and drop for iPhone and AndroidSafari Web Content Guide: Handling EventsHammer.js: A javascript library for multi-touch gesturesMDN: Touch Events·········41/42
  42. 42. <Thank you!>微博 @范圣刚博客 www.tfan.orggithub github.com/princetoad

×