Rotation de l'appareil avec mauvaise dimension de superposition de caméra

Question

Je suis assez nouveau pour le codage et le développement d'applications (près d'un mois), alors s'il vous plaît, supportez-moi. Je travaille sur une application qui utilise un plugin d'analyse de codes à barres (personnalisé selon les besoins).

Dans la vue principale de l'application (première fenêtre), j'ai un bloc qui déclenche le scan du plugin Barcode() lors du clic. Cela ouvre un scanner des dimensions exactes comme le bloc de la vue principale. Mais si je fais pivoter l'appareil, les dimensions de la vue du scanner de codes à barres vont mal.

Y a-t-il un moyen de régler/modifier les valeurs x, y, w, h de la vue du lecteur de codes à barres afin de l'aligner avec le bloc de mon application dans la vue principale?

Après avoir cliqué sur le bloc d'analyse sur la fenêtre principale de mon application, ce scanner est ouvert en superposition avec des boutons personnalisés:

Lors de la rotation du dispositif et en cliquant sur le bloc de balayage (bloc vert sur l'application de principale vue), c'est à quoi il ressemble:

Code angulaire passer les dimensions du bloc de balayage vert sur la fenêtre principale de l'application:

.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 
     ); 
    } 

Mon barcodescanner.java du plug-in qui est déclenché pour ouvrir le scanner:

@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); 
     } 
    }); 
} 

Ma classe de fragments qui implémente 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

Je vous suggère de verrouiller votre position à l'aide paysage d'orientation de l'écran. Donc, il va changer de position à chaque fois que vous faites pivoter votre mobile.