Jetpack Compose Canvas圆弧设置Round StrokeCap后如何计算额外角度？

当你给圆弧设置StrokeCap.Round时，圆弧的起点和终点会各延伸出一个半径等于笔触宽度一半的半圆，这部分额外图形会占用额外角度，导致相邻圆弧重叠。要解决这个问题，你需要先计算出半圆对应的圆心角，再调整圆弧的绘制参数。

额外角度的计算原理 #

每个端点的半圆弦长等于笔触宽度（strokeWidth），这个半圆依附在半径为arcRadius（圆心到圆弧路径中心线的距离）的圆上。根据三角函数关系，单个端点的额外圆心角推导如下：

1. 半角关系：sin(θ/2) = (strokeWidth/2) / arcRadius
2. 单个端点的额外角度：θ = 2 * arcsin( (strokeWidth/2) / arcRadius )

具体实现步骤 #

1. 确定圆弧路径半径arcRadius：如果从画布中心绘制，通常取size.minDimension / 2 - strokeWidth/2（减去笔触半宽避免圆弧超出画布）。
2. 计算单个端点的额外角度（转成角度值，Compose的drawArc以角度为单位）。
3. 调整圆弧的起始角度、扫过角度，扣除额外角度部分，避免重叠。

代码示例 #

val chartBarWidth = 24.dp // 自定义笔触宽度
val strokeWidth = chartBarWidth.toPx()
val arcRadius = size.minDimension / 2f - strokeWidth / 2f // 圆弧路径半径
val halfStroke = strokeWidth / 2f

// 计算单个端点的额外角度（弧度转角度）
val extraAnglePerCap = (Math.asin(halfStroke / arcRadius) * 2 * 180 / Math.PI).toFloat()

// 原计划的起始角度与扫过角度
val originalStartAngle = 0f
val originalSweepAngle = 90f

// 调整后绘制：起始角度加额外角度，扫过角度减去两倍额外角度
drawArc(
    color = Color.Blue,
    startAngle = originalStartAngle + extraAnglePerCap,
    sweepAngle = originalSweepAngle - 2 * extraAnglePerCap,
    useCenter = false,
    topLeft = Offset(
        (size.width - arcRadius * 2) / 2f,
        (size.height - arcRadius * 2) / 2f
    ),
    size = Size(arcRadius * 2, arcRadius * 2),
    style = Stroke(width = strokeWidth, cap = StrokeCap.Round)
)

注意事项 #

• 若arcRadius远大于strokeWidth，额外角度极小可忽略；但笔触宽度相对圆弧半径较大时，必须计算，否则重叠会很明显。
• 所有相邻圆弧需做相同角度调整，才能保证整体圆形的间隙均匀。

内容的提问来源于stack exchange，提问作者avram andrei tiberiu