Question

我正在绘制一个矩形填充外的矩形。我尝试了一些这个。但是不能得到我所期望的完美的。

这就是我的预期。

Viewfinder

我试过

    Point pTopLeft = new Point();
    Point pBotRight = new Point();
    pTopLeft.x = 100;
    pTopLeft.y = 100;
    pBotRight.x = canvas.getWidth() - 100;
    pBotRight.y = canvas.getHeight() - 100;
    Rect above = new Rect(0, 0, canvas.getWidth(), pTopLeft.y);
    paint.setColor(Color.parseColor("#77000000"));
    canvas.drawRect(above, paint);
    Rect left = new Rect(0, pTopLeft.y, pTopLeft.x, pBotRight.y);
    paint.setColor(Color.parseColor("#77000000"));

    canvas.drawRect(left, paint);
    Rect right = new Rect(pBotRight.x, pTopLeft.y, canvas.getWidth(),
            pBotRight.y);
    paint.setColor(Color.parseColor("#77000000"));
    canvas.drawRect(right, paint);
    Rect bottom = new Rect(0, pBotRight.y, canvas.getWidth(),
            canvas.getHeight());

    paint.setColor(Color.parseColor("#77000000"));
    Paint paint_text = new Paint();
    paint_text.setColor(Color.WHITE);
    paint_text.setTextSize(50);
    paint_text.setTextAlign(Align.CENTER);

    canvas.drawText("Position Card in this Frame", canvas.getWidth() / 2,
            canvas.getHeight() - 30, paint_text);
    canvas.drawRect(bottom, paint);

得到这样的

enter image description here

但是我想绘制矩形并填充边界外以实现圆角边框。我该怎么办？

修改的当我试图一个一个地绘制矩形。布局是这样的..

enter image description here

我不能给Color.TRANSPARENT中心矩形完全转移第二个矩形..

Answer 1

我仍然不完全确定你要完成什么。您显示的形状可以如下绘制：

// set up some constants
int w = canvas.getWidth();
int h = canvas.getHeight();
RectF rect = new RectF(100, 100, w - 100, h - 100);
float radius = 10.0f; // should be retrieved from resources and defined as dp
float borderWidth = 2.0f; // ditto
int innerRectFillColor = 0x33000000; // or whatever shade it should be

// first fill the interior
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setColor(innerRectFillColor);
paint.setStyle(Paint.Style.FILL);
canvas.drawRoundRect(rect, radius, radius, paint);
// then draw the border
paint.setColor(Color.WHITE);
paint.setStrokeWidth(borderWidth);
paint.setStyle(Paint.Style.STROKE);
canvas.drawRoundRect(rect, radius, radius, paint);

如果您想要围绕一个洞绘制（因此背景显示通过），绘制周围矩形的技巧将无法工作，因为圆角（边框也使其更复杂）。相反，您可以创建一个具有透明孔的单独Bitmap，然后绘制它。您需要使用CLEAR的Porter-Duff传输模式在位图中打孔：

// same constants as above except innerRectFillColor is not used. Instead:
int outerFillColor = 0x77000000;

// first create an off-screen bitmap and its canvas
Bitmap bitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888);
Canvas auxCanvas = new Canvas(bitmap);

// then fill the bitmap with the desired outside color
Paint paint = new Paint(Paint.ANTI_ALIAS_FLAG);
paint.setColor(outerFillColor);
paint.setStyle(Paint.Style.FILL);
auxCanvas.drawPaint(paint);

// then punch a transparent hole in the shape of the rect
paint.setXfermode(new PorterDuffXfermode(PorterDuff.Mode.CLEAR));
auxCanvas.drawRoundRect(rect, radius, radius, paint);

// then draw the white rect border (being sure to get rid of the xfer mode!)
paint.setXfermode(null);
paint.setColor(Color.WHITE);
paint.setStyle(Paint.Style.STROKE);
auxCanvas.drawRoundRect(rect, radius, radius, paint);

// finally, draw the whole thing to the original canvas
canvas.drawBitmap(bitmap, 0, 0, paint);

Answer 2

