iOS Safari/WebKit对DeviceOrientationEvent的实现

背景知识：

Apple官方只发现一个文档：

https://developer.apple.com/library/safari/#documentation/SafariDOMAdditions/Reference/DeviceOrientationEventClassRef/DeviceOrientationEvent/DeviceOrientationEvent.html

连个例子都没有，还是自己实践吧。https://code.csdn.net/hursing/pagetest/blob/master/deviceorientationevent.html

[html] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. <html>  
  2.     <head>  
  3.        <title>DeviceOrientationEvent</title>  
  4.        <meta charset="UTF-8" />  
  5.     </head>  
  6.     <body>  
  7.         <p>左右：<span id="alpha">0</span></p>  
  8.         <p>前后：<span id="beta">0</span></p>  
  9.         <p>扭转：<span id="gamma">0</span></p>  
  10.         <p>指北针指向：<span id="heading">0</span>度</p>  
  11.         <p>指北针精度：<span id="accuracy">0</span>度</p>  
  12.         <script type="text/javascript">  
  13.         function orientationHandler(event) {  
  14.             document.getElementById("alpha").innerHTML = event.alpha;  
  15.             document.getElementById("beta").innerHTML = event.beta;  
  16.             document.getElementById("gamma").innerHTML = event.gamma;  
  17.             document.getElementById("heading").innerHTML = event.webkitCompassHeading;  
  18.             document.getElementById("accuracy").innerHTML = event.webkitCompassAccuracy;  
  19.         }  
  20.           
  21.         if (window.DeviceOrientationEvent) {  
  22.           window.addEventListener("deviceorientation", orientationHandler, false);  
  23.         } else {  
  24.           document.body.innerHTML = "What user agent u r using???";  
  25.         }  
  26.         </script>  
  27.     </body>  
  28. </html>  

用MobileSafari或UIWebView打开以上网页，可以看到5个数值的实时变化。

（点击看大图）

在handler的event参数中可以获得5个属性，其中两个：

webkitCompassHeading：与正北方向的角度差值。正北为0度，正东为90度，正南为180度，正西为270度。因为0度是正北，所以叫指北针，不是指南针。

webkitCompassAccuracy：指北针的精确度，表示偏差为正负多少度。一般是10。

下面对另外三个属性的介绍引用一个转自http://www.tfan.org/wp-content/slides/deviceaccess.html的slides：

[plain] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. deviceorientation 事件对象  
  2. 事件对象包含着每个轴相对于设备静止状态下发生变化的信息。  
  3.   
  4. 设备坐标系的概念：x 轴方向是从左往右，y 轴方向是从下往上，z 轴方向是从后往前。当设备静止放在水平桌面时，这三个值都是 0。  
  5.   
  6. 其中三个主要的属性：  
  7.   
  8. alpha: 在围绕 z 轴旋转时（即左右旋转时），y 轴的度数差。  
  9. beta: 在围绕 x 轴旋转时（即前后旋转时），z 轴的度数差。  
  10. gamma: 在围绕 y 轴旋转时（即扭转设备时），z 轴的度数差。  
[plain] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. 围绕 z 轴旋转会引起 alpha 旋转角度发生变化。  
  2.   
  3. 当设备顶部指向地球正北方向时，alpha 角是 0 度，设备向左边旋转时增大，介于 0 - 360 度之间。  
[plain] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. 围绕 x 轴旋转，也就是前后翻转（朝着用户或者远离用户)时，会引起 beta 旋转角度变化。  
  2.   
  3. 设备水平放置时，beta 角度是 0 度；向上翻逐步增加到 180 度；向下翻减少到 -180 度。  

注：我试了一下ipad safari，beta取值是-90到90，但用Android chrome是-180到180。苹果的文档也表示beta是-90到90，参考https://developer.apple.com/library/safari/documentation/SafariDOMAdditions/Reference/DeviceOrientationEventClassRef/DeviceOrientationEvent/DeviceOrientationEvent.html#//apple_ref/javascript/instp/DeviceOrientationEvent/beta，和我引用的文档说的不同。估计这是苹果自己的实现，觉得这样用户体验好，因为翻转后苹果自动旋转屏幕，故不存在倒转的操作。不能用beta值来判断屏幕是绝对地向天空还是向地面，因为那是基于初始位置的差值，即只要一刷新就归0。

