Question

我正在使用以下代码制作基于相机的应用。但是预览窗口不是固定的，很容易在其替换的屏幕上拖动拖动。 fab buttons也在预览窗口的后面。如何将它们彼此固定在屏幕上。

home.ts

 constructor(public navCtrl: NavController, private cameraPreview: CameraPreview) {
this.startCamera();
  }    
  startCamera() {
    const cameraPreviewOpts: CameraPreviewOptions = {
      x: 40,
      y: 40,
      width: window.screen.width-1,
      height: window.screen.height-1,
      camera: 'rear',
      tapPhoto: true,
      previewDrag: true,
      toBack: false,
      alpha: 1
    };

    this.cameraPreview.startCamera(cameraPreviewOpts).then(
      (res) => {
        console.log(res);
      },
      (err) => {
        console.log(err);
    });
  }

  showCamera(){
    this.cameraPreview.show();
  }

  stopCamera(){
    this.cameraPreview.stopCamera();
  }

  takePicture(){
    const pictureOpts: CameraPreviewPictureOptions = {
      width: 1280,
      height: 1280,
      quality: 85
    }

    this.cameraPreview.takePicture(pictureOpts).then(function(imgData){
      console.log('Picture taken');
      (<HTMLInputElement>document.getElementById('previewPicture')).src = 'data:image/jpeg;base64,' + imgData;
    }, (err) => {
      console.log(err);
    });
  }
}

home.html：

<ion-content padding>

<ion-fab right bottom>
  <button ion-fab color="primary" (click)="takePicture()">
    <ion-icon name="md-camera"></ion-icon>
  </button>
</ion-fab>
</ion-content>

Answer 1

基本上，您需要将摄像机预览“发送”到页面的后面并禁用拖动选项。
试试这个：

ViewController

您的html代码似乎还不错，因此您的“ fab”按钮应该可见。如果您想在整个屏幕上使用预览，请同时更改const cameraPreviewOpts: CameraPreviewOptions = { x: 40, y: 40, width: window.screen.width-1, height: window.screen.height-1, camera: 'rear', tapPhoto: true, previewDrag: false, toBack: true, alpha: 1 };和width（删除height）， -1和x确定预览窗口的开始位置，因此，如果要在整个屏幕上使用它，请设置为y。
希望对您有帮助！

如何修复预览相机的预览窗口和fab按钮？

1 个答案: