如何在Jetpack Compose中实现带透明中间框的相机取景布局？

核心思路是通过Box布局将相机预览与自定义遮罩层叠加，遮罩层整体为半透明黑色，中间保留一个透明方框用于取景。

完整实现代码 #

@Composable
fun CameraView() {
    Box(modifier = Modifier.fillMaxSize()) {
        // 相机预览（替换为你实际的相机预览实现）
        CameraPreview(modifier = Modifier.fillMaxSize())

        // 自定义取景遮罩层
        ViewfinderOverlay(
            modifier = Modifier.fillMaxSize(),
            boxWidth = 280.dp,
            boxHeight = 180.dp
        )

        // 顶部返回栏（保留你已有的实现逻辑）
        TopAppBar(
            title = { Text("拍照") },
            navigationIcon = {
                IconButton(onClick = { /* 返回逻辑 */ }) {
                    Icon(Icons.Default.ArrowBack, contentDescription = "返回")
                }
            },
            backgroundColor = Color.Transparent,
            elevation = 0.dp
        )

        // 提示文字（保留你已有的样式和位置）
        Text(
            text = "请将证件放入方框内",
            color = Color.White,
            modifier = Modifier
                .align(Alignment.TopCenter)
                .padding(top = 80.dp)
        )

        // 底部拍照按钮（保留你已有的交互逻辑）
        IconButton(
            onClick = { /* 拍照逻辑 */ },
            modifier = Modifier
                .align(Alignment.BottomCenter)
                .padding(bottom = 32.dp)
                .size(64.dp)
                .background(Color.White.copy(alpha = 0.8f), shape = CircleShape)
        ) {
            Icon(Icons.Default.Camera, contentDescription = "拍照", tint = Color.Black)
        }
    }
}

@Composable
fun ViewfinderOverlay(
    modifier: Modifier = Modifier,
    boxWidth: Dp = 300.dp,
    boxHeight: Dp = 200.dp,
    overlayColor: Color = Color.Black.copy(alpha = 0.7f)
) {
    val density = LocalDensity.current
    val boxWidthPx = with(density) { boxWidth.toPx() }
    val boxHeightPx = with(density) { boxHeight.toPx() }

    Canvas(modifier = modifier) {
        // 计算中间方框的居中位置
        val boxLeft = (size.width - boxWidthPx) / 2
        val boxTop = (size.height - boxHeightPx) / 2

        // 创建遮罩路径：整个画布区域减去中间方框区域
        val maskPath = Path().apply {
            addRect(Rect(0f, 0f, size.width, size.height))
            addRect(Rect(boxLeft, boxTop, boxLeft + boxWidthPx, boxTop + boxHeightPx))
            fillType = PathFillType.EvenOdd
        }

        // 绘制半透明遮罩
        drawPath(
            path = maskPath,
            color = overlayColor
        )

        // 可选：绘制白色方框边框
        drawRect(
            color = Color.White,
            topLeft = Offset(boxLeft, boxTop),
            size = Size(boxWidthPx, boxHeightPx),
            style = Stroke(width = 2.dp.toPx())
        )
    }
}

// 相机预览占位组件（替换为你实际的CameraX或其他相机库预览实现）
@Composable
fun CameraPreview(modifier: Modifier) {
    Box(modifier = modifier) {
        Text(text = "相机预览区域", color = Color.White, modifier = Modifier.align(Alignment.Center))
    }
}

关键细节说明 #

• ViewfinderOverlay通过Canvas的Path差集运算实现遮罩效果，EvenOdd填充模式会让路径重叠区域变为透明
• 方框尺寸支持通过参数自定义，适配不同取景需求
• 原有组件（相机预览、返回栏等）层级保持不变，仅在相机预览上层叠加遮罩层
• 可选的白色边框能强化取景框的视觉引导

内容的提问来源于stack exchange，提问作者Kunal Kalwar