如何在Android相机预览中绘制矩形

Question

实际上我不知道如何在相机预览中实现矩形。一切都运行良好，但我不知道如何像这个链接那样放置矩形边框。请有经验的人帮帮我。谢谢。

package com.example.redsignal.eventbizz;
public class CameraActivity extends AppCompatActivity {

public static final String FRAGMENT_TAG = "camera";
private static final int REQUEST_CAMERA_PERMISSIONS = 931;
private static final int REQUEST_PREVIEW_CODE = 1001;
@Bind(R.id.settings_view)
CameraSettingsView settingsView;
@Bind(R.id.flash_switch_view)
FlashSwitchView flashSwitchView;
@Bind(R.id.front_back_camera_switcher)
CameraSwitchView cameraSwitchView;
@Bind(R.id.record_button)
RecordButton recordButton;
@Bind(R.id.cameraLayout)
View cameraLayout;
Button btn_orc, btn_qr;
@Override
protected void onCreate(Bundle savedInstanceState) {
    super.onCreate(savedInstanceState);
    setContentView(R.layout.activity_camera);
    ActionBar actionBar = getSupportActionBar();
    actionBar.hide();
    ButterKnife.bind(this);
    btn_orc = (Button) findViewById(R.id.btn_orc);
    btn_orc.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View v) {
            Intent intent = new Intent(CameraActivity.this, CameraActivity.class);
            startActivity(intent);
            TastyToast.makeText(CameraActivity.this, "BCR Mode", TastyToast.LENGTH_LONG, TastyToast.INFO);
            finish();
        }
    });
    btn_qr = (Button) findViewById(R.id.btn_qr);
    btn_qr = (Button) findViewById(R.id.btn_qr);
    btn_qr.setOnClickListener(new View.OnClickListener() {
        @Override
        public void onClick(View view) {
            Intent intent = new Intent(CameraActivity.this, QRCameraActivity.class);
            startActivity(intent);
            TastyToast.makeText(CameraActivity.this, "QR Mode", TastyToast.LENGTH_LONG, TastyToast.INFO);
            finish();
        }
    });
    if (Build.VERSION.SDK_INT > 15) {
        final String[] permissions = {
                Manifest.permission.CAMERA,
                Manifest.permission.RECORD_AUDIO,
                Manifest.permission.WRITE_EXTERNAL_STORAGE,
                Manifest.permission.READ_EXTERNAL_STORAGE};

        final List<String> permissionsToRequest = new ArrayList<>();
        for (String permission : permissions) {
            if (ActivityCompat.checkSelfPermission(this, permission) != PackageManager.PERMISSION_GRANTED) {
                permissionsToRequest.add(permission);
            }
        }
        if (!permissionsToRequest.isEmpty()) {
            ActivityCompat.requestPermissions(this, permissionsToRequest.toArray(new String[permissionsToRequest.size()]), REQUEST_CAMERA_PERMISSIONS);
        } else addCamera();
    } else {
        addCamera();
    }
}


@OnClick(R.id.flash_switch_view)
public void onFlashSwitcClicked() {
    final CameraFragmentApi cameraFragment = getCameraFragment();
    if (cameraFragment != null) {
        cameraFragment.toggleFlashMode();
    }
}

@OnClick(R.id.front_back_camera_switcher)
public void onSwitchCameraClicked() {
    final CameraFragmentApi cameraFragment = getCameraFragment();
    if (cameraFragment != null) {
        cameraFragment.switchCameraTypeFrontBack();
    }
}

@OnClick(R.id.record_button)
public void onRecordButtonClicked() {
    final CameraFragmentApi cameraFragment = getCameraFragment();
    if (cameraFragment != null) {
        cameraFragment.takePhotoOrCaptureVideo(new CameraFragmentResultAdapter() {

                                                   @Override
                                                   public void onPhotoTaken(byte[] bytes, String filePath) {
                                                       Toast.makeText(getBaseContext(), "onPhotoTaken " + filePath, Toast.LENGTH_SHORT).show();
                                                   }
                                               },
                "/storage/self/primary",
                "photo0");
    }
}

@OnClick(R.id.settings_view)
public void onSettingsClicked() {
    final CameraFragmentApi cameraFragment = getCameraFragment();
    if (cameraFragment != null) {
        cameraFragment.openSettingDialog();
    }
}



