我是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”库的一部分
我现在想要完成的是顶部和底部叠加层具有透明背景,并且网络摄像头视图填充了整个窗口,以便将叠加层绘制在网络摄像头视图上
有人知道如何完成我想要的并且可以给我一个提示吗?