插件原地址如下：
barcode-scanner-plugin
BarcodeScanner
- src
- android
- com
- LibraryProject
- com.google.zxing.client.android.capture.jar
- readme.md
...
- android
主要目錄如上缤言。
集成說明。
當添加插件后吓揪，會將com.google.zxing.client.android.capture.jar文件拷貝到安卓項目的libs下至耻，作為jar包使用若皱。是zxing的打包镊叁，原文件就在LibraryProject中。
當你不進過修改直接使用該插件時走触，其掃碼界面非常簡陋晦譬。我們如何自定義掃碼界面？
- 修改原文件互广，在LibraryProject目錄中敛腌。
有兩個難點，一是如何修改惫皱，二是如何打包成jar像樊。
打包jar
我們先看怎么打包。
該目錄下旅敷，我們看到ant.properties這個文件和config.xml文件生棍。
如果你熟悉安卓開發(fā)就知道ant這個工具是做什么的，我猜測可能是打包工具扫皱，于是搜索了下ant足绅，果然是我想的那樣。
如何使用ant韩脑？
- 下載ant的安裝包氢妈，這里是地址，下完后解壓縮段多。
- 配置環(huán)境變量（目的是使用ant命令）首量，如何添加環(huán)境變量不多說，每個人的shell配置文件不同
vi ~/.zshrc
# ==> 添加下列代碼（注意修改自己的路徑）
# ant
export ANT_HOME=/Users/mrchen/Applications/apache-ant
export PATH=$PATH:$ANT_HOME/bin
- 打開新terminal窗口进苍，ant -version加缘，查看是否配置正確。
進入LibraryProject目錄下觉啊，使用ant命令打包jar文件拣宏。
cd LibraryProject
ant ij-release
生成的jar文件在：LibraryProject/bin/classes.jar
將該文件重命名并覆蓋com.google.zxing.client.android.capture.jar文件即可。
接下來將涉及源碼的修改杠人，當你知道怎么打包jar勋乾，源碼修改就好辦了。
圖片變形的問題
源碼修改主要是界面圖像和掃描界面嗡善。文件集中在src/com/google/zxing/client/android中辑莫，其他文件都是核心文件，如果了解zxing項目就會知道罩引，這個插件作者整理了下各吨，將核心和安卓代碼整合起來了。
主要做的改變是兩個袁铐。
- 固定為豎屏
- 修改camera的分辨率
文件：CameraConfigurationManager.java
initFromCameraParameters() => 這個方法主要是初始化camera的參數
第一步： 修改始終為豎屏（默認是橫屏）揭蜒，將下面的代碼插入到
cameraResolution = findBestPreviewSizeValue(parameters, screenResolution);
之前横浑，并將這一行改為
cameraResolution = findBestPreviewSizeValue(parameters, screenResolutionForCamera);
Point screenResolutionForCamera = new Point();
screenResolutionForCamera.x = screenResolution.x;
screenResolutionForCamera.y = screenResolution.y;
// preview size is always something like 480*320, other 320*480
if (screenResolution.x < screenResolution.y) {
screenResolutionForCamera.x = screenResolution.y;
screenResolutionForCamera.y = screenResolution.x;
}
第二步： 修改camera默認參數
在方法findBestPreviewSizeValue中，會根據屏幕分辨率和攝像頭默認參數（比如支持的拍攝分辨率）屉更，進行計算得到合適的camera分辨率伪嫁。
修改 MAX_PREVIEW_PIXELS 參數的默認值，該值是指定拍攝的分辨率偶垮，默認的720p张咳。
private static final int MAX_PREVIEW_PIXELS = 1920 * 1080; // 最大支持1080p的圖片
這里只需要在initFromCameraParameters 和 findBestPreviewSizeValue方法中修改即可。
掃碼框尺寸和位置修改
代碼位置
CameraManager.java
方法：Rect getFramingRect() => 獲取掃碼框尺寸位置參數, return rect(left, top, left, bottom);
這里非常簡單似舵，看下源碼就懂了
修改掃碼框邊框和掃描線條
代碼位置
ViewfinderView.java
void onDraw() => 使用的是canvas畫的掃描框和激光線條脚猾。示例代碼如下：
@Override
public void onDraw(Canvas canvas) {
if (cameraManager == null) {
return; // not ready yet, early draw before done configuring
}
Rect frame = cameraManager.getFramingRect();
if (frame == 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);
// change.cf
paint.setColor(frameAngleColor);
canvas.drawRect(frame.left, frame.top, frame.left + 60, frame.top + 20, paint);
canvas.drawRect(frame.left, frame.top, frame.left + 20, frame.top + 60, paint);
canvas.drawRect(frame.right - 60, frame.top, frame.right, frame.top + 20, paint);
canvas.drawRect(frame.right - 20, frame.top, frame.right, frame.top + 60, paint);
canvas.drawRect(frame.left, frame.bottom - 60, frame.left + 20, frame.bottom, paint);
canvas.drawRect(frame.left, frame.bottom - 20, frame.left + 60, frame.bottom, paint);
canvas.drawRect(frame.right - 20, frame.bottom - 60, frame.right, frame.bottom, paint);
canvas.drawRect(frame.right - 60, frame.bottom - 20, frame.right, frame.bottom, paint);
Log.i("ViewfinderView", "**** draw rect angle ****");
// change.end
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);
canvas.drawRect(frame.left + 2, frame.top + laserPosition - 4, frame.right + 2, frame.top + laserPosition + 4, paint);
laserPosition += laserSpeed;
if (laserPosition > frame.height()) {
laserSpeed = -20;
laserPosition = frame.height();
}
if (laserPosition < 0) {
laserSpeed = 20;
laserPosition = 0;
}
/*Rect previewFrame = cameraManager.getFramingRectInPreview();
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<ResultPoint>(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);
}
}
很簡單，可以自己隨便發(fā)揮畫砚哗。注意上面代碼我增加了幾個變量龙助。
private int laserPosition = 0;
private int laserSpeed = 20;
private int frameAngleColor = resources.getColor(fakeR.getId("color", "frame_angle"));
并且在res文件夾下的colors.xml中新增一條。
<color name="frame_angle">#feee00</color>
說明
修改后的源代碼地址 =>
百度云
使用方法蛛芥，解壓縮后提鸟，添加到cordova插件中
cordova plugin add <your_barcode_scanner_path>
$(function() {
$('.scan-btn').click(function() {
cordova.plugins.barcodeScanner.scan(
function (result) {
alert("We got a barcode\n" +
"Result: " + result.text + "\n" +
"Format: " + result.format + "\n" +
"Cancelled: " + result.cancelled);
},
function (error) {
alert("Scanning failed: " + error);
},
{
preferFrontCamera : false, // iOS and Android
showFlipCameraButton : false, // iOS and Android
showTorchButton : false, // iOS and Android
torchOn: false, // Android, launch with the torch switched on (if available)
prompt : "Place a barcode inside the scan area", // Android
resultDisplayDuration: 0, // Android, display scanned text for X ms. 0 suppresses it entirely, default 1500
formats : "QR_CODE,PDF_417", // default: all but PDF_417 and RSS_EXPANDED
orientation : "portrait", // Android only (portrait|landscape), default unset so it rotates with the device
disableAnimations : true, // iOS
disableSuccessBeep: false // iOS
}
);
});
});
示例項目地址 =>
coding.cordova_test
項目比較小，測試用仅淑，不是很完整称勋，ignore文件什么都沒有配，所以插件所有文件都上傳上去了的涯竟。
示例apk下載 =>
cordova_test.apk
可以試試哦??
