标签: deviceorientationevent

在 javascript 中使用 DeviceOrientation 事件时解决万向节锁定的最简单方法 - 如何制作完美的水平仪/气泡水平仪应用程序

从...开始...

\n
window.addEventListener("deviceorientation", handleDeviceTilt);\nfunction handleDeviceTilt(event){\n// Here we can use event.beta, event.gamma\n// Note that we don\'t need event.alpha because that\'s just the compass as we\n// don\'t need to know which way is north to build a simple bubble-level app\n// or similar apps.\n}\n
Run Code Online (Sandbox Code Playgroud)\n

...在这种情况下,只要手机或平板电脑与地面平行(就像放在桌子上),值就很好并且可用betagamma但是,当手机或平板电脑与墙壁平行时,我们无法获得实际值。gamma当设备直立/垂直(即纵向模式)(这是持有移动设备的最常见方式)时,会变得尤其疯狂。

\n
请通过查看此处的立方体来观察 Android 设备的问题
\n

在此输入图像描述

\n

我们需要计算真实的角度,以便我们可以在应用程序中准确地使用倾斜信息。问题是,

\n
\n

为了解锁所谓的 \ngimbal 锁,计算真实角度(例如realBetaand realGamma)(可能通过使用Math.cos()and\n或其他方法)的最简单方法是什么?Math.sin()这可以在没有矩阵和/或四元数的情况下完成吗?我的猜测是“是”,因为伽玛的“扭曲度”在某种程度上与贝塔成正比。如果四元数是唯一的解决方案那么我们到底如何获得realGammaactualGamma使用fixedCorrectGamma它们?

\n
\n

注1:PlayStore上有一个水平仪应用程序,可以完美地显示设备的真实倾斜角度。所以有证据表明这是可行的。然而,截至 2021 …

javascript device-orientation deviceorientationevent

28
推荐指数
1
解决办法
1368
查看次数