裝置方向事件

Internet Explorer 11 新增 DOM 事件的支援,可提供裝置的實際方向和移動相關資訊,如同新興的 W3C DeviceOrientation 事件規格中所定義。使用 IE11 中的裝置方向和動作事件,您可以探索遊戲的新輸入機制、應用程式的新手勢 (例如,「搖動以清除螢幕」或「傾斜以進行縮放」),甚至是增強真實感的經驗。

重要  Windows 7 上的 IE11 不支援此功能。

W3C DeviceOrientation 事件規格定義兩種不同類型的感應器資料:方向和動作。

裝置方向事件

當裝置的實體方向變更 0.01 度或更大時 (當使用者傾斜或旋轉裝置時),Internet Explorer 會在 window 觸發 DeviceOrientationEvent 物件。DeviceOrientationEvent 物件提供的資料指定與地球上固定座標框架相對的主機裝置方向。更明確地說,這個地球座標框架有三個軸:

  • 東 (X) 位於地平面,與北軸垂直,正向東方。
  • 北 (Y) 位於地平面,正向正北方 (向北極)。
  • 上 (Z) 與地平面垂直,正向上。
這些 XYZ 軸分別對應到 DeviceOrientationEventbetagammaalpha 屬性。圖表顯示與 3D X、Y 和 Z 軸相對的 deviceorientation 事件中傳回之旋轉的 alpha、beta 和 gamma 角度:alpha = 繞著 Z 軸旋轉、beta = X 軸,gamma = Y 軸。

下列程式碼示範如何使用 deviceorientation 事件引導使用者將自己的裝置指向北方。


<div id="directions"></div>
<script>
    window.addEventListener("deviceorientation", findNorth);
    function findNorth(evt) {
        var directions = document.getElementById("directions");
        if (evt.alpha < 5 || evt.alpha > 355) {
            directions.innerHTML = "North!";
        } else if (evt.alpha < 180) {
            directions.innerHTML = "Turn Left";
        } else {
            directions.innerHTML = "Turn Right";
        }
    }
</script>


裝置動作事件

移動或旋轉裝置時 (或者更正確地說是「加速」),會在視窗觸發 DeviceMotionEvent 物件,並在 xyz 軸上提供 acceleration data (即 withwithout 兩者,裝置上重力加速度的效果,以 m/s2 表示),也會在 alphabetagamma 旋轉角度中提供 rotational rate of change data (以 deg/s 表示)。旋轉使用慣用右手規則,順著軸線正向檢視時,軸線的正向旋轉是順時針。

下列範例示範如何使用 ondevicemotion 事件偵測及報告超出指定閾值的任何裝置移動。


<div id="status"></div>
<script>
    window.addEventListener("devicemotion", detectShake);
    function detectShake(evt) {
        var status = document.getElementById("status");
        var accl = evt.acceleration;
        if (accl.x > 1.5 || accl.y > 1.5 || accl.z > 1.5) {
            status.innerHTML = "EARTHQUAKE!!!";
        } else {
            status.innerHTML = "All systems go!";
        }
    }
</script>


校正指南針

當主機裝置指南針需要使用者校正時,會觸發 compassneedscalibration,以便從 DeviceOrientationEvent 提供更準確的資訊。

每當主機裝置磁力儀的狀態變更為不可靠或近似值,就會觸發此事件的 IE 實作,如 Windows.Devices.Sensors 命名空間的 MagnetometerAccuracy 列舉定義的一樣。

API 參考

DeviceOrientationEvent
DeviceMotionEvent

規格

DeviceOrientation 事件規格

 

 

顯示:
© 2014 Microsoft