如何在中心绘制一个透明矩形？

Question

我正在使用 CameraX 扫描二维码。对于 UI 侧，我需要在中心创建一个半透明的黑色背景和一个透明框（给定侧[或给定填充，如果侧可以计算]）。

我尝试在 Whosebug 上使用不同的解决方案，但由于某种原因无法实现。目前，我正在尝试使用此解决方案来创建给定边 (width/height) 的正方形，但我无法这样做。我尝试修改此处第一个答案中提供的代码，但它没有按预期工作。

代码：

import android.content.Context;
import android.graphics.Canvas;
import android.graphics.Color;
import android.graphics.Paint;
import android.graphics.Path;
import android.graphics.RectF;
import android.util.AttributeSet;
import android.view.View;

public class QROverlay extends View {
    private Paint mTransparentPaint;
    private Paint mSemiBlackPaint;
    private RectF rectF;
    private Path mPath = new Path();

    private int cx = 0;
    private int cy = 0;
    private final int SIDE = 10;

    public QROverlay(Context context) {
        super(context);
        initPaints();
    }

    public QROverlay(Context context, AttributeSet attrs) {
        super(context, attrs);
        initPaints();
    }

    public QROverlay(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        initPaints();
    }

    private void initPaints() {
        mTransparentPaint = new Paint();
        mTransparentPaint.setColor(Color.TRANSPARENT);
        mTransparentPaint.setStrokeWidth(10);

        mSemiBlackPaint = new Paint();
        mSemiBlackPaint.setColor(Color.parseColor("#A6000000"));
        mSemiBlackPaint.setStrokeWidth(10);
    }

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

        mPath.reset();

        RectF rectF = new RectF(
                getLeft() + 100, getTop() + 100, getRight() - 100, getBottom() - 100
        );

//        mPath.addCircle(canvas.getWidth() / 3, canvas.getHeight() / 3, 0, Path.Direction);
        mPath.addRect(rectF, Path.Direction.CW);
        mPath.setFillType(Path.FillType.INVERSE_EVEN_ODD);

        canvas.drawRect(rectF, mTransparentPaint);

        canvas.drawPath(mPath, mSemiBlackPaint);
        canvas.clipPath(mPath);
        canvas.drawColor(Color.parseColor("#A6000000"));
    }
}

有人可以帮我解决这个代码吗？

Answer 1

在绘制此视图时，有许多方法和许多不同的方面需要考虑。我通常做的是检查一些 qr 扫描仪库，看看它们是如何实现这个特定视图的。然后您可以创建大致相同的视图并将其添加到相机预览视图的顶部。

例如，可以找到此类视图的完整代码 here together with this。

Answer 2

如果您使用的是 Jetpack Compose 下面介绍如何绘制带有淡入淡出动画的矩形。

@Composable
fun CustomRectangle() {
    val alpha = rememberInfiniteTransition()
    val alphaState by alpha.animateFloat(
        initialValue = 0.0f,
        targetValue = 1f,
        animationSpec = infiniteRepeatable(
            animation = tween(durationMillis = 2000),
            repeatMode = RepeatMode.Reverse
        )
    )
    Canvas(modifier = Modifier.fillMaxSize()) {
        val canvasWidth = size.width
        val canvasHeight = size.height
        var rectangleWidth = 500f
        var rectangleHeight = 700f

        drawRect(
            color = Color.Black,
            topLeft = Offset(
                (canvasWidth / 2) - (rectangleWidth / 2),
                (canvasHeight / 2) - (rectangleHeight / 2)
            ),
            size = Size(width = rectangleWidth, height = rectangleHeight),
            alpha = alphaState
        )
    }
}

如何在中心绘制一个透明矩形？

How to draw a transparent rectangle in the center?

android

android-layout

android-canvas

android-camerax