[plain] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. 围绕 y 轴旋转，会引起 gamma 角度值的变化。  
  2.   
  3. 水平放置角度是 0，向右拧增加到 90 度；向左拧减少到 -90 度。  



在《Mac Safari VS Mobile Safari开启的宏》中已确认，DeviceOrientationEvent是iOS Safari特有的feature。

iOS Safari开源码的Document.h中，与DeviceOrientationEvent有关的是比Mac开源码多了这10行：

[cpp] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. #if ENABLE(DEVICE_ORIENTATION)  
  2.     DeviceMotionController* deviceMotionController() const;  
  3.     DeviceOrientationController* deviceOrientationController() const;  
  4. #endif  
[cpp] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. #if ENABLE(DEVICE_ORIENTATION)  
  2.     OwnPtr<DeviceMotionClient> m_deviceMotionClient;  
  3.     OwnPtr<DeviceMotionController> m_deviceMotionController;  
  4.     OwnPtr<DeviceOrientationClient> m_deviceOrientationClient;  
  5.     OwnPtr<DeviceOrientationController> m_deviceOrientationController;  
  6. #endif  

其中DeviceMotionXXX是重力感应相关的，既有联系又有区别，请查看《iOS Safari/WebKit对DeviceMotionEvent的实现》。

还有一个类叫DeviceOrientationClientMock，Mock是仿制品的意思。这个类只用在自动化测试，模拟设备的转动。

下图是相关类之间的关系概貌：

其中CMMotionManager是系统SDK，功能和使用方法请参见：

http://developer.apple.com/library/ios/#documentation/CoreMotion/Reference/CMMotionManager_Class/Reference/Reference.html

DeviceOrientationClient是个抽象类，在iOS由子类DeviceOrientationClientIOS（这是6.0的名字，在5.0叫做DeviceOrientationClientIPhone）来实现，直接与MotionManager交互。

与CMMotionManager的名字类似的CoreMotionManager是个C++类，在关系链中主要充当编程语言adapter的角色，即对外是C++接口，内部实现会使用Objective-C。

xcode文档里没看到必须在主线程操作CMMotionManager的字眼，但CoreMotionManager都是在主线程操作（包括创建、销毁、调用函数）CMMotionmanager的，收到回调后，通过GCD或performSelector在MainThread和WebThread间传递消息。

当执行JavaScript遇到addEventListener时，浏览器堆栈为：

[cpp] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. Thread 5 WebThread, Queue : (null)  
  2. #0  0x389740f8 in -[CoreMotionManager checkClientStatus] ()  
  3. #1  0x38973fa0 in -[CoreMotionManager addOrientationClient:] ()  
  4. #2  0x389a9b04 in WebCore::DeviceOrientationClientIOS::startUpdating() ()  
  5. #3  0x389aa000 in WebCore::DeviceOrientationController::addListener(WebCore::DOMWindow*) ()  
  6. #4  0x3873df36 in WebCore::DOMWindow::addEventListener(WTF::AtomicString const&, WTF::PassRefPtr<WebCore::EventListener>, bool) ()  
  7. #5  0x3873dc26 in WebCore::JSDOMWindow::addEventListener(JSC::ExecState*) ()  
  8. #6  0x3873da78 in WebCore::jsDOMWindowPrototypeFunctionAddEventListener(JSC::ExecState*) ()  

第0层函数如果检测到自身不在主线程执行，会使用performSelectorOnMainThread本Selector到主线程再继续，主要操作是创建一个repeat的NSTimer不断查询CMMotionManager的相关属性，然后通过

[cpp] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. void orientationChanged(double, double, double, double, double);  

函数，把文章开头提到的5个参数值封装成类WebCore::DeviceOrientation，

