Повернуть изображение на 360 градусов, когда устройство наклонено в Ionic 3? - PullRequest
Новая
       64

Повернуть изображение на 360 градусов, когда устройство наклонено в Ionic 3?

0 голосов
/ 10 мая 2018

Я использую плагин ricoh-theta-viewer для просмотра изображения панаромы в 360-градусном обзоре. Я мог легко получить 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;
  }

}

Но проблема в том, что изображение поворачивается с использованием альфа, бета и гаммы deviceorientation прослушивателя событий, что неправильно. Может быть, мне нужно манипулировать альфа, бета и гаммой, а затем вписать в функцию this.ricohView.setCameraDir , чтобы я мог получить точное вращение изображения.

Может кто-нибудь указать мне на мою ошибку?

1 Ответ

0 голосов
/ 11 мая 2018

Установить 'orientationChange' = true в конструкторе.

Это должно включить событие ориентации устройства внутри пакета. Эта функция позволяет движение жестов.

...