我想在Jetpack Compose的画布上绘制一个弧形,并在进度边缘上放置一个小圆圈,就像这张图片一样:
。我找到了如何使用弧形画布绘制进度条,但还不知道如何绘制圆圈以匹配弧线的边缘。这是我的进度代码:
![enter image description here](https://istack.dev59.com/a1d8f.webp)
@Composable
fun ComposeCircularProgressBar(
modifier: Modifier = Modifier,
percentage: Float,
fillColor: Color,
backgroundColor: Color,
strokeWidth: Dp
) {
Canvas(
modifier = modifier
.padding(strokeWidth / 2)
) {
// Background Line
drawArc(
color = backgroundColor,
135f,
270f,
false,
style = Stroke(strokeWidth.toPx(), cap = StrokeCap.Butt)
)
// Fill Line
drawArc(
color = fillColor,
135f,
270f * percentage,
false,
style = Stroke(strokeWidth.toPx(), cap = StrokeCap.Round)
)
}
}
注意:目前我知道使用Canvas.drawCircle(offset = Offset)
来绘制圆形,但是我还不知道如何计算Offset(x,y)
以使其与进度边缘匹配。