带有错误相机覆盖尺寸的设备旋转

Question

我对编码和应用程​​序开发还很陌生（差不多一个月），所以请多多包涵。我正在开发一个使用条形码扫描插件（根据需要定制）的应用程序。

在应用程序的主视图（第一个窗口）中，我有一个块，单击它会触发 Barcode 插件的 scan()。这将打开一个精确尺寸的扫描仪作为主视图的块。但是如果我旋转设备，条形码扫描仪视图的尺寸就会变得混乱。

有没有办法可以调整/更改条形码扫描仪视图的 x、y、w、h 值，以便将其与主视图中我的应用程序块对齐？

点击我的应用主视图上的“扫描”块后，此扫描仪将作为带有自定义按钮的叠加层打开：

旋转设备并单击扫描块（应用主视图上的绿色块）后，它的外观如下：

在应用主视图上传递绿色扫描块尺寸的 Angular 代码：

.directive('barcodeScanner', function ($localStorage, _, $window) {
function link(scope, element, attrs){
    scope.scanning = false;
    scope.paused = false;
    //Barcode-Scanning Green Window
    var width = $window.innerWidth;
    var height = width * 3/4;
    if(width > 450){
        width = 400;
        height = 300;
    }
    scope.dimensionStyle = {
        width: width+"px",
        height: height+"px",
        "margin-left" : "auto",
        "margin-right" : "auto"
    }
    scope.$on('stop-scanner', function () {
        scope.paused=false;
        stopScanner();
    });
    scope.$on('start-scanner', function () {
        scope.paused=true;
        startScanner();
    });

    var mH = $window.innerHeight,
        mW = $window.innerWidth;
    var startBtn = element[0].querySelector('.barcode-start-btn');
    function startScanner(){
        var rect = startBtn.getBoundingClientRect();
        var options = {
            wPer : rect.width/mW,
            hPer : rect.height/mH,
            yPer : rect.top/mH,
            xPer : rect.left/mW
        }
        scope.scanning = true;
        cordova.plugins.barcodescanner.scan(function(result) {
                    scope.$emit('barcode-scanned',result);
              },
              options
        );
    }

我的barcodescanner.java被触发打开扫描仪的插件：

   @Override
public boolean execute(String action, JSONArray args, CallbackContext callbackContext) {
    this.callbackContext = callbackContext;
    this.requestArgs = args;

    if (action.equals(SCAN)) {
        // create fragment
        if(!hasPermisssion()) {
            requestPermissions(0);
        } else {
            scan(args);
        }
    } else if(action.equals(STOP)) {
        stop(args);
    } else {
        return false;
    }
    return true;
}
public void scan(final JSONArray args) {
    final CordovaPlugin that = this;

    cordova.getThreadPool().execute(new Runnable() {
        public void run() {

            int maxHeight = webView.getView().getHeight();
            int maxWidth = webView.getView().getWidth();
            double xPer = 0/360;
            double yPer = 82/568;
            double hPer = 270/568;
            double wPer = 360/360;
            // add config as intent extras
            if (args.length() > 0) {

                JSONObject obj;
                for (int i = 0; i < args.length(); i++) {
                    try {
                        obj = args.getJSONObject(i);
                        if(obj.has(X_PER)){
                            xPer = obj.getDouble(X_PER);
                        }
                        if(obj.has(Y_PER)){
                            yPer = obj.getDouble(Y_PER);
                        }
                        if(obj.has(H_PER)){
                            hPer = obj.getDouble(H_PER);
                        }
                        if(obj.has(W_PER)){
                            wPer = obj.getDouble(W_PER);
                        }
                    } catch (JSONException e) {
                        Log.i("CordovaLog", e.getLocalizedMessage());
                        continue;
                    }
                }
            }
            Bundle bundle = new Bundle();
            bundle.putDouble("x", maxWidth*xPer);
            bundle.putDouble("y", maxHeight*yPer);
            bundle.putDouble("w", maxWidth*wPer);
            bundle.putDouble("h", maxHeight*hPer);
            openCameraPopup(bundle);
        }
    });
}

我实现 ZxingScannerView 的片段类：

@Override
public View onCreateView(LayoutInflater inflater, ViewGroup container, Bundle state) {
    if(state == null){
        state = this.getArguments();
    }
    if(state != null) {
        x = state.getDouble("x");
        y = state.getDouble("y");
        w = state.getDouble("w");
        h = state.getDouble("h");
    }
    mScannerView = new ZXingScannerView(getActivity()){
        @Override
        public void setupCameraPreview(CameraWrapper cameraWrapper) {
            super.setupCameraPreview(cameraWrapper);

            buttonStop = new Button(getActivity());
            buttonStop.setText("STOP");

            ViewGroup.LayoutParams params = new ViewGroup.LayoutParams(ViewGroup.LayoutParams.WRAP_CONTENT, ViewGroup.LayoutParams.WRAP_CONTENT);
            this.addView(buttonStop);
            buttonStop.setOnClickListener( new OnClickListener() {
                @Override
                public void onClick(View v) {
                    mScannerView.stopCamera();
                    mScannerView.removeAllViews();
                }
            });
        }
 };
    mScannerView.setZ(10);
    mScannerView.setAutoFocus(true);
    mScannerView.setFlash(false);
    mScannerView.setX((float) x);
    mScannerView.setY((float) y);
    mScannerView.setLayoutParams(new ViewGroup.LayoutParams((int)w, (int)h));

    return mScannerView;
}

Answer 1

我建议您使用屏幕方向横向锁定您的位置。因此，每次您旋转手机时，它都会改变位置。