@Override
public void onRequestPermissionsResult(int requestCode, @NonNull String[] permissions, @NonNull int[] grantResults) {
    super.onRequestPermissionsResult(requestCode, permissions, grantResults);
    if (grantResults.length != 0) {
        addCamera();
    }
}

@RequiresPermission(Manifest.permission.CAMERA)
public void addCamera() {
    cameraLayout.setVisibility(View.GONE);
    cameraLayout.setVisibility(View.VISIBLE);

    final CameraFragment cameraFragment = CameraFragment.newInstance(new Configuration.Builder()
            .setCamera(Configuration.CAMERA_FACE_REAR).build());
    getSupportFragmentManager().beginTransaction()
            .replace(R.id.content, cameraFragment, FRAGMENT_TAG)
            .commitAllowingStateLoss();

    if (cameraFragment != null) {


        cameraFragment.setStateListener(new CameraFragmentStateAdapter() {

            @Override
            public void onCurrentCameraBack() {
                cameraSwitchView.displayBackCamera();
            }

            @Override
            public void onCurrentCameraFront() {
                cameraSwitchView.displayFrontCamera();
            }

            @Override
            public void onFlashAuto() {
                flashSwitchView.displayFlashAuto();
            }

            @Override
            public void onFlashOn() {
                flashSwitchView.displayFlashOn();
            }

            @Override
            public void onFlashOff() {
                flashSwitchView.displayFlashOff();
            }



            @Override
            public void shouldRotateControls(int degrees) {
                ViewCompat.setRotation(cameraSwitchView, degrees);
                ViewCompat.setRotation(flashSwitchView, degrees);
            }

            @Override
            public void onRecordStatePhoto() {
                recordButton.displayPhotoState();
            }

        });

        cameraFragment.setControlsListener(new CameraFragmentControlsAdapter() {
            @Override
            public void lockControls() {
                cameraSwitchView.setEnabled(false);
                recordButton.setEnabled(false);
                settingsView.setEnabled(false);
                flashSwitchView.setEnabled(false);
            }

            @Override
            public void unLockControls() {
                cameraSwitchView.setEnabled(true);
                recordButton.setEnabled(true);
                settingsView.setEnabled(true);
                flashSwitchView.setEnabled(true);
            }

            @Override
            public void allowCameraSwitching(boolean allow) {
                cameraSwitchView.setVisibility(allow ? View.VISIBLE : View.GONE);
            }

            @Override
            public void allowRecord(boolean allow) {
                recordButton.setEnabled(allow);
            }

        });

    }
}

private CameraFragmentApi getCameraFragment() {
    return (CameraFragmentApi) getSupportFragmentManager().findFragmentByTag(FRAGMENT_TAG);
}

  <?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:tools="http://schemas.android.com/tools"
    android:orientation="vertical"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <FrameLayout
        android:id="@+id/content"
        android:layout_width="match_parent"
        android:layout_height="match_parent"/>


    <RelativeLayout
        android:id="@+id/cameraLayout"
        android:visibility="gone"
        tools:visibility="visible"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        >

        <RelativeLayout
            android:layout_width="match_parent"
            android:layout_height="60dp"
            android:layout_alignParentEnd="true"
            android:layout_alignParentRight="true"
            android:layout_alignParentTop="true"
            android:paddingTop="10dp">

            <com.github.florent37.camerafragment.widgets.CameraSettingsView
                android:id="@+id/settings_view"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_alignParentLeft="true"
                android:layout_centerVertical="true"
                android:layout_marginLeft="15dp"
                tools:ignore="RtlHardcoded" />

            <com.github.florent37.camerafragment.widgets.FlashSwitchView
                android:id="@+id/flash_switch_view"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_centerInParent="true" />

            <com.github.florent37.camerafragment.widgets.CameraSwitchView
                android:id="@+id/front_back_camera_switcher"
                android:layout_width="40dp"
                android:layout_height="40dp"
                android:layout_alignParentRight="true"
                android:layout_centerVertical="true"
                android:layout_marginRight="15dp"
                tools:ignore="RtlHardcoded" />

        </RelativeLayout>

        <!--android:background="#82000000"-->
        <RelativeLayout
            android:id="@+id/record_panel"
            android:layout_width="match_parent"
            android:layout_height="80dp"
            android:background="@android:color/transparent"
            android:layout_alignParentBottom="true"
            android:layout_alignParentLeft="true"
            android:layout_alignParentStart="true">

            <com.github.florent37.camerafragment.widgets.RecordButton
                android:id="@+id/record_button"
                android:layout_width="60dp"
                android:layout_height="60dp"
                android:layout_centerInParent="true"
                android:layout_marginLeft="50dp"
                android:layout_marginRight="50dp" />
            <Button
                android:id="@+id/btn_qr"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_marginTop="30dp"
                android:layout_toLeftOf="@+id/btn_orc"
                android:layout_toStartOf="@+id/btn_orc"
                android:background="@drawable/qr_scan" />

            <Button
                android:id="@+id/btn_orc"
                android:layout_width="30dp"
                android:layout_height="30dp"
                android:layout_alignParentEnd="true"
                android:layout_alignParentRight="true"
                android:layout_marginLeft="7dp"
                android:layout_marginRight="5dp"
                android:layout_alignTop="@+id/btn_qr"
                android:background="@drawable/bcr_scan"
                tools:ignore="RtlHardcoded" />

 </RelativeLayout>

    </RelativeLayout>

