Android SDK - camera2 - 在 TextureView 上绘制矩形

Question

我是 android 开发的新手，我发现很难在 camera2 上找到好的示例 api。

大多数问题我都在慢慢解决，但在这个问题上我被卡住了。在默认相机中，当您触摸屏幕进行对焦时，它会暂时显示一个矩形的对焦区域。我想做类似的事情（或者在这种情况下，从完全相同的事情开始，所以我可以弄清楚）。

我在某处读到（我想是 SDK 文档中的 TextureView 页面），当它被用作相机预览时你不能在 textureview 上绘制 - 并且调用锁定方法将 return null 而不是canvas.

我在网上找到这个：https://github.com/commonsguy/vidtry/ 但我无法让它工作。我要么收到错误消息，说我的主视图无法投射到我的可绘制视图，反之亦然 - 或者我的可绘制视图在顶部并使屏幕变黑 - 或者它在底部并且不会响应触摸事件（并试图强制上面视图中的 performClick 导致崩溃。）

我卡住了！谁能给我一个解释或例子，说明我如何在事件位置上绘制我的矩形几秒钟？

谢谢！

Answer 1

我解决了 - 我必须将我的表面视图设置为 drawColor(Color.TRANSPARENT) 并带有明确的标志，一切都很好。

Answer 2

首先，对于 camera2 api android 示例，有开源 google 示例代码。 https://github.com/googlesamples/android-Camera2Basic
其次，对于要绘制矩形的部分（触摸聚焦），请按照以下步骤操作 -
- 创建自定义 class 扩展 SurfaceView。
- 调用此自定义 class 中的 onTouchListener 方法来检测手指坐标并使用 android 中的 paint class 绘制矩形。 - 在显示来自 camera2 的预览的 TextureView 上方添加此自定义 class。
- 将自定义视图变为透明。
- 当您触摸设备屏幕上的某个点时，将调用 onTouchListener，它会在您在相机预览上方添加的自定义视图 canvas 上绘制。
- 最后，清除您的 canvas 这样您就不会一直向自定义视图添加矩形，因为您在一个时间点只需要一个矩形。
- 此外，如果有一段时间没有触摸，矩形应该会消失。使用自定义视图中的处理程序执行此操作。

我正在为您提供一些经过测试的代码来执行此操作。我希望它能帮助你。祝你好运。

 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", "touchReceived by camera");
                if (canvas != null) {
                    Log.d("touch", "touchReceived 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;
    }
}

Answer 3

对于那些正在寻找完整代码的人，此示例代码在相机预览上绘制了一个小矩形。只需要在Camera2BasicFragment项目中添加surface view，修改onViewCreated函数即可。

public class Camera2BasicFragment extends Fragment
        implements View.OnClickListener, ActivityCompat.OnRequestPermissionsResultCallback {

    SurfaceView surfaceView;

    @Override
    public void onViewCreated(final View view, Bundle savedInstanceState) {
        view.findViewById(R.id.picture).setOnClickListener(this);
        view.findViewById(R.id.info).setOnClickListener(this);
        mTextureView = (AutoFitTextureView) view.findViewById(R.id.texture);

        surfaceView = (SurfaceView) view.findViewById(R.id.surfaceView);
        surfaceView.setZOrderOnTop(true);
        SurfaceHolder mHolder = surfaceView.getHolder();
        mHolder.setFormat(PixelFormat.TRANSPARENT);
        mHolder.addCallback(new SurfaceHolder.Callback() {
            @Override
            public void surfaceCreated(SurfaceHolder holder) {
                Canvas canvas = holder.lockCanvas();
                if (canvas == null) {
                    Log.e(TAG, "Cannot draw onto the canvas as it's null");
                } else {
                    Paint myPaint = new Paint();
                    myPaint.setColor(Color.rgb(100, 20, 50));
                    myPaint.setStrokeWidth(10);
                    myPaint.setStyle(Paint.Style.STROKE);
                    canvas.drawRect(100, 100, 200, 200, myPaint);

                    holder.unlockCanvasAndPost(canvas);
                }
            }

            @Override
            public void surfaceChanged(SurfaceHolder holder, int format, int width, int height) {

            }

            @Override
            public void surfaceDestroyed(SurfaceHolder holder) {

            }
        });
    }

并且fragment_camera2_basic.xml文件有一个额外的表面视图

<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" />
        <SurfaceView
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:id="@+id/surfaceView"/>

        <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>

Android SDK - camera2 - 在 TextureView 上绘制矩形

Android SDK - camera2 - Draw rectangle over TextureView

android

android-layout

android-camera

android-canvas

textureview