android Camera2 API + TextureView叠加层，可在相机预览上进行绘制

问题描述

因此，我需要覆盖camera2预览并通过在顶部叠加透明覆盖层在预览视频图像上绘制一个矩形.我从这里的基本Camera2代码开始: https://github.com/googlesamples/android-Camera2Basic

So, I need to overlay the camera2 preview and draw a rectangle on the preview video image by layering a transparent overlay on top. I started with a basic Camera2 code here: https://github.com/googlesamples/android-Camera2Basic

以上使用TextureView进行相机预览.

the above use TextureView for camera preview.

接下来，我在项目中添加了以下类

Next, I added the following class to project

private class CustomView extends SurfaceView {

    private final Paint paint;
    private final SurfaceHolder mHolder;
    private final Context context;

    public CustomView(Camera2BasicFragment context) {
        super(context.getActivity().getBaseContext());
        mHolder = getHolder();
        mHolder.setFormat(PixelFormat.TRANSPARENT);
        this.context = context.getActivity().getBaseContext();
        paint = new Paint(Paint.ANTI_ALIAS_FLAG);
        paint.setColor(Color.WHITE);
        paint.setStyle(Paint.Style.STROKE);
    }

    @Override
    protected void onDraw(Canvas canvas) {
        super.onDraw(canvas);
    }

    @Override
    public boolean onTouchEvent(MotionEvent event) {
        if (event.getAction() == MotionEvent.ACTION_DOWN) {
            invalidate();
            if (mHolder.getSurface().isValid()) {
                final Canvas canvas = mHolder.lockCanvas();
                Log.d("touch", "touchRecieved by camera");
                if (canvas != null) {
                    Log.d("touch", "touchRecieved CANVAS STILL Not Null");
                    canvas.drawColor(Color.TRANSPARENT, PorterDuff.Mode.CLEAR);
                    canvas.drawColor(Color.TRANSPARENT);
                    canvas.drawCircle(event.getX(), event.getY(), 100, paint);
                    mHolder.unlockCanvasAndPost(canvas);
                    new Handler().postDelayed(new Runnable() {
                        @Override
                        public void run() {
                            Canvas canvas1 = mHolder.lockCanvas();
                            if(canvas1 !=null){
                                canvas1.drawColor(0, PorterDuff.Mode.CLEAR);
                                mHolder.unlockCanvasAndPost(canvas1);
                            }

                        }
                    }, 1000);

                }
                mHolder.unlockCanvasAndPost(canvas);


            }
        }


        return false;
    }
}

在进行这项工作时，我需要一些帮助..显然，尚未使用新类.我还需要更新overlay xml，以在摄像头预览顶部添加第二个透明TextureView.这是我的原始布局:如果有人可以告诉我如何使新类起作用，并告诉我要添加到布局中的内容，将不胜感激.

I need some help in making this work.. Obviously the new class is not used yet. I also need to update the overlay xml to add a second transparent TextureView on top of the camera preview one. Here is my original layout:Would be very appreciated if anyone can tell me how to make the new class work, and tell me what to add to the layout.

这是fragment_camera2_basic.xml

here is fragment_camera2_basic.xml

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

    <com.example.android.camera2basic.AutoFitTextureView
        android:id="@+id/texture"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true" />

    <FrameLayout
        android:id="@+id/control"
        android:layout_width="match_parent"
        android:layout_height="112dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentStart="true"
        android:background="@color/control_background">

        <Button
            android:id="@+id/picture"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center"
            android:text="@string/picture" />

        <ImageButton
            android:id="@+id/info"
            android:contentDescription="@string/description_info"
            style="@android:style/Widget.Material.Light.Button.Borderless"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:layout_gravity="center_vertical|right"
            android:padding="20dp"
            android:src="@drawable/ic_action_info" />

    </FrameLayout>

</RelativeLayout>

和activity_camera.xml

and activity_camera.xml

<?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:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="#000"
    tools:context="com.example.android.camera2basic.CameraActivity" />

推荐答案

添加

<LinearLayout
    android:id="@+id/surface"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:orientation="vertical" />

在片段内.我已经在AutoFitTextureView和FrameLayout周围添加了RelativeLayout，但是不确定是否需要这样做.

Within the fragment. I've added a RelativeLayout around AutoFitTextureView and FrameLayout, but not sure if that is needed.

将onCreateView更改为

Change onCreateView to

View view = inflater.inflate(R.layout.fragment_camera2_basic, container, false);

LinearLayout surface = (LinearLayout)view.findViewById(R.id.surface);
surface.addView(new CustomView(this));

return view;

这篇关于android Camera2 API + TextureView叠加层，可在相机预览上进行绘制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！