How to create surfaceview with rounded corners

2019-08-30 01:18发布

问题:

I am having a difficulty to round the corners of surfaceview. I am using MjpegView (custom view that inherit from surfaceview. I tried already this solutions: 1) set background with custom drawable with round corners 2) After reading this post http://androidtutorialsandtips.blogspot.co.il/2012/01/overriding-ondraw-method-in-surfaceview.html I am not sure how to implement the round corners as I have already implemented a thread that locks the canvas.

while (mRun)
        {
            if (surfaceDone)
            {
                try
                {
                    c = mSurfaceHolder.lockCanvas();
                    synchronized (mSurfaceHolder)
                    {
                        try
                        {
                            if (mIn != null)
                            {
                                Bitmap bm = mIn.readMjpegFrame();
                                destRect = destRect(bm.getWidth(), bm.getHeight());

                                if (streamHeight == -1 && streamWidth == -1)
                                {
                                    streamWidth = bm.getWidth();
                                    streamHeight = bm.getHeight();
                                }
                                c.drawColor(Color.BLACK);
                                c.drawBitmap(bm, null, destRect, p);
                                if (showFps)
                                {
                                    p.setXfermode(mode);
                                    if (ovl != null)
                                    {
                                        height = ((ovlPos & 1) == 1) ? destRect.top : destRect.bottom - ovl.getHeight();
                                        width = ((ovlPos & 8) == 8) ? destRect.left : destRect.right - ovl.getWidth();
                                        c.drawBitmap(ovl, width, height, null);
                                    }
                                    p.setXfermode(null);
                                    frameCounter++;
                                    if ((System.currentTimeMillis() - start) >= 1000)
                                    {
                                        fps = String.valueOf(frameCounter) + "fps";
                                        frameCounter = 0;
                                        start = System.currentTimeMillis();
                                        ovl = makeFpsOverlay(overlayPaint, fps);
                                    }
                                }
                            }
                        }
                        catch (IOException e)
                        {
                        }
                    }
                }
                finally
                {
                    if (c != null) mSurfaceHolder.unlockCanvasAndPost(c);
                }
            }
        }

回答1:

If I understand your question correcly:

  1. create a <FrameLayout ...> with 2 children: the surface view and a partially transparent cover layer above it. (FrameLayout draws its children one on top of another.)

  2. draw the rounded corners on the cover layer.

That is, you will have an opaque layer above the SurfaceView and that opaque layer will have a transparent hole-with-rounded-corners in its center.

Here's an example where I cover a SurfaceView with a 50%-transparent black layer (visibility="invisible" by default) and a RelativeLayout with buttons inside.

<FrameLayout
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <SurfaceView
        android:id="@+id/camera_preview"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_centerInParent="true" />
    <View
        android:id="@+id/transparency"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:background="#80000000"
        android:visibility="invisible"
        />
    <RelativeLayout
        android:id="@+id/xxxxx"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        >
        ...