在Ionic/Cordova中旋转器械时获取指南针航向

u0njafvf  于 2023-03-27  发布在  Ionic
关注(0)|答案(1)|浏览(180)

我有一个Ionic/Cordova应用程序,在那里我需要得到设备指向的方向。
因此,我使用Cordova Plugin Device Orientation来获取指南针数据。但是,当用户旋转设备(纵向/横向)时,我需要考虑。我使用Cordova Plugin Screen Orientation来获取屏幕方向。

  • 当设备处于人像模式时,我使用指南针上的数据
  • 当旋转左/右(横向)我添加90/270度
  • 当设备倒置(纵向)时,我添加180度
  • 如果value〉360,则删除360

但正如屏幕方向插件中所记录的,当设备上下颠倒时,甚至当它从横向通过底部旋转到另一个横向时,这在Android上不起作用:“当电话旋转180度时,screen.orientation属性将不会更新。”
所以我的问题是:当设备向上或围绕底部旋转时,我仍然会得到“LANDSCAPE_PRIMARY”或“LANDSCAPE_SECONDARY”,因为不支持这一点。所以我无法计算正确的航向。
任何想法如何做到这一点在离子/ cordova ?我找不到任何其他插件,我想避免创建自己的。
补充信息:

  • 在三星平板电脑上,它可以正常工作
  • 在三星手机上它不允许,看起来像“颠倒应用程序”是不允许的

编辑:我创建了一个简单的页面来显示行为。它直接显示来自指南针的航向。当设备旋转(纵向/横向)时,此值会发生变化,而我试图计算的值(当设备旋转时,应保持不变)。

import { Component, OnDestroy, OnInit } from '@angular/core';
import { distinctUntilChanged } from 'rxjs/operators';
import { DeviceOrientationCompassHeading } from '@awesome-cordova-plugins/device-orientation';
import { DeviceOrientation } from '@awesome-cordova-plugins/device-orientation/ngx';
import { ScreenOrientation } from '@awesome-cordova-plugins/screen-orientation/ngx';
import { Subscription } from 'rxjs';

@Component({
    selector: 'app-orientation',
    template: 'Heading: {{compassHeading}}/{{calculatedHeading}}'
})
export class OrientationPage implements OnInit, OnDestroy {

    compassHeading: number;
    calculatedHeading: number;

    private sub: Subscription;

    constructor(private deviceOrientation: DeviceOrientation,
                private screenOrientation: ScreenOrientation) {
    }

    ngOnInit(): void {
        this.sub = this.deviceOrientation.watchHeading().pipe(distinctUntilChanged()).subscribe({
                next: (currentHeading: DeviceOrientationCompassHeading) =>
                {
                    this.compassHeading = currentHeading?.trueHeading;
                    this.calculatedHeading = this.calcHeading(currentHeading, this.screenOrientation);
                },
                error: (error) => console.error('Cannot subscribe to device orientation: ', error)
            }
        );
    }

    ngOnDestroy() {
        this.sub?.unsubscribe();
    }

    calcHeading(currentHeading: DeviceOrientationCompassHeading, screenOrientation: ScreenOrientation): number {
        if (currentHeading?.trueHeading) {
            const rotationDelta = this.getScreenRotationDelta(screenOrientation);
            const heading = currentHeading.trueHeading + rotationDelta;

            // limit to 360
            return heading % 360;
        }

        return undefined;
    }

    getScreenRotationDelta(screenOrientation: ScreenOrientation): number {
        switch (screenOrientation.type) {
            case screenOrientation.ORIENTATIONS.LANDSCAPE_PRIMARY:
                return 90;
            case screenOrientation.ORIENTATIONS.PORTRAIT_SECONDARY:
                // I never get this value on android phone :-(
                return 180;
            case screenOrientation.ORIENTATIONS.LANDSCAPE_SECONDARY:
                return 270;
            default:
                return 0;
        }
    }
}
y53ybaqx

y53ybaqx1#

Ionic有他们的内部插件,工作得很好:@capacitor/motion为什么不用这个呢?

相关问题