Question

我使用ricoh-theta-viewer插件在360度视图中查看panaroma图像。我可以使用这个库轻松地360度观察panaroma图像。当我触摸图像时，它将在360度视图中沿触摸方向滑动。但是，我想在设备方向改变时倾斜图像意味着用户正在向左，向右，向上或向下旋转或定向设备。我试着使用下面的代码：

import {Component} from '@angular/core';
import {NavController} from 'ionic-angular';
import {RicohView} from 'ricoh-theta-viewer';

@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {

  ricohView: any;
  previousAlpha = 0;
  previousBeta = 0;
  previousGamma = 0;


  constructor(public navCtrl: NavController) {
    window.addEventListener("deviceorientation", (event) => this.onDeviceOrientation(event), true)
  }

  initialize = () => {
    this.ricohView = new RicohView({
      id: "ricoh-360-viewer",
      file: 'assets/imgs/sample.jpg', rendererType: 0,
      height: window.innerHeight, width: window.innerWidth, zoom: 130
    });
  };

  onDeviceOrientation(ev) {

    if (this.canSetCameraDir(ev.alpha, ev.beta, ev.gamma)) {
      this.previousAlpha = ev.alpha;
      this.previousBeta = ev.beta;
      this.previousGamma = ev.gamma;
      this.ricohView.setCameraDir(ev.alpha, ev.beta, ev.gamma)
    }
  }

  ionViewDidLoad() {
    this.initialize();
  }

  canSetCameraDir(alpha, beta, gamma) {
    let canSet = false;
    let calculatedAlpha = Math.abs(this.previousAlpha - alpha);
    let calculatedBeta = Math.abs(this.previousBeta - beta);
    let calculatedGamma = Math.abs(this.previousGamma - gamma);

    if (calculatedAlpha > 40 || calculatedBeta > 40 || calculatedGamma > 40) {
      canSet = true;
    }

    return canSet;
  }

}

但问题是，图像是使用 deviceorientation 事件监听器的alpha，beta和gamma旋转的，这是错误的。可能是我需要操纵alpha，beta和gamma然后适合 this.ricohView.setCameraDir 功能，以便我可以准确旋转图像。

有人能指出我的错误吗？

Answer 1

在构造函数中设置'orientationChange' = true。

这应该在包内启用设备方向事件。该功能可以实现手势移动。

设备在Ionic 3中倾斜时旋转360度图像？

1 个答案: