如何将 deviceorientation 映射到 MozOrientation 值

Posted 2023-02-23

【中文标题】如何将 deviceorientation 映射到 MozOrientation 值

【英文标题】：How to map deviceorientation to MozOrientation values

【发布时间】：2011-01-29 23:30:59

【问题描述】：

我之前创建了一个与 Firefox 的 MozOrientation 配合使用的迷宫游戏。我现在正在考虑让它与 WebKit 一起使用......

但是 Webkit 使用 w3c 的 DeviceOrientation。这些值似乎完全不同，但必须有人有某种算法才能将它从一个到另一个？还是我错过了一些简单的东西？

迷宫游戏有github链接 http://playground.marmaladeontoast.co.uk/labyrinth/

Moz 方向 https://developer.mozilla.org/en/Detecting_device_orientation

设备方向 http://dev.w3.org/geo/api/spec-source-orientation.html

我得到的一些样本值：

铬

alpha = null                                    
beta = -178 
gamma = 4.57    

火狐

x = 0.035999998450279236
y = -0.02800000086426735
z = 1

任何帮助将不胜感激:)

【参考方案1】：

我一直在玩这个。下面的源“映射”了 x/gamma 和 y/beta 的可理解度数范围。

MozOrientation.z 值与 deviceorientation.alpha 值完全不同。第一个返回垂直方向，后者返回一种罗盘值。因此，这些值不可互换/转换。

function displayOrientation(orientData)

    var x = Math.round(orientData.x);
    var y = Math.round(orientData.y);
    var z = orientData.z;

    document.getElementById('x').value = x;
    document.getElementById('y').value = y;
    document.getElementById('z').value = z;


window.addEventListener("MozOrientation", function(orientData)

    var obj = ;
    obj.x = orientData.x * 90;
    obj.y = orientData.y * 90;
    obj.z = orientData.z;

    displayOrientation(obj);

, true);

window.addEventListener("deviceorientation", function(orientData) 

    var obj = ;
    obj.x = orientData.gamma;
    obj.y = orientData.beta;
    obj.z = orientData.alpha;

    displayOrientation(obj);

, true);

当前桌面 Safari (5.0.3) 似乎根本不支持此事件。桌面版 Chrome 9 中的 beta 值正好比移动版 Safari 中的值小 180。 Firefox 和移动版 Safari 中的 x & y 值应该大致相同。

【讨论】：

太好了，谢谢 julesj :) 这一直困扰着我一段时间......我以为我只是错过了一些显而易见的数学。我的白板上满是图表和方程式……

任何想法如何规范化DeviceMotionEvent？

【参考方案2】：

我希望这些代码能澄清一切。虽然这段代码返回的值不能直接与 beta 和 gamma 的值匹配：

Mozilla 返回角度的正弦值，所以要得到角度...

X: Math.asin(eventInfo.x)*180/Math.PI
Y: Math.asin(eventInfo.y)*180/Math.PI
Z: Math.asin(eventInfo.z)*180/Math.PI

Webkit 返回每个轴的加速度。然后，获取角度......（sing改变只是为了统一返回值）

X: Math.asin(clean(eventInfo.accelerationIncludingGravity.x/GRAVITY))*180/Math.PI
Y: Math.asin(clean(-eventInfo.accelerationIncludingGravity.y/GRAVITY))*180/Math.PI
Z: Math.asin(clean(-eventInfo.accelerationIncludingGravity.z/GRAVITY))*180/Math.PI

干净利落：（因为有时候数据返回，即使不加速手机，也是9.8以上）

function clean(data)

    if(data<-1.0)
    
        return -1.0; 
    
    else
    if(data>1.0)
    
       return 1.0;
    else
    
        return data;
    

每个斧头的含义是： X-> 手机向右或向左倾斜。如果您将手机向右（顺时针）倾斜，则为 +，保持音量按钮向上。 Y-> 判断手机是向上 - 如果锁定/开关按钮是向上 -（角度 +）还是向下（角度 -）。它告诉移动相对于地板的倾斜度。 （Y 向量与平面 X-Z 的夹角） Z-> 判断手机屏幕是朝上（角度+）还是倒置（角度-）。就是Z向量在Y-X平面上的夹角

希望这对你有价值！

无论如何，我正在研究一些 GWT 类以使使用它更容易:) 这并不难，但我没有太多时间。 我告诉你

【参考方案3】：

你应该能够根据另一个计算一个。 我看到的问题是 Mozilla 没有说明它返回的数据是什么意思。 我现在正在使用三种移动设备：ipad、iphone4 和诺基亚 n900。 当我使用 ios 和 safari 并获得加速包括重力时，我得到的值从 -9.8 到 9.8。这些是影响每个斧头的重力值。然后使用三角函数，我可以计算每个轴的角度。 如果我在 iphone4 中获得方向，我可以直接获得每个轴的角度。

问题来自诺基亚 n900，其浏览器基于 Mozilla。该浏览器仅返回从 -1 到 1 的数据。文档说这是每个轴的倾斜度。在哪些单位？余弦？还是只是角度/180？ 我猜这是余弦，当我把它水平放置时，它返回 0，当我把它垂直放置时，它得到 1。颠倒过来，返回 -1。此外，如果你将它倾斜大约 60 度，它会返回 1/2。

据我所知，当使用带有 Firefox 的 Macbook 笔记本电脑时，数据 x、y 和 z 是余弦。

【讨论】：

如果你想出任何实际的函数来从一组值转换到另一组值，如果你告诉我，我会很高兴的！到目前为止，您似乎是最接近解决方案的人！我已经尝试了几个月，我只是一直迷失在其中......

【参考方案4】：

Mozilla Firefox 现在完全支持 W3C DeviceOrientation Events API。您不应再在 Web 应用程序中使用 MozOrientation。