以下是我从背景中打出一个圆角矩形窗口的方法。实际上，您正在中心窗口周围绘制四个矩形，然后使用RoundRectShape填充该窗口，该RoundRectShape的外半径为0，内边缘为圆形边缘。

    Rect frame = new Rect(left, top, right, bottom); // Window location on screen
    int width = canvas.getWidth();
    int height = canvas.getHeight();


    paint.setColor(maskColor); // Make sure your mask is semi-transparent

    // Draw four bounding rectangles  
    canvas.drawRect(0, 0, width, frame.top, paint); 
    canvas.drawRect(0, frame.top, frame.left, frame.bottom + 1, paint);  
    canvas.drawRect(frame.right + 1, frame.top, width, frame.bottom + 1, paint);
    canvas.drawRect(0, frame.bottom + 1, width, height, paint);

    // Create rounded rectangle to fill window 
    float outerRadii[] = {0, 0, 0, 0, 0, 0, 0, 0}; // The outside edge is just a rectangle
    float innerRadii[] = {8, 8, 8, 8, 8, 8, 8, 8}; // The inside edge is rounded
    RoundRectShape roundRect = new RoundRectShape(outerRadii, new RectF(5,5,5,5), innerRadii); // We'll stick this shape into the frame we made

    roundRect.resize(frame.width()+1, frame.height()+1); // Adjust size to match the punched-out frame 
    canvas.save();
    canvas.translate(frame.left, frame.top); // The RoundRectShape draws to the canvas at (0,0), so we need to offset the canvas, draw, then restore
    roundRect.draw(canvas, paint);
    canvas.restore();

这是结果：

http://i.stack.imgur.com/4qdTw.png

Answer 3

您可以获得下一个结果：

我创建客户背景视图

class CameraShapeView @JvmOverloads constructor(
    context: Context,
    attrs: AttributeSet? = null
) : View(context, attrs) {

    private val outBackground: Paint = Paint().apply {
        color = ContextCompat.getColor(context, R.color.feature_identification_camera_document_background_color)
        style = Paint.Style.FILL
    }
    private val frameStroke: Paint = Paint().apply {
        color = Color.WHITE
        strokeWidth = 1f.toPx
        style = Paint.Style.STROKE
    }
    private val outPath = Path()
    private val framePath = Path()
    private val frameRect = RectF()

    @SuppressLint("DrawAllocation")
    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)

        outPath.reset()
        framePath.reset()

        val height = height.toFloat()
        val width = width.toFloat()

        outPath.apply {
            moveTo(0f, 0f)
            lineTo(0f, height)
            lineTo(width, height)
            lineTo(width, 0f)
            fillType = Path.FillType.EVEN_ODD
        }

        frameRect.apply {
            left = 30f.toPx
            top = (height / 2) - 300f
            right = width - 30f.toPx
            bottom = (height / 2) + 300f
        }

        framePath.addRoundRect(
            frameRect,
            16f.toPx,
            16f.toPx,
            Path.Direction.CW
        )
        outPath.addPath(framePath)
        canvas.drawPath(outPath, outBackground)
        canvas.drawPath(framePath, frameStroke)
    }
}

我的布局：

<androidx.constraintlayout.widget.ConstraintLayout 
    xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="?colorPrimary"
    android:fitsSystemWindows="true">

    <androidx.camera.view.PreviewView
        android:id="@+id/preview_view"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:fitsSystemWindows="true"
        app:captureMode="image"
        app:flash="off"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent"
        app:lensFacing="back"
        app:pinchToZoomEnabled="true"
        app:scaleType="fillCenter" />

    <CameraShapeView
        android:id="@+id/camera_shape_view"
        android:layout_width="0dp"
        android:layout_height="0dp"
        android:fitsSystemWindows="true"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent"
        app:layout_constraintTop_toTopOf="parent" />

    <ImageView
        android:id="@+id/capture_btn"
        android:layout_width="72dp"
        android:layout_height="72dp"
        android:layout_marginBottom="48dp"
        android:background="?selectableItemBackgroundBorderless"
        android:src="@drawable/feature_identification_camera_shape_take_filled"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintEnd_toEndOf="parent"
        app:layout_constraintStart_toStartOf="parent" />

</androidx.constraintlayout.widget.ConstraintLayout>

捕获按钮图像

<?xml version="1.0" encoding="utf-8"?>
<vector xmlns:android="http://schemas.android.com/apk/res/android"
    android:width="72dp"
    android:height="72dp"
    android:viewportWidth="71"
    android:viewportHeight="71">

    <path
        android:pathData="M 35.5 1 C 54.5538238692 1 70 16.4461761308 70 35.5 C 70 54.5538238692 54.5538238692 70 35.5 70 C 16.4461761308 70 1 54.5538238692 1 35.5 C 1 16.4461761308 16.4461761308 1 35.5 1 Z"
        android:strokeWidth="2"
        android:strokeColor="#ffffff" />
    <path
        android:fillColor="#ffffff"
        android:pathData="M 35.4994 5.9165 C 51.8378054397 5.9165 65.0827 19.1613945603 65.0827 35.4998 C 65.0827 51.8382054397 51.8378054397 65.0831 35.4994 65.0831 C 19.1609945603 65.0831 5.9161 51.8382054397 5.9161 35.4998 C 5.9161 19.1613945603 19.1609945603 5.9165 35.4994 5.9165 Z" />

</vector>

全屏截图

使用填充外边界绘制矩形

3 个答案: