0

我是jetpack compose桌面的新手。我的问题是我想用我的网络摄像头的实时流绘制一个 jpanel，并且在顶部应该有一个带有按钮的叠加层，这些按钮是组成组件。我尝试了几种方法来完成此操作，但即使我为 jpanel 和叠加层定义了 z-index，jpanel 似乎总是被绘制在顶部。

这是我目前使用以下代码得到的结果：

val webcam: Webcam? = Webcam.getDefault()

@Preview
@Composable
fun CameraView()
{
  Cam()
}

@Preview
@Composable
fun Cam()
{
   Box {
    Column(modifier = Modifier.fillMaxSize(), verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally
    ) {
        webcam?.let {
            webcam.viewSize = Dimension(640, 480)

            val webcamPanel = WebcamPanel(webcam)
            webcamPanel.isFPSDisplayed = true
            webcamPanel.isImageSizeDisplayed = true

            SwingPanel(background = Color.White, modifier = Modifier.fillMaxSize(), factory = {
                    JPanel().apply {
                    layout = BorderLayout()

                    val topPanel = ComposePanel()
                    topPanel.size = Dimension(75, 75)
                    val bottomPanel = ComposePanel()
                    bottomPanel.size = Dimension(100, 100)

                    topPanel.setContent { TopOverlay() }
                    bottomPanel.setContent { BottomOverlay() }

                    add(topPanel, BorderLayout.PAGE_START)
                    add(webcamPanel, BorderLayout.CENTER)
                    add(bottomPanel, BorderLayout.PAGE_END)
                }
            })
        }
    }
}
}

@Preview
@Composable
fun TopOverlay() {
Box {
    Column(verticalArrangement = Arrangement.Top, horizontalAlignment = Alignment.Start, modifier = Modifier.fillMaxSize()
        .padding(15.dp)
    ) {
        IconButton(onClick = {}) {
            Icon(Icons.Filled.ArrowBack, contentDescription = "Zurück", tint = Color.Black, modifier = Modifier.size(50.dp)
            )
        }
    }

    Column(verticalArrangement = Arrangement.Top, horizontalAlignment = Alignment.End, modifier = Modifier.fillMaxSize()
        .padding(15.dp)
    ) {
        IconButton(onClick = {}) {
            Icon(Icons.Filled.Info, contentDescription = "Verzögerung", tint = Color.Black, modifier = Modifier.size(50.dp)
            )
        }
    }
}
}

@Preview
@Composable
fun BottomOverlay()
{
var isPhotoChecked by remember { mutableStateOf(true) }
val red = Color(0xFFEC407A)
val grey = Color(0xFFB0BEC5)

Box {
    Column(verticalArrangement = Arrangement.Bottom, horizontalAlignment = Alignment.CenterHorizontally, modifier = Modifier.fillMaxSize()
        .padding(15.dp)
    ) {
        Row {
            Column(modifier = Modifier.padding(top = 25.dp)) {
                IconToggleButton(checked = !isPhotoChecked, onCheckedChange = { isPhotoChecked = !it }) {
                    val tint by animateColorAsState(if (!isPhotoChecked) red else grey)
                    Icon(Icons.Filled.Info, contentDescription = "Video", tint = tint, modifier = Modifier.size(55.dp)
                    )
                }
            }

            Column {
                IconButton(onClick = {}) {
                    Icon(Icons.Filled.Face, contentDescription = "Start", tint = grey, modifier = Modifier.size(100.dp)
                    )
                }
            }

            Column(modifier = Modifier.padding(top = 25.dp)) {
                IconToggleButton(checked = isPhotoChecked, onCheckedChange = { isPhotoChecked = it }) {
                    val tint by animateColorAsState(if (isPhotoChecked) red else grey)
                    Icon(Icons.Filled.Info, contentDescription = "Video", tint = tint, modifier = Modifier.size(55.dp)
                    )
                }
            }
        }
    }
}
}

正如信息一样，网络摄像头类是“com.github.sarxos:webcam-capture:0.3.12”库的一部分

我现在想要完成的是顶部和底部叠加层具有透明背景，并且网络摄像头视图填充了整个窗口，以便将叠加层绘制在网络摄像头视图上

有人知道如何完成我想要的并且可以给我一个提示吗？

4

0 回答 0