带有 AndroidView 的放大镜修改器和相机预览

Question

我想在我的相机预览中实现放大镜修改器。

我现在正在尝试：

@Composable
fun CameraScreen() {
    val previewView = remember { SurfaceView(context) }

    Box(Modifier.fillMaxSize()) {
        AndroidView(
            modifier = Modifier.fillMaxSize(),
            factory = { previewView })

        Box(
            modifier = Modifier
                .align(Alignment.Center)
                .magnifier(
                    sourceCenter = { Offset.Zero },
                    zoom = 2f,
                ),
        )
    }
}

但它只在放大镜应该在的地方画了一个框，但该框并没有放大预览。大家有什么想法吗？

Answer 1

magnifer

修改器不能直接与

AndroidView

一起使用，因为它是为可组合内容而设计的。要在相机预览上应用放大功能，请使用

TextureView

或

SurfaceView

渲染预览，并通过

AndroidView 将其集成到 Compose 中

。要进行放大，请在预览顶部叠加带有放大镜修改器的可组合项。或者，使用

Modifier.graphicsLayer

将预览捕获到可组合图层中，以实现无缝 Compose 集成。

@Composable
fun CameraScreen() {
    val context = LocalContext.current
    val lifecycleOwner = LocalLifecycleOwner.current

    // PreviewView setup
    val previewView = remember {
        PreviewView(context).apply {
            layoutParams = ViewGroup.LayoutParams(
                ViewGroup.LayoutParams.MATCH_PARENT,
                ViewGroup.LayoutParams.MATCH_PARENT
            )
        }
    }

    // Start camera with previewView
    LaunchedEffect(Unit) {
        val cameraProvider = ProcessCameraProvider.getInstance(context).get()
        val preview = Preview.Builder().build().also {
            it.setSurfaceProvider(previewView.surfaceProvider)
        }

        val cameraSelector = CameraSelector.DEFAULT_BACK_CAMERA
        cameraProvider.bindToLifecycle(lifecycleOwner, cameraSelector, preview)
    }

    // Compose layout with magnifier
    Box(Modifier.fillMaxSize()) {
        AndroidView(
            modifier = Modifier.fillMaxSize(),
            factory = { previewView }
        )

        // Apply magnifier on top of the preview
        Box(
            modifier = Modifier
                .align(Alignment.Center)
                .magnifier(
                    sourceCenter = { Offset.Zero }, // Customize based on interaction
                    zoom = 2f
                )
                .size(100.dp), // Size of the magnification effect
        )
    }
}