0

我正在使用ricoh-theta-viewer插件在 360 度视图中查看 panaroma 图像。使用这个库，我可以轻松地获得全景图像的 360 度视图。当我触摸图像时，它将在 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;
  }

}

但是，问题在于，图像正在使用设备方向事件侦听器的 alpha、beta 和 gamma 进行旋转，这是错误的。可能我需要操纵 alpha、beta 和 gamma，然后适合this.ricohView.setCameraDir函数，以便我可以准确旋转图像。

谁能指出我的错误？

4

1 回答 1

1

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

这应该启用包内的设备方向事件。该功能支持手势移动。

于 2018-05-11T06:09:59.347 回答