但是,这个插件的方法有点不同.实际上,相机显示在您的应用程序“后面”,您必须使所有内容都透明才能看到它.
这非常有趣,因为您可以使用HTML和CSS轻松添加自定义叠加层.但是,我不太清楚这里最好的方法是什么.
添加插件后,只需调用QRScanner.scan(displayContents);你看不到任何东西,但扫描仪已经在后台运行.然后,我从应用程序中递归删除任何样式(请参阅simplest way to remove all the styles in a page),并将background-color设置为透明,以查看它是否有效.它确实如此,但我显然仍然可以看到之前显示的文本.
我想我可以在其上创建并推送带有叠加层的新页面,将背景颜色设置为透明,然后在扫描代码后导航回来.但这感觉非常黑客.
有人有更好的解决方案吗?
例如,有没有办法用覆盖层“交换”应用程序的整个可见部分,并在扫描代码后恢复状态?
谢谢你的帮助.
编辑:
它不是同一个插件,但这篇文章与我的问题相关.
http://www.joshmorony.com/ionic-go-create-a-pokemon-go-style-interface-in-ionic-2/
应用css样式有效,但同样,应用程序的其余部分不可用.
解决方法
1)首先,在你的theme / variables.scss上创建一个名为lowOpacity的类,它必须是全局的,如果你在页面的scss中创建它,动态添加它将不起作用:
.lowOpacity { opacity: 0; }
2)当您显示qrScanner时,您应该将该类应用于ion-app元素,并可选择注册后退按钮操作:
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(); }
希望能帮助到你
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。