javascript - Android 设备方向 compass

Question

我尝试使用 deviceorientation 事件实现 compass 。我想使用旋转来旋转面向观察方向的箭头。我只是在 deviceorientation 发生变化时旋转图像。

在 iOS 上，通过执行以下操作，这就像魅力一样:

if (typeof DeviceOrientationEvent.requestPermission === "function") {
          //@ts-ignore
          DeviceOrientationEvent.requestPermission()
            .then(permissionState => {
              if (permissionState === "granted") {
                this.compassActive = true;
                window.addEventListener(
                  "deviceorientation",
                  eventData =>
                    this.zone.run(() => {
                      if(!this.compassActive){
                        return false;
                      }
                      //@ts-ignore
                      this.rotatePlayerIcon(eventData.webkitCompassHeading);

                    }),
                  false
                );
              }
            })
            .catch(console.error);

因为 DeviceOrientationEvent.webkitCompassHeading 为我提供了基于顺时针世界的设备旋转演示。

我在 Android 上尝试了相同的操作，但找不到基于世界的解决方案。 Android 上不存在 webkitCompassHeading，因此我尝试仅使用 eventData.alpha。但这给出的 0 是基于事件触发时的旋转，而不是基于世界北方。

我发现的所有指南似乎都已经过时了。

如何像在 iOS 上那样在 Android 上获得顺时针 compass ？

Answer 1

根据绝对 alpha、beta 和 gamma 计算 compass 航向的公式如下:

compass = -(alpha + beta * gamma / 90);
compass -= Math.floor(compass / 360) * 360; // Wrap to range [0,360]

上述公式对于 0 beta 和 gamma(例如，手机放在 table 上)来说表现良好，并且也适用于 beta=90(例如，直立放置)。

<小时/>

现在已经是 2023 年了，iOS 仍然不支持绝对的 DeviceOrientationEvent，Android 仍然不直接支持 compass 。以下 TypeScript 代码展示了如何获取两种类型设备的 compass 值。您可以通过删除冒号后面的类型说明符将其转换为 JavaScript。

function startCompassListener(callback: (compass: number) => void) {
    if (!window["DeviceOrientationEvent"]) {
        console.warn("DeviceOrientation API not available");
        return;
    }
    let absoluteListener = (e: DeviceOrientationEvent) => {
        if (!e.absolute || e.alpha == null || e.beta == null || e.gamma == null)
            return;
        let compass = -(e.alpha + e.beta * e.gamma / 90);
        compass -= Math.floor(compass / 360) * 360; // Wrap into range [0,360].
        window.removeEventListener("deviceorientation", webkitListener);
        callback(compass);
    };
    let webkitListener = (e) => {
        let compass = e.webkitCompassHeading;
        if (compass!=null && !isNaN(compass)) {
            callback(compass);
            window.removeEventListener("deviceorientationabsolute", absoluteListener);
        }
    }

    function addListeners() {
        // Add both listeners, and if either succeeds then remove the other one.
        window.addEventListener("deviceorientationabsolute", absoluteListener);
        window.addEventListener("deviceorientation", webkitListener);
    }

    if (typeof (DeviceOrientationEvent["requestPermission"]) === "function") {
        DeviceOrientationEvent["requestPermission"]()
            .then(response => {
                if (response == "granted") {
                    addListeners();
                } else
                    console.warn("Permission for DeviceMotionEvent not granted");
            });
    } else
        addListeners();
}

测试时我发现我的 Android 的绝对值(alpha、beta、gamma)非常不准确(alpha 误差约 60 度)。然而，通过滚动设备，它可以自行校准，误差约为 5 度。