Jetpack 用点圆绘制圆弧

Question

我希望在 Jetpack Compose 的画布上画一条弧线，并在进度边缘画一个小圆圈，如下图所示：

我找到了如何用圆弧画布绘制进度条，但还不知道如何绘制圆圈以与圆弧线的边缘相匹配。这是我的进度代码：

@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)与进度边缘相匹配。

Answer 1

下面的这段代码将根据您提供的百分比生成带有圆点的圆弧。您确实完成了大部分部分，这只是解决数学方程以找到圆上的点。

我假设圆的半径为小部件的高度/2 。

由于我们没有绘制完整的圆，因此起始角度为 140 度，最大扫描角度为 260 度。（我通过点击和试用找到了这个，因此它看起来与您的图像尽可能接近）

现在要绘制白色小圆圈，中心（即偏移量）必须位于 (x,y)，其中 x 和 y 由公式给出

x = 半径 * sin（以弧度为单位的角度） y = 半径 * cos（以弧度为单位的角度）

@Composable
fun ComposeCircularProgressBar(
    modifier: Modifier = Modifier,
    percentage: Float,
    fillColor: Color,
    backgroundColor: Color,
    strokeWidth: Dp
) {
    Canvas(
        modifier = modifier
            .size(150.dp)
            .padding(10.dp)
    ) {
        // Background Line
        drawArc(
            color = backgroundColor,
            140f,
            260f,
            false,
            style = Stroke(strokeWidth.toPx(), cap = StrokeCap.Round),
            size = Size(size.width, size.height)
        )

        drawArc(
            color = fillColor,
            140f,
             percentage * 260f,
            false,
            style = Stroke(strokeWidth.toPx(), cap = StrokeCap.Round),
            size = Size(size.width, size.height)
        )


        var angleInDegrees = (percentage * 260.0) + 50.0
        var radius = (size.height / 2)
        var x = -(radius * sin(Math.toRadians(angleInDegrees))).toFloat() + (size.width / 2)
        var y = (radius * cos(Math.toRadians(angleInDegrees))).toFloat() + (size.height / 2)

        drawCircle(
            color = Color.White,
            radius = 5f,
            center = Offset(x,  y)
        )
    }
}

这是我尝试过的一些例子

@Preview
@Composable
fun PreviewPorgressBar() {
    ComposeCircularProgressBar(
        percentage = 0.80f,
        fillColor = Color(android.graphics.Color.parseColor("#4DB6AC")),
        backgroundColor = Color(android.graphics.Color.parseColor("#90A4AE")),
        strokeWidth = 10.dp
    )
}

@Preview
@Composable
fun PreviewPorgressBar() {
    ComposeCircularProgressBar(
        percentage = 0.45f,
        fillColor = Color(android.graphics.Color.parseColor("#4DB6AC")),
        backgroundColor = Color(android.graphics.Color.parseColor("#90A4AE")),
        strokeWidth = 10.dp
    )
}

@Preview
@Composable
fun PreviewPorgressBar() {
    ComposeCircularProgressBar(
        percentage = 1f,
        fillColor = Color(android.graphics.Color.parseColor("#4DB6AC")),
        backgroundColor = Color(android.graphics.Color.parseColor("#90A4AE")),
        strokeWidth = 10.dp
    )
}

[更新] 如果您对分步教程感兴趣，可以在这里阅读： https: //blog.droidchef.dev/custom-progress-with-jetpack-compose-tutorial/