如何在 PreviewView Android Compose 中绘制抠图？

Question

我正在创建一个 QR 扫描仪，其中预览视图除了中心方形部分之外都是模糊的，我能够模糊 PreviewView，但无法想出一种方法来取消模糊中心切口部分。

  AndroidView(
            modifier = Modifier.fillMaxSize(),
            factory = { context ->

                val previewView = PreviewView(context).apply {
                    setRenderEffect( RenderEffect.createBlurEffect(
                        26f, 26f,Shader.TileMode.CLAMP))
                    implementationMode = PreviewView.ImplementationMode.COMPATIBLE

                }

                val preview = Preview.Builder().build()

                val selector = CameraSelector.Builder().requireLensFacing(CameraSelector.LENS_FACING_BACK).build()

                preview.setSurfaceProvider(previewView.surfaceProvider)


                val imageAnalysis = ImageAnalysis.Builder().setTargetResolution(
                    Size(
                        previewView.width, previewView.height
                    )
                ).setBackpressureStrategy(ImageAnalysis.STRATEGY_KEEP_ONLY_LATEST).build()

                imageAnalysis.setAnalyzer(
                    ContextCompat.getMainExecutor(context),
                    QrCodeAnalyzer { result ->
                        onScan(result)
                    })
                try {
                    camera = cameraProviderFuture.get().bindToLifecycle(
                        lifecycleOwner, selector, preview, imageAnalysis, imageCapture
                    )
                } catch (e: Exception) {
                    e.printStackTrace()
                }

                previewView
            },
        )
        if (overlay != null) {
            overlay()
        }

Answer 1

父组件：

          Box(contentAlignment = Alignment.Center) {
                CameraView()
                ScannerArea(modifier = Modifier.fillMaxSize())
                //some buttons (flash, take photo)
                    ....
            }

扫描仪区域：

@Composable
fun ScannerArea(
    modifier: Modifier,
    horizontalPadding: Dp = 36.dp,
    scannerHeight: Dp = 280.dp,
    scannerCornerRadius: Dp = 8.dp,
    scannerStrokeWidth: Dp = 2.dp,
    scannerColor: Color = Color(0xFFFFFFFFF),
    darkTint: Color = Color(0x40000000)
) {
    Canvas(modifier = modifier) {
        val horizontalPaddingPx = horizontalPadding.toPx()
        val scannerHeightPx = scannerHeight.toPx()
        val scannerCornerRadiusPx = scannerCornerRadius.toPx()
        val scannerStrokeWidthPx = scannerStrokeWidth.toPx()
        val scannerPath = getScannerPath(
            size = size,
            scannerHeight = scannerHeightPx,
            horizontalPadding = horizontalPaddingPx,
            scannerCornerRadius = scannerCornerRadiusPx
        )
        clipPath(path = scannerPath, clipOp = ClipOp.Difference) {
            drawRect(color = darkTint, size = size)
        }
        drawPath(
            path = scannerPath,
            color = scannerColor,
            style = Stroke(width = scannerStrokeWidthPx)
        )
    }
}

private fun getScannerPath(
    size: Size,
    scannerHeight: Float,
    horizontalPadding: Float,
    scannerCornerRadius: Float
) = Path().apply {
    moveTo(
        x = horizontalPadding + scannerCornerRadius,
        y = size.center.y - scannerHeight / 2f
    )
    lineTo(
        x = size.width - horizontalPadding - scannerCornerRadius,
        y = size.center.y - scannerHeight / 2f
    )
    quadraticBezierTo(
        x1 = size.width - horizontalPadding,
        y1 = size.center.y - scannerHeight / 2f,
        x2 = size.width - horizontalPadding,
        y2 = size.center.y - scannerHeight / 2f + scannerCornerRadius
    )
    lineTo(
        x = size.width - horizontalPadding,
        y = size.center.y + scannerHeight / 2f - scannerCornerRadius
    )
    quadraticBezierTo(
        x1 = size.width - horizontalPadding,
        y1 = size.center.y + scannerHeight / 2f,
        x2 = size.width - scannerCornerRadius - horizontalPadding,
        y2 = size.center.y + scannerHeight / 2f
    )
    lineTo(
        x = horizontalPadding + scannerCornerRadius,
        y = size.center.y + scannerHeight / 2f
    )
    quadraticBezierTo(
        x1 = horizontalPadding,
        y1 = size.center.y + scannerHeight / 2f,
        x2 = horizontalPadding,
        y2 = size.center.y + scannerHeight / 2f - scannerCornerRadius
    )
    lineTo(
        x = horizontalPadding,
        y = size.center.y - scannerHeight / 2f + scannerCornerRadius
    )
    quadraticBezierTo(
        x1 = horizontalPadding,
        y1 = size.center.y - scannerHeight / 2f,
        x2 = horizontalPadding + scannerCornerRadius,
        y2 = size.center.y - scannerHeight / 2f
    )
}