[cpp] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. class DeviceOrientation : public RefCounted<DeviceOrientation> {  
  2. public:  
  3.     static PassRefPtr<DeviceOrientation> create();  
  4.     static PassRefPtr<DeviceOrientation> create(bool canProvideAlpha, double alpha, bool canProvideBeta, double beta, bool canProvideGamma, double gamma, bool canProvideCompassHeading, double compassHeading, bool canProvideCompassAccuracy, double compassAccuracy);  
  5.   
  6.     double alpha() const;  
  7.     double beta() const;  
  8.     double gamma() const;  
  9.     bool absolute() const;  
  10.     bool canProvideAlpha() const;  
  11.     bool canProvideBeta() const;  
  12.     bool canProvideGamma() const;  
  13.     bool canProvideAbsolute() const;  
  14.   
  15.     double compassHeading() const;  
  16.     double compassAccuracy() const;  
  17.     bool canProvideCompassHeading() const;  
  18.     bool canProvideCompassAccuracy() const;  
  19.   
  20. private:  
  21.     DeviceOrientation();  
  22.     DeviceOrientation(bool canProvideAlpha, double alpha, bool canProvideBeta, double beta, bool canProvideGamma, double gamma, bool canProvideCompassHeading, double compassHeading, bool canProvideCompassAccuracy, double compassAccuracy);  
  23.   
  24.     bool m_canProvideAlpha;  
  25.     bool m_canProvideBeta;  
  26.     bool m_canProvideGamma;  
  27.     double m_alpha;  
  28.     double m_beta;  
  29.     double m_gamma;  
  30.   
  31.     bool m_canProvideCompassHeading;  
  32.     bool m_canProvideCompassAccuracy;  
  33.     double m_compassHeading;  
  34.     double m_compassAccuracy;  
  35. };  

最后通过WebCore::EventTarget的标准流程传递到JavaScript的函数。

[cpp] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. Thread 5 WebThread, Queue : (null)  
  2. #0  0x387bec96 in WebCore::EventTarget::dispatchEvent(WTF::PassRefPtr<WebCore::Event>) ()  
  3. #1  0x389aa1d4 in WebCore::DeviceOrientationController::didChangeDeviceOrientation(WebCore::DeviceOrientation*) ()  
  4. #2  0x389a9b4c in WebCore::DeviceOrientationClientIOS::orientationChanged(double, double, double, double, double) ()  
  5. #3  0x38974b0a in __48-[CoreMotionManager sendMotionData:withHeading:]_block_invoke_0 ()  


另外两个值得留意的地方是：

当Document需要suspend或resume时，会同时挂起或恢复 orientation或motion的监听。

[cpp] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. void Document::suspendActiveDOMObjects(ActiveDOMObject::ReasonForSuspension why)  
  2. {  
  3.     ScriptExecutionContext::suspendActiveDOMObjects(why);  
  4.   
  5. #if ENABLE(DEVICE_ORIENTATION)  
  6.     if (m_deviceMotionController)  
  7.         m_deviceMotionController->suspendUpdates();  
  8.     if (m_deviceOrientationController)  
  9.         m_deviceOrientationController->suspendUpdates();  
  10. #endif  
  11.   
  12.     ...  
  13. }  
  14.   
  15. void Document::resumeActiveDOMObjects()  
  16. {  
  17.     ScriptExecutionContext::resumeActiveDOMObjects();  
  18.       
  19. #if ENABLE(DEVICE_ORIENTATION)  
  20.     if (m_deviceMotionController)  
  21.         m_deviceMotionController->resumeUpdates();  
  22.     if (m_deviceOrientationController)  
  23.         m_deviceOrientationController->resumeUpdates();  
  24. #endif  
  25.   
  26.     ...  
  27. }  

当网页正在监听orientation或motion时，这个Page不能Cache

[cpp] view plain copy
 
 在CODE上查看代码片派生到我的代码片
  1. bool PageCache::canCache(Page* page)  
  2. {  
  3.     ...  
  4.       
  5.     return canCachePageContainingThisFrame(page->mainFrame())  
  6.         && page->backForward()->isActive()  
  7.         && page->settings()->usesPageCache()  
  8. #if ENABLE(DEVICE_ORIENTATION)  
  9.         && !(page->mainFrame()->document()->deviceMotionController() && page->mainFrame()->document()->deviceMotionController()->isActive())  
  10.         && !(page->mainFrame()->document()->deviceOrientationController() && page->mainFrame()->document()->deviceOrientationController()->isActive())  
  11. #endif  
  12.         && loadType != FrameLoadTypeReload  
  13.         && loadType != FrameLoadTypeReloadFromOrigin  
  14.         && loadType != FrameLoadTypeSame;  
  15. }  

《iOS Safari/WebKit对DeviceMotionEvent的实现》还会对本文有补充，请点击继续查看。

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/guandekuan/p/6382566.html