zxing扫码--镭射线
同步发表于http://avenwu.net/2015/09/15/zxing_view_finder_laser
在很多应用中都有二维码扫描的需求,比如微信,通过扫描电脑二维码,实现用户登录授权;
Google出品的zxing时比较出名的二维码扫描库,但是和其他开源组件不同,zxing包含了很多东西,同时github上的官方实例也较为复杂,如果初次接触,要很快集成扫码并自定UI并不容易;
本文通过分析zxing官方app,揭开扫码镭射线的实现方案;
https://github.com/zxing/zxing
镭射线
如下图,这是zxing实例的默认效果
但是在很多情况下需要根据项目需求自定义,如类似微信的扫描框及扫描线
源码分析
通过分析zxing项目可以知道扫描框对应的时一个自定义的view:ViewfinderView,但就这个类来说,代码量200左右
/*
* Copyright (C) 2008 ZXing authors
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
package com.google.zxing.client.android;
import com.google.zxing.ResultPoint;
import com.google.zxing.client.android.camera.CameraManager;
import android.annotation.SuppressLint;
import android.content.Context;
import android.content.res.Resources;
import android.graphics.Bitmap;
import android.graphics.Canvas;
import android.graphics.Paint;
import android.graphics.Rect;
import android.util.AttributeSet;
import android.view.View;
import java.util.ArrayList;
import java.util.List;
/**
* This view is overlaid on top of the camera preview. It adds the viewfinder rectangle and partial
* transparency outside it, as well as the laser scanner animation and result points.
*
* @author dswitkin@google.com (Daniel Switkin)
*/
public final class ViewfinderView extends View {
private static final int[] SCANNER_ALPHA = {0, 64, 128, 192, 255, 192, 128, 64};
private static final long ANIMATION_DELAY = 80L;
private static final int CURRENT_POINT_OPACITY = 0xA0;
private static final int MAX_RESULT_POINTS = 20;
private static final int POINT_SIZE = 6;
private CameraManager cameraManager;
private final Paint paint;
private Bitmap resultBitmap;
private final int maskColor;
private final int resultColor;
private final int laserColor;
private final int resultPointColor;
private int scannerAlpha;
private List<ResultPoint> possibleResultPoints;
private List<ResultPoint> lastPossibleResultPoints;
// This constructor is used when the class is built from an XML resource.
public ViewfinderView(Context context, AttributeSet attrs) {
super(context, attrs);
// Initialize these once for performance rather than calling them every time in onDraw().
paint = new Paint(Paint.ANTI_ALIAS_FLAG);
Resources resources = getResources();
maskColor = resources.getColor(R.color.viewfinder_mask);
resultColor = resources.getColor(R.color.result_view);
laserColor = resources.getColor(R.color.viewfinder_laser);
resultPointColor = resources.getColor(R.color.possible_result_points);
scannerAlpha = 0;
possibleResultPoints = new ArrayList<>(5);
lastPossibleResultPoints = null;
}
public void setCameraManager(CameraManager cameraManager) {
this.cameraManager = cameraManager;
}
@SuppressLint("DrawAllocation")
@Override
public void onDraw(Canvas canvas) {
if (cameraManager == null) {
return; // not ready yet, early draw before done configuring
}
Rect frame = cameraManager.getFramingRect();
Rect previewFrame = cameraManager.getFramingRectInPreview();
if (frame == null || previewFrame == null) {
return;
}
int width = canvas.getWidth();
int height = canvas.getHeight();
// Draw the exterior (i.e. outside the framing rect) darkened
paint.setColor(resultBitmap != null ? resultColor : maskColor);
canvas.drawRect(0, 0, width, frame.top, paint);
canvas.drawRect(0, frame.top, frame.left, frame.bottom + 1, paint);
canvas.drawRect(frame.right + 1, frame.top, width, frame.bottom + 1, paint);
canvas.drawRect(0, frame.bottom + 1, width, height, paint);
if (resultBitmap != null) {
// Draw the opaque result bitmap over the scanning rectangle
paint.setAlpha(CURRENT_POINT_OPACITY);
canvas.drawBitmap(resultBitmap, null, frame, paint);
} else {
// Draw a red "laser scanner" line through the middle to show decoding is active
paint.setColor(laserColor);
paint.setAlpha(SCANNER_ALPHA[scannerAlpha]);
scannerAlpha = (scannerAlpha + 1) % SCANNER_ALPHA.length;
int middle = frame.height() / 2 + frame.top;
canvas.drawRect(frame.left + 2, middle - 1, frame.right - 1, middle + 2, paint);
float scaleX = frame.width() / (float) previewFrame.width();
float scaleY = frame.height() / (float) previewFrame.height();
List<ResultPoint> currentPossible = possibleResultPoints;
List<ResultPoint> currentLast = lastPossibleResultPoints;
int frameLeft = frame.left;
int frameTop = frame.top;
if (currentPossible.isEmpty()) {
lastPossibleResultPoints = null;
} else {
possibleResultPoints = new ArrayList<>(5);
lastPossibleResultPoints = currentPossible;
paint.setAlpha(CURRENT_POINT_OPACITY);
paint.setColor(resultPointColor);
synchronized (currentPossible) {
for (ResultPoint point : currentPossible) {
canvas.drawCircle(frameLeft + (int) (point.getX() * scaleX),
frameTop + (int) (point.getY() * scaleY),
POINT_SIZE, paint);
}
}
}
if (currentLast != null) {
paint.setAlpha(CURRENT_POINT_OPACITY / 2);
paint.setColor(resultPointColor);
synchronized (currentLast) {
float radius = POINT_SIZE / 2.0f;
for (ResultPoint point : currentLast) {
canvas.drawCircle(frameLeft + (int) (point.getX() * scaleX),
frameTop + (int) (point.getY() * scaleY),
radius, paint);
}
}
}
// Request another update at the animation interval, but only repaint the laser line,
// not the entire viewfinder mask.
postInvalidateDelayed(ANIMATION_DELAY,
frame.left - POINT_SIZE,
frame.top - POINT_SIZE,
frame.right + POINT_SIZE,
frame.bottom + POINT_SIZE);
}
}
public void drawViewfinder() {
Bitmap resultBitmap = this.resultBitmap;
this.resultBitmap = null;
if (resultBitmap != null) {
resultBitmap.recycle();
}
invalidate();
}
/**
* Draw a bitmap with the result points highlighted instead of the live scanning display.
*
* @param barcode An image of the decoded barcode.
*/
public void drawResultBitmap(Bitmap barcode) {
resultBitmap = barcode;
invalidate();
}
public void addPossibleResultPoint(ResultPoint point) {
List<ResultPoint> points = possibleResultPoints;
synchronized (points) {
points.add(point);
int size = points.size();
if (size > MAX_RESULT_POINTS) {
// trim it
points.subList(0, size - MAX_RESULT_POINTS / 2).clear();
}
}
}
}
主要的绘制逻辑都在onDraw()内,这里面包含了扫描框的绘制,识别点的绘制,以及镭射线的绘制,现在我们只需关注其中的镭射线和扫描框部分逻辑
- 首先确定扫描框的位置,计算大小等
//这里简单判断摄像头相关的资源是否准备完毕,只有ok的情况才会继续绘制
if (cameraManager == null) {
return; // not ready yet, early draw before done configuring
}
//获取摄像机画面中用于防止扫描框的区域Rect
Rect frame = cameraManager.getFramingRect();
Rect previewFrame = cameraManager.getFramingRectInPreview();
if (frame == null || previewFrame == null) {
return;
}
int width = canvas.getWidth();
int height = canvas.getHeight();
// Draw the exterior (i.e. outside the framing rect) darkened
paint.setColor(resultBitmap != null ? resultColor : maskColor);
canvas.drawRect(0, 0, width, frame.top, paint);
canvas.drawRect(0, frame.top, frame.left, frame.bottom + 1, paint);
canvas.drawRect(frame.right + 1, frame.top, width, frame.bottom + 1, paint);
canvas.drawRect(0, frame.bottom + 1, width, height, paint);
- 接下来绘制扫描线
// Draw a red "laser scanner" line through the middle to show decoding is active
paint.setColor(laserColor);
paint.setAlpha(SCANNER_ALPHA[scannerAlpha]);
//扫描线的alpha每次都不同,目的是通过刷新画布,实现扫描线闪烁的效果
scannerAlpha = (scannerAlpha + 1) % SCANNER_ALPHA.length;
int middle = frame.height() / 2 + frame.top;
canvas.drawRect(frame.left + 2, middle - 1, frame.right - 1, middle + 2, paint);
- 让扫描线显示并动起来
// Request another update at the animation interval, but only repaint the laser line,
// not the entire viewfinder mask.
postInvalidateDelayed(ANIMATION_DELAY,
frame.left - POINT_SIZE,
frame.top - POINT_SIZE,
frame.right + POINT_SIZE,
frame.bottom + POINT_SIZE);
这里通过局部刷新的方式,每80毫秒重绘一次镭射线;
小结
实际上通过上面的三段代码,我们就已经实现了扫码的一部分即贮备扫描框和镭射线,后续会通过其他文章继续优化我们的扫描框和摄像头的使用;
项目位于:https://github.com/avenwu/zxing-support
本文所对应的代码位于tag-v1:https://github.com/avenwu/zxing-support/releases/tag/tag-v1
zxing扫码--镭射线的更多相关文章
- zxing 扫码第三方SDK版本不兼容问题
在AndroidStudio环境下,或许会遇到下面的问题: Error:Execution failed for task ':app:preDebugAndroidTestBuild'. > ...
- Blazor组件自做三 : 使用JS隔离封装ZXing扫码
Blazor组件自做三 : 使用JS隔离封装ZXing扫码 本文基础步骤参考前两篇文章 Blazor组件自做一 : 使用JS隔离封装viewerjs库 Blazor组件自做二 : 使用JS隔离制作手写 ...
- ios zxing扫码问题
在ios 中 扫瞄二维码,条形码基本有 2中第三方的库,一个是zbar 一个是zxing,zxing 在android中表现的比较出色,但是在ios 中不是很好用,扫瞄效率低,我们一般都用zbar,但 ...
- 安卓扫码:简单的ZXing使用记录
ZXing是Google提供的条形码.二维码等的生成.解析的库.最近工作需求去研究了一下,主要是研究怎么扫描二维码(QRCode).网上教程也不少,但大多看了不明所以,甚至看了半天都不知道解码到底从哪 ...
- C#-Xamarin利用ZXing.Net.Mobile进行扫码
前言 很多人觉得Xamarin的开源少,没法用来开发项目. 但,实际上Xamarin已经有很多开源代码了:只要不是特别特殊的项目,基本上是都可以满足开发. 下面我们来看一下Xamarin中利用开源代码 ...
- ZXing Blazor 扫码组件 , ssr/wasm通用
项目介绍 本项目是利用 ZXing 进行封装的 Blazor 组件库 直接调用手机或者桌面电脑摄像头进行扫码 项目截图 项目地址 https://github.com/den ...
- 二维码zxing源码分析(五)精简代码
由于工作的需要,我并不是需要二维码扫描的所有的功能,我只是需要扫一扫,并显示出来图片和url就行,于是我们就要精简代码了,源码已经分析完了,精简起来就方便多了,源码分析请看 二维码zxing源码分析( ...
- spring boot高性能实现二维码扫码登录(上)——单服务器版
前言 目前网页的主流登录方式是通过手机扫码二维码登录.我看了网上很多关于扫码登录博客后,发现基本思路大致是:打开网页,生成uuid,然后长连接请求后端并等待登录认证相应结果,而后端每个几百毫秒会循环查 ...
- spring boot高性能实现二维码扫码登录(中)——Redis版
前言 本打算用CountDownLatch来实现,但有个问题我没有考虑,就是当用户APP没有扫二维码的时候,线程会阻塞5分钟,这反而造成性能的下降.好吧,现在回归传统方式:前端ajax每隔1秒或2秒发 ...
随机推荐
- Linux搭建SVN服务器(centos)
http://wenku.baidu.com/link?url=0SnbE5pQG8K-RKnPlKcdesMWxS5YC64glkk5sCyxHorR37nX-qa4w0ViWLp55oDnRpTn ...
- Web大文件上传控件-asp.net-bug修复-Xproer.HttpUploader6.2
版权所有 2009-2016荆门泽优软件有限公司 保留所有权利 官方网站:http://www.ncmem.com/ 产品首页:http://www.ncmem.com/webapp/up6.2/in ...
- Omu.AwesomeMvc.dll 和Omu.ValueInjecter.dll 介绍
AwesomeMvc 让你不写一行js实现下拉列表联动 AwesomeMvc是个开源项目,地址:http://awesome.codeplex.com/ Omu.AwesomeMvc.dll 和Omu ...
- Magicodes.WeiChat——多租户的设计与实现
概要 多租户(Multi Tenancy/Tenant)是一种软件架构,其定义是:在一台服务器上运行单个应用实例,它为多个租户提供服务. 本框架使用的是共享数据库.共享 Schema.共享数据表的数据 ...
- [转发]UML类图符号 各种关系说明以及举例
UML中描述对象和类之间相互关系的方式包括:依赖(Dependency),关联(Association),聚合(Aggregation),组合(Composition),泛化(Generalizati ...
- TypeScript开篇:尝点新鲜和甜头
返回TS学习总目录 快速开始 我们通过创建一个简单的web应用来开始使用TypeScript.获得TS工具的方法主要有两种,一种是通过NPM(Node包管理器),另一种是通过VS2012安装TS的插件 ...
- jenkins2 groovy脚本参考
使用plugin生成groovy脚本,或者参考已有的groovy脚本. 文章来自:http://www.ciandcd.com文中的代码来自可以从github下载: https://github.co ...
- 专题:点滴Javascript
JS#38: Javascript中递归造成的堆栈溢出及解决方案 JS#37: 使用console.time测试Javascript性能 JS#36: Javascript中判断两个日期相等 JS#3 ...
- SpringMVC文件上传实现
SpringMVC(注解)上传文件需要注意的几个地方:1.form的enctype="multipart/form-data",这个是上传文件必须的2.applicationCon ...
- iOS JSPatch 热修复使用
概述 一说到热修复,可能很多人会觉得应该很复杂,很难用(我以前是这么觉得的...),实际使用起来蛮简单的,这里以一个小demo演示热修复是如何修复崩溃的,具体更深入的用法,可以看这个https://g ...