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

Discussion in 'Chinese Forum' started by ldhyob, Jun 23, 2016.

  1. ldhyob

    ldhyob Member Licensed 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库,在成功解码获得编码信息内容后,播放“滴”音效,增强用户体验。
     

    Attached Files:

    Last edited: Dec 12, 2016
    cxdzbl likes this.
  2. cxdzbl

    cxdzbl Member Licensed User

    非常不错
     
  3. vv3g

    vv3g New Member Licensed User

    学习了!
     
  4. zoujoo

    zoujoo Member Licensed User

  5. lkching7

    lkching7 Member Licensed User

    楼主太强大了!
     
  6. cxbs

    cxbs New Member

    楼主好强大啊!如果能给一个简短的示例就更完美了!
     
  7. smallqiang

    smallqiang New Member Licensed User

    楼主做的很好,非常感谢思路分析。
     
Loading...