如何在Android Jetpack Compose中绘制自定义弧形/进度条

你遇到的核心问题是：当弧形的总角度接近360度时，StrokeCap.Round会让首尾的圆角帽相互重叠，导致视觉效果不符合预期。直接用drawArc很难规避这个问题，换用drawPath手动构建弧形路径是更可靠的解决方案。

推荐实现方案（使用drawPath） #

这种方式能精确控制弧形路径，彻底避免端点重叠问题，同时保证弧形居中且描边不溢出Canvas：

@Composable
fun BTArc(arcSize: Dp, strokeWidth: Dp = 10.dp) {
    val strokeWidthPx = strokeWidth.toPx()
    Canvas(modifier = Modifier.size(arcSize)) {
        // 计算弧形的实际半径（减去描边宽度的一半，避免描边超出Canvas范围）
        val arcRadius = (size.minDimension - strokeWidthPx) / 2f
        val center = Offset(size.width / 2f, size.height / 2f)
        
        // 构建背景弧形路径
        val backgroundPath = Path().apply {
            arcTo(
                rect = Rect(
                    left = center.x - arcRadius,
                    top = center.y - arcRadius,
                    right = center.x + arcRadius,
                    bottom = center.y + arcRadius
                ),
                startAngleDegrees = 140f,
                sweepAngleDegrees = 260f,
                forceMoveTo = false
            )
        }
        
        // 构建前景弧形路径
        val foregroundPath = Path().apply {
            arcTo(
                rect = Rect(
                    left = center.x - arcRadius,
                    top = center.y - arcRadius,
                    right = center.x + arcRadius,
                    bottom = center.y + arcRadius
                ),
                startAngleDegrees = 140f,
                sweepAngleDegrees = 200f,
                forceMoveTo = false
            )
        }
        
        // 绘制背景弧
        drawPath(
            path = backgroundPath,
            color = Color.Yellow,
            style = Stroke(width = strokeWidthPx, cap = StrokeCap.Round)
        )
        
        // 绘制前景弧
        drawPath(
            path = foregroundPath,
            color = Color.Red,
            style = Stroke(width = strokeWidthPx, cap = StrokeCap.Round)
        )
    }
}

备选方案（调整drawArc参数） #

如果坚持使用drawArc，可以通过缩小弧形的总角度、调整绘制范围来减少端点重叠：

@Composable
fun BTArc(arcSize: Dp) {
    val strokeWidthPx = 10.dp.toPx()
    Canvas(modifier = Modifier.size(arcSize)) {
        // 背景弧：减少2度角度，留出首尾间隙；同时缩小绘制范围，让描边居中
        drawArc(
            color = Color.Yellow,
            startAngle = 140f,
            sweepAngle = 258f,
            useCenter = false,
            style = Stroke(strokeWidthPx, cap = StrokeCap.Round),
            size = Size(size.width - strokeWidthPx, size.height - strokeWidthPx),
            topLeft = Offset(strokeWidthPx / 2, strokeWidthPx / 2)
        )

        // 前景弧：和背景弧保持相同的偏移和范围
        drawArc(
            color = Color.Red,
            startAngle = 140f,
            sweepAngle = 200f,
            useCenter = false,
            style = Stroke(strokeWidthPx, cap = StrokeCap.Round),
            size = Size(size.width - strokeWidthPx, size.height - strokeWidthPx),
            topLeft = Offset(strokeWidthPx / 2, strokeWidthPx / 2)
        )
    }
}

关键说明 #

• 用drawPath的方案更灵活，后续调整弧形角度、位置或添加动画都更方便。
• 无论哪种方案，都要注意描边宽度的处理：绘制范围需要减去描边宽度，避免描边超出Canvas导致显示不全。

内容的提问来源于stack exchange，提问作者Abdelrahman Amer