给B4A程序增加类似微信“扫一扫”的扫描条形码/二维码功能

ldhyob

Member
Licensed User
Longtime User
最近在用B4A完成一份APP时,客户要求增加类似微信“扫一扫”的扫描条形码/二维码功能。如下图所示:
img1.png

以前从未写过这方面代码,马上就想到了万能的b4x.com论坛,一阵搜索下来,收获不少,许多大神们早已写了现成的类库供大家使用,大都是基于google的Zxing库衍生而来,如ABZxing、jhsicezxing1、ZxingBarcodeScanner、ZxingGlass、zxScannerLiveView等。经过尝试,发现使用这些库确实很方便,廖廖几句代码就可以给程序增加上扫码功能。但是挑剔的用户提出,他觉着微信的“扫一扫”界面做的比较漂亮,要求也要实现那样的界面。
行,不就是修改些属性设置再加些layout元素吗?容易!我随即开始动手改造。。。结果,我被打败了,上面提到的几个库都封装的很好,基本不支持DIY,经过不断测试和比较,发现使用其中的ZxingBarcodeScanner、zxScannerLiveView这两个库比较接近最终结果,但是仍达不到完美模仿微信“扫一扫”界面效果:用ZxingBarcodeScanner库,屏幕中间的那根忽明忽暗的“极光线”始终去除不掉,即便把线的颜色设置成透明也不管用,会自动设成默认黑色;用zxScannerLiveView库则可以很好地DIY出任意的界面效果,但是不知什么原因,它的识别效率却不高,一般正常的扫码,几秒钟应该就能返回结果,而使用zxScannerLiveView库,有时居然半天都识别不出来,只要客户要求高点的,肯定通不过。
得,难道要用zxing源库在esclips里去重新写一个B4A的库?那岂不是搞大了!犯不着吧,呵呵...不甘心的我继续在论坛里搜寻着,终于有了新发现——CRZXing库,这个库仅提供了两个函数decodeBitmap、encodeBitmap,顾名思义,就是对2D/3D类型码编码与解码的意思,试了一下,居然效率很快。山穷水尽的我,终于看到了柳暗花明,于是乎萌发了这样的解决思路:
1.利用CameraExClass类模块实现手机摄像头拍照预览;
2.对相机实时预览的画面指定区域进行动态捕捉,即截屏;
3.利用CRZXing库对第2步获得的bitmap内容解析,获得2D/3D码信息。
按照以上“三步走”思路,我立马在B4A里开始堆砌代码,在经过N次调试后,大功告成!提交给客户,一次满意~通过!现特把实现中关键的几个环节小结了一下,和各位交流分享:
1.界面制作:用两层Panel组件做布局,下面的Panel层用一个全屏的Panel组件用于显示相机预览画面,上面的Panel层作为覆盖MASK层,分解成上、下、左、右、中5个Panel组件,上下左右4个Panel颜色设置为黑色,给予一定的alpha透明值,如160,中间的Panel组件即作为扫描的焦点边框区域(也是截屏和解码的区域),颜色设置为透明,边框四个角用Canvas绘制四个转角点缀。Layout如下图所示:
img2.png

2.扫描动画:用photoshop制作一个透明渐变的色条作为扫描指示标(或直接使用微信包里的资源图片),利用AnimationPlus库对其制作上下位移动画。
3.焦点截屏:在Camera的Camera_Preview事件中处理画面数据。(注意,对相机预览画面用常规的截屏方法是无效的)
4.细节处理:打开Camera的自动对焦AutoFocus,使拍摄的码图足够清晰;为保证扫描动画的流畅,运用Threading库进行多线程处理,将截屏与解码操作放在新的线程中,避免出现扫描动画的卡顿现象;通过Audio库,在成功解码获得编码信息内容后,播放“滴”音效,增强用户体验。
 

Attachments

  • ScanBarCode.apk
    482.5 KB · Views: 913
Last edited:

cxbs

Active Member
Licensed User
Longtime User
楼主好强大啊!如果能给一个简短的示例就更完美了!
 
Top