Der beste Weg, ionic2 App vollständig transparent zu machen?

Ich bin kürzlich auf ein ziemlich neues Cordova-Plugin namens cordova-plugin-qrscanner (https://github.com/bitpay/cordova-plugin-qrscanner) gestoßen. Ich habe vorher andere QR-Scanner verwendet, aber diese überlagern einfach eine Art native Kamera-Benutzeroberfläche, bis der QR gescannt wurde und kehren dann zur App zurück.Der beste Weg, ionic2 App vollständig transparent zu machen?

Allerdings ist der Ansatz dieses Plugins ein bisschen anders. Die Kamera wird tatsächlich "hinter" Ihrer App angezeigt und Sie müssen alles transparent machen, um es zu sehen.

Dies ist sehr interessant, weil Sie dann einfach benutzerdefinierte Überlagerungen mit HTML und CSS hinzufügen können. Ich bin mir jedoch nicht ganz sicher, was hier am besten ist.

Nach dem Hinzufügen des Plugins und einfach QRScanner.scan(displayContents); aufrufen, können Sie nichts sehen, aber der Scanner läuft bereits im Hintergrund. Ich habe dann rekursiv alle Stile (siehe simplest way to remove all the styles in a page) aus der App entfernt und die Hintergrundfarbe auf transparent gesetzt, um zu sehen, ob sie funktioniert hat. Es tat, aber ich konnte offensichtlich den Text sehen, der vorher angezeigt wurde.

Ich denke, ich könnte eine neue Seite mit meinem Overlay erstellen und schieben, die Hintergrundfarbe auf transparent setzen und dann zurück navigieren, sobald der Code gescannt wurde. Aber das fühlt sich wirklich hacky an.

Hat jemand eine bessere Lösung dafür?
Gibt es zum Beispiel eine Möglichkeit, den gesamten sichtbaren Teil der App mit der Überlagerung zu "vertauschen" und den Zustand wiederherzustellen, nachdem der Code gescannt wurde?

Danke für Ihre Hilfe.

EDIT:

Es ist nicht das gleiche Plugin, aber dieser Artikel ist auf meine Frage relevant.

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

arbeitet die CSS-Stile anwenden, aber auch hier ist der Rest der App dann nicht verwendbar.

Quelle

2016-11-07 Andreas Gassmann

Wie wissen Sie, dass das Plugin funktioniert? Da Sie nichts sehen, funktioniert das Plugin möglicherweise nicht. – vrijdenker

Wie ich schon sagte, wenn ich alle Elemente rekursiv transparent mache, funktioniert es. Aber das kann natürlich nicht die Lösung sein, weil die anderen Teile der App dann unbrauchbar sind. –

Ich würde die App nicht transparent machen, da ich den Sinn nicht verstehe. Stattdessen würden Sie nur den Inhalt der Kamera in einem div auf Ihrer Seite anzeigen und andere HTML-Elemente darüber mit einem höheren Z-Index als das Element, das das Kamerabild enthält, überlagern.

Quelle

2016-11-22 17:37:38 vrijdenker

Wie können Sie den Inhalt der Kamera in einem div hinzufügen? Das wäre eine noch bessere Lösung, aber ich weiß nicht, ob/wie das möglich ist. –

Konntest du das bei @AndreasGassmann herausfinden? –

Der einzige Weg, wie ich es funktionierte, ist die Verwendung des WKWebView auf iOS. Den Quelltext eines Beispiels können Sie sich hier ansehen: https://github.com/airgap-it/airgap-mobile-broadcaster –

Wie @vrijdenker sagte, sollten Sie den Kamera-Inhalt auf die richtige Ebene anzeigen und nicht unheimlich das CSS hacken.

zu tun, dass Sie Remote-App debuggen können die Kamera Container zu lokalisieren und einige CSS auf sie anzuwenden, die z-index/Anzeige/usw.

Remote-Debug auf Android zu ändern:

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

Remote-Debug auf iOS:

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

Sie können auf realen Devi tun ce oder auf Simulator

Quelle

2016-11-23 11:20:22

Wie ich bereits erwähnt habe, bezweifle ich, dass das funktionieren wird. Aus der Dokumentation des Plugins wird ersichtlich, dass die Kameravorschau außerhalb des Webview-Kontexts angezeigt wird. 'QRScanners native Kameravorschau wird hinter dem Webview der Cordova App gerendert. Ich glaube also nicht, dass Sie über das Webview darauf zugreifen können. –

OK, dann wenden Sie eine bestimmte CSS-Klasse auf Ihren Container, wenn Sie das Plugin starten, wie es im Dokument angegeben ist. Verwenden Sie die 'ngClass'-Direktive und wenden Sie eine' opacity: 0' auf Ihre spezifische Klasse an –

@Andreas hatte ich das einige Problem vor ein paar Wochen.Hier ist, wie ich es behoben:

1) Erstellen Sie zuerst eine Klasse namens lowOpacity auf Ihrem Thema/Variablen.Scss, es muss global sein, wenn Sie es in der scss der Seite erstellen hinzufügen es dynamisch nicht Arbeit:

.lowOpacity { 
    opacity: 0; 
}

2) Wenn Sie die qrScanner zeigen, sollten Sie die Klasse in der Ionen App Element anwenden und gegebenenfalls ein Backbutton Aktion registrieren:

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

3) Denken Sie daran, entfernen Sie die Klasse nachdem der qrScanner gescannt hat, wurde etwas geschlossen:

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

ngOnDestroy() { 
    this.closeQrScanner(); 
}

Hoffe, es hilft

Quelle

2017-11-09 13:33:52 paulovitorjp

Der beste Weg, ionic2 App vollständig transparent zu machen?

Antwort

Verwandte Themen