Zeichnen Sie mit drawArc runde Ecken in die Leinwand ⇐ Android

[Guest]

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>

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()
}
}

Ich versuche, den Bogen so aussehen zu lassen
[img]https: //i.sstatic.net/cSebS.jpg[/img]