Zeichnen Sie mit drawArc runde Ecken in die Leinwand
Posted: 20 Jan 2025, 17:33
Ich versuche, ein Kreisdiagramm in Jetpack Compose zu erstellen. Ich versuche, für jeden Kreis im Diagramm runde Ecken zu bilden. Aber ich habe Probleme, Kurven zu fahren. Ich habe versucht, cap = StrokeCap.Round in drawArc in Canvas zu verwenden, hatte aber kein Glück, nur die Ecken abzurunden.
Das habe ich so weit, und das Ergebnis sieht so aus. Wie Sie sehen können, sind die Ecken jedes Kuchens rechteckig. Gibt es eine Möglichkeit, sie rund zu machen?
< /p>
Ich versuche, den Bogen so aussehen zu lassen
[img]https: //i.sstatic.net/cSebS.jpg[/img]
Das habe ich so weit, und das Ergebnis sieht so aus. Wie Sie sehen können, sind die Ecken jedes Kuchens rechteckig. Gibt es eine Möglichkeit, sie rund zu machen?
< /p>
Code: Select all
@Composable
fun Chart() {
Canvas(
modifier = Modifier
.fillMaxWidth()
.aspectRatio(1f)
) {
drawIntoCanvas {
val width = size.width
val radius = width / 2f
val strokeWidth = radius * .3f
var startAngle = 0f
val items = listOf(25f, 25f, 25f, 25f, 25f, 25f, 25f, 25f)
items.forEach {
val sweepAngle = it.toAngle
drawArc(
color = Color.Gray,
startAngle = startAngle,
sweepAngle = sweepAngle - 5,
useCenter = false,
topLeft = Offset(strokeWidth / 2, strokeWidth / 2),
size = Size(width - strokeWidth, width - strokeWidth),
style = Stroke(strokeWidth)
)
startAngle += sweepAngle
}
}
}
}
private val Float.toAngle: Float
get() = this * 180 / 100
@Preview(showBackground = true)
@Composable
fun GreetingPreview() {
MyApplicationTheme {
Chart()
}
}
[img]https: //i.sstatic.net/cSebS.jpg[/img]