我有一个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;
}
}
}
1条答案
按热度按时间y53ybaqx1#
Ionic有他们的内部插件,工作得很好:@capacitor/motion为什么不用这个呢?