Лучший способ сделать приложение ionic2 полностью прозрачным?

Question

Недавно я наткнулся на довольно новый плагин cordova под названием cordova-plugin-qrscanner (https://github.com/bitpay/cordova-plugin-qrscanner). Раньше я использовал другие QR-сканеры, но они просто накладывают какой-то собственный пользовательский интерфейс камеры, пока QR не будет отсканирован, а затем вернется обратно в приложение.

Однако подход этого плагина немного отличается. Камера фактически показана «позади» вашего приложения, и вы должны сделать все прозрачным, чтобы ее увидеть.

Это очень интересно, потому что вы можете легко добавить пользовательские наложения с помощью HTML и CSS. Однако я не совсем уверен, какой лучший подход здесь.

После добавления плагина и простого вызова QRScanner.scan(displayContents); вы ничего не видите, но сканер уже работает в фоновом режиме. Затем я рекурсивно удаляю любые стили (см. simplest way to remove all the styles in a page) из приложения и устанавливаю прозрачный цвет фона, чтобы убедиться, что он сработал. Это произошло, но я, очевидно, все еще мог видеть текст, который был показан ранее.

Я предполагаю, что я мог бы создать и нажать новую страницу с моим наложением на нее, установить прозрачность фона и затем вернуться назад, как только будет проверен код. Но это кажется действительно взломанным.

У кого-нибудь есть лучшее решение для этого?
Например, существует ли способ «обменивать» всю видимую часть приложения с помощью наложения и восстанавливать состояние после проверки кода?

Благодарим за помощь.

EDIT:

Это не то же плагин, но эта статья имеет отношение к моему вопросу.

http://www.joshmorony.com/ionic-go-create-a-pokemon-go-style-interface-in-ionic-2/

Применение стилей CSS работает, но опять же, все остальные приложения не может использоваться тогда.

Answer 1

Я бы не сделал приложение прозрачным, так как я не вижу смысла в этом. Вместо этого вы просто показываете содержимое камеры в div на своей странице и накладываете другие элементы HTML поверх этого, используя более высокий индекс z, чем элемент, содержащий изображение камеры.

Answer 2

Как сказал @vrijdenker, вы должны отображать содержимое камеры на нужный уровень и не пытаться взломать CSS.

Для этого вы можете дистанционно отлаживать приложение, чтобы локализовать контейнер камеры и применить некоторые CSS на него, чтобы изменить Z-индекс/дисплей/и т.д.

Удаленная отладка на Android:

https://developers.google.com/web/tools/chrome-devtools/remote-debugging/

Удаленная отладка на прошивке:

https://developer.apple.com/library/content/documentation/AppleApplications/Conceptual/Safari_Developer_Guide/GettingStarted/GettingStarted.html

Вы можете сделать это на реальном деви ce или на тренажере

Answer 3

@Andreas У меня была проблема несколько недель назад.Вот как я его исправил:

1) Прежде всего, создайте класс под названием lowOpacity на тему/variables.scss, он должен быть глобальным, если вы создадите его в scss страницы, добавив его динамически, работа:

.lowOpacity { 
    opacity: 0; 
} 

2) Когда вы показываете qrScanner, вы должны применить класс к элементу ионно-приложений, и при необходимости зарегистрировать действие BackButton:

  this.qrScanner.show().then(()=>{ 
       let unregister = this.platform.registerBackButtonAction(()=>{ 
        this.closeQrScanner(); 
        unregister(); 
       }); 
       window.document.querySelector('ion-app').classList.add('lowOpacity'); 
      }); 

3) Remeber удалить класс после того, как qrScanner сканировал что-то закрытое:

closeQrScanner() { 
    this.qrScanner.hide().then(()=>{ 
     window.document.querySelector('ion-app').classList.remove('lowOpacity'); 
    }); // hide camera preview 
} 

ngOnDestroy() { 
    this.closeQrScanner(); 
} 

Надеется, что это помогает