आयनिक 2 ऐप को पूरी तरह से पारदर्शी बनाने का सबसे अच्छा तरीका?

Question

मैं हाल ही में कॉर्डोवा-प्लगइन-क्यूर्सकैनर (https://github.com/bitpay/cordova-plugin-qrscanner) नामक एक बिल्कुल नई कॉर्डोवा प्लगइन में आया था। मैं पहले अन्य क्यूआर स्कैनर का उपयोग कर रहा हूं, लेकिन जब तक क्यूआर स्कैन नहीं किया जाता है तब तक वे किसी प्रकार का मूल कैमरा यूआई ओवरले करते हैं और फिर ऐप पर वापस आते हैं।

हालांकि, इस प्लगइन का दृष्टिकोण थोड़ा अलग है। कैमरा वास्तव में आपके ऐप के पीछे "पीछे" दिखाया गया है और इसे देखने के लिए आपको सब कुछ पारदर्शी बनाना है।

यह बहुत दिलचस्प है क्योंकि आप आसानी से HTML और CSS के साथ कस्टम ओवरले जोड़ सकते हैं। हालांकि, मुझे पूरा यकीन नहीं है कि यहां सबसे अच्छा तरीका क्या है।

प्लगइन जोड़ने और बस QRScanner.scan(displayContents); पर कॉल करने के बाद आप कुछ भी नहीं देख सकते हैं, लेकिन स्कैनर पहले से ही पृष्ठभूमि में चल रहा है। मैंने फिर ऐप से किसी भी शैलियों को हटा दिया (simplest way to remove all the styles in a page देखें) और यह देखने के लिए पृष्ठभूमि रंग को पारदर्शी पर सेट करें कि यह काम करता है या नहीं। ऐसा हुआ, लेकिन मैं स्पष्ट रूप से अभी भी उस पाठ को देख सकता था जो पहले प्रदर्शित किया गया था।

मुझे लगता है कि मैं अपने ओवरले के साथ एक नया पेज बना और धक्का दे सकता हूं, पृष्ठभूमि रंग को पारदर्शी पर सेट कर सकता हूं और कोड स्कैन किए जाने के बाद फिर से नेविगेट कर सकता हूं। लेकिन यह वास्तव में हैकी लगता है।

क्या किसी के पास इसके लिए बेहतर समाधान है?
उदाहरण के लिए, ऐप के पूरे दृश्य भाग को "स्वैप" करने का कोई तरीका है ओवरले के साथ और कोड स्कैन किए जाने के बाद राज्य को पुनर्स्थापित करें?

आपकी मदद के लिए धन्यवाद।

संपादित करें:

यह वही प्लगइन नहीं है, लेकिन इस लेख मेरे सवाल के लिए प्रासंगिक है।

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

सीएसएस शैलियों को लागू करने से काम करता है, लेकिन फिर से, एप्लिकेशन के बाकी तो प्रयोग करने योग्य नहीं है।

Answer 1

मैं ऐप को पारदर्शी नहीं बनाऊंगा, क्योंकि मुझे इसका बिंदु नहीं दिखाई देता है। इसके बजाय आप अपने पृष्ठ में एक div में कैमरे की सामग्री दिखाएंगे, और कैमरे की छवि वाले तत्व की तुलना में उच्च जेड-इंडेक्स का उपयोग करके उस पर शीर्ष HTML तत्वों को ले जाएं।

Answer 2

@vrijdenker के रूप में कहा गया है कि आपको कैमरे की सामग्री को सही स्तर पर प्रदर्शित करना चाहिए और सीएसएस को अजीब तरह से हैक नहीं करना चाहिए।

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

:

कि आप दूरस्थ कैमरा कंटेनर स्थानीय बनाना और उस पर कुछ सीएसएस लागू करने के लिए अपने अनुप्रयोग डिबग z- सूचकांक/प्रदर्शन/आदि

Android पर

रिमोट डिबग संशोधित करने के लिए कर सकते हैं ऐसा करने के लिए

iOS पर रिमोट डिबग:

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

आपको लगता है कि असली देवी पर कर सकते हैं सीई या सिम्युलेटर पर

Answer 3

@ एंड्रियास मुझे कुछ हफ्ते पहले कुछ समस्या थी।यहां बताया गया है कि मैंने इसे कैसे ठीक किया:

1) सबसे पहले, अपनी थीम/variables.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) याद वर्ग दूर करने के लिए qrScanner स्कैन किए जाने के बाद कुछ बंद कर दिया गया था:

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

ngOnDestroy() { 
    this.closeQrScanner(); 
} 

आशा है कि यह मदद करता है