Programmiererforum

@Composable
fun AudioFrequencyUI(
frequenciesList: List,
waveWidth: Dp = 4.dp,
waveHeight: Dp = 80.dp,
upperStrokeWidth: Float = 8f,
lowerStrokeWidth: Float = 6f,
upperWaveColor: Color = Color.Yellow,
lowerWaveColor: Color = Color.Yellow,
gapSize: Dp = 4.dp,
minMagnitude: Float = 10f,
contentPadding: PaddingValues = PaddingValues(0.dp),
modifier: Modifier = Modifier
) {
val frequencies = remember { mutableStateListOf() }

val listState = rememberLazyListState()

LaunchedEffect(frequencies.size) {
if (frequencies.isNotEmpty()) {
listState.scrollToItem(frequencies.size - 1)
}
}

LaunchedEffect(frequenciesList) {
frequencies.clear()
frequencies.addAll(frequenciesList)
delay(1000)
}

LazyRow(
state = listState,
horizontalArrangement = Arrangement.spacedBy(gapSize),
modifier = modifier
.wrapContentWidth()
.height(waveHeight),
contentPadding = contentPadding
) {
itemsIndexed(frequencies, key = { index, _ -> index }) { index, magnitude ->
Box(
modifier = Modifier
.width(waveWidth)
.height(waveHeight)
) {
val maxMagnitude = frequencies.maxOrNull() ?: 1

Spacer(modifier = Modifier
.fillMaxSize()
.drawBehind {
var scaledMagnitude = magnitude / maxMagnitude.toFloat() * size.height / 2
scaledMagnitude = scaledMagnitude.coerceAtLeast(minMagnitude)

val halfHeight = size.height / 2

drawLine(
color = upperWaveColor,
start = Offset(size.width / 2, halfHeight),
end = Offset(size.width / 2, halfHeight - scaledMagnitude),
strokeWidth = upperStrokeWidth
)

drawLine(
color = lowerWaveColor,
start = Offset(size.width / 2, halfHeight),
end = Offset(size.width / 2, halfHeight + scaledMagnitude),
strokeWidth = lowerStrokeWidth
)
})
}
}
}
}

Ich stoße auf ein Leistungsproblem, während ich versuche, eine Audio -Wellenform in Jetpack Compose zu rendern. Ich verwende einen Lazyrow, um eine Wellenform mit mehr als 10.000 Elementen anzuzeigen, wobei jedes Element einem Frequenzwert entspricht, der häufig aktualisiert. Ich verwende den DrawBehind -Modifikator, um die Wellenform zu rendern, aber es scheint, dass das Zeichnen aller Elemente jedes Mal, wenn die Frequenzänderungen nicht effizient genug sind. Zeichnen Sie die Wellenform für jeden Frequenzwert rendern.[code]@Composable
fun AudioFrequencyUI(
frequenciesList: List,
waveWidth: Dp = 4.dp,
waveHeight: Dp = 80.dp,
upperStrokeWidth: Float = 8f,
lowerStrokeWidth: Float = 6f,
upperWaveColor: Color = Color.Yellow,
lowerWaveColor: Color = Color.Yellow,
gapSize: Dp = 4.dp,
minMagnitude: Float = 10f,
contentPadding: PaddingValues = PaddingValues(0.dp),
modifier: Modifier = Modifier
) {
val frequencies = remember { mutableStateListOf() }

val listState = rememberLazyListState()

LaunchedEffect(frequencies.size) {
if (frequencies.isNotEmpty()) {
listState.scrollToItem(frequencies.size - 1)
}
}

LaunchedEffect(frequenciesList) {
frequencies.clear()
frequencies.addAll(frequenciesList)
delay(1000)
}

LazyRow(
state = listState,
horizontalArrangement = Arrangement.spacedBy(gapSize),
modifier = modifier
.wrapContentWidth()
.height(waveHeight),
contentPadding = contentPadding
) {
itemsIndexed(frequencies, key = { index, _ -> index }) { index, magnitude ->
Box(
modifier = Modifier
.width(waveWidth)
.height(waveHeight)
) {
val maxMagnitude = frequencies.maxOrNull() ?: 1

Spacer(modifier = Modifier
.fillMaxSize()
.drawBehind {
var scaledMagnitude = magnitude / maxMagnitude.toFloat() * size.height / 2
scaledMagnitude = scaledMagnitude.coerceAtLeast(minMagnitude)

val halfHeight = size.height / 2

drawLine(
color = upperWaveColor,
start = Offset(size.width / 2, halfHeight),
end = Offset(size.width / 2, halfHeight - scaledMagnitude),
strokeWidth = upperStrokeWidth
)

drawLine(
color = lowerWaveColor,
start = Offset(size.width / 2, halfHeight),
end = Offset(size.width / 2, halfHeight + scaledMagnitude),
strokeWidth = lowerStrokeWidth
)
})
}
}
}
}

[/code]