</FrameLayout>

- Rawal Hussain Khan Ali

---

链接不可用。您是要在预览区域上绘制一个矩形，还是希望仅在矩形内部扫描二维码？ - Katharina

只需在预览上绘制一个矩形即可。 - Rawal Hussain Khan Ali

实际上我想要一个名片扫描的预览。 - Rawal Hussain Khan Ali

就像上面的例子一样 - Rawal Hussain Khan Ali

好的 - 你能发一下你的布局文件吗？ - Katharina

Answer 1

为了实现这个功能，您可以将相机预览放入一个FrameLayout中，并在相机预览上方放置一个具有此矩形的透明View。

首先，我们将创建矩形：

<?xml version="1.0" encoding="utf-8"?>
<shape xmlns:android="http://schemas.android.com/apk/res/android"
    android:shape="rectangle">
    <stroke
            android:width="1dp"
            android:color="@color/white"
            android:dashGap="8dp"
            android:dashWidth="8dp" />

    <corners android:radius="8dp" />

然后你可以将这个视图放在你的预览之上：

<?xml version="1.0" encoding="utf-8"?>
<FrameLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

        <!-- this is your preview - whatever it looks like -->
        <View   
            android:layout_width="match_parent"
            android:layout_height="match_parent" />   

         <!-- overlay - customize padding and stuff  -->
         <View   
            android:layout_width="match_parent" 
            android:layout_height="match_parent"
            padding="32dp"
            android:background="@drawable/your_shape" />  
</FrameLayout>

编辑：

看完你的布局后，这个任务可以通过放置此视图来解决：

     <View
        padding="32dp"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_above="@id/record_panel"
        android:layout_alignParentTop="true"
        android:background="@drawable/your_shape" />

作为布局中ID为cameraLayout的最后一项。

- Katharina

---

你需要用你的布局替换第一个视图 - 我不知道它是什么样子的。 - Katharina

我想像这样检测我的卡片 http://en.ccint.com/static/images/move/qnw_1.mp4 - Rawal Hussain Khan Ali

查看这个答案：https://dev59.com/an3aa4cB1Zd3GeqPb1ZS#22250026 或者直接谷歌搜索 - 我也是这么做的 ;) - Katharina

你能帮我看一下视图吗？ - Rawal Hussain Khan Ali

真棒的解决方案，喜欢它的简单易用 :) - Rémi P

Answer 2

为了在相机预览上绘制任何类型的视图，可以使用覆盖层，即绘制任何形状的画布，例如对于手机，可以使用特定颜色的矩形画布，此覆盖层将覆盖整个屏幕。

现在通过更改画布的 alpha 值使其半透明。

现在绘制另一个所需形状的画布，如圆形和矩形，并使其透明。

代码如下：

   public class DrawOnTop extends View {
    int screenCenterX = 0;
    int screenCenterY = 0;
    int radius = 50;

    public DrawOnTop(Context context, int screenCenterX, int screenCenterY, int radius) {
        super(context);
        this.screenCenterX = screenCenterX;
        this.screenCenterY = screenCenterY;
        this.radius = radius;
    }

    @Override
    protected void onDraw(Canvas canvas) {
        Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setColor(getResources().getColor(R.color.white));
        paint.setAlpha(130);
        paint.setStyle(Paint.Style.FILL);
        canvas.drawPaint(paint);
        paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
        canvas.drawCircle(screenCenterX, screenCenterY, radius, paint);
        super.onDraw(canvas);
    }
} 

- Sahil Bansal