Jetpack Compose中如何为Canvas的drawLine设置圆角？

方法1：使用StrokeCap.Round（快速实现，圆角半径为线宽一半） #

Compose的drawLine函数支持通过strokeCap参数设置线条端点样式，设置为StrokeCap.Round就能让两端自动变成圆角，这个圆角的半径是你设置的strokeWidth的一半。

修改后的代码如下：

val boxSize = 30.dp

Box(modifier = Modifier
    .background(Color.LightGray)
    .height(height = boxSize)
) {
    Canvas(
        modifier = Modifier
            .fillMaxWidth()
    ) {
        val canvasWidth = size.width
        val strokeWidth = 8.dp.toPx()
        drawLine(
            start = Offset(x = 0f, y = (boxSize / 2).toPx()),
            end = Offset(x = canvasWidth, y = (boxSize / 2).toPx()),
            color = Color.Black,
            strokeWidth = strokeWidth,
            strokeCap = StrokeCap.Round // 新增端点圆角设置
        )
    }
}

方法2：自定义圆角半径（使用drawPath实现任意半径） #

如果需要指定自定义大小的圆角半径（并非线宽的一半），可以用drawPath绘制带圆角的线条。核心思路是：绘制直线段，在两端添加半圆路径，组合成完整的带圆角形状。

示例代码：

val boxSize = 30.dp
val customRadius = 6.dp.toPx() // 自定义圆角半径

Box(modifier = Modifier
    .background(Color.LightGray)
    .height(height = boxSize)
) {
    Canvas(
        modifier = Modifier
            .fillMaxWidth()
    ) {
        val canvasWidth = size.width
        val strokeWidth = 8.dp.toPx()
        val centerY = (boxSize / 2).toPx()
        
        // 计算直线的实际起止点（留出圆角空间）
        val lineStart = Offset(customRadius, centerY)
        val lineEnd = Offset(canvasWidth - customRadius, centerY)
        
        // 构建带圆角的路径
        val path = Path().apply {
            // 左端半圆：从线条左下角出发，绘制半圆到直线起点
            moveTo(0f, centerY - strokeWidth / 2)
            arcTo(
                rect = Rect(
                    left = 0f,
                    top = centerY - strokeWidth / 2,
                    right = customRadius * 2,
                    bottom = centerY + strokeWidth / 2
                ),
                startAngleDegrees = 180f,
                sweepAngleDegrees = 180f,
                forceMoveTo = false
            )
            // 绘制直线到右端
            lineTo(lineEnd.x, lineEnd.y + strokeWidth / 2)
            // 右端半圆：从线条右下角出发，绘制半圆到直线终点
            arcTo(
                rect = Rect(
                    left = canvasWidth - customRadius * 2,
                    top = centerY - strokeWidth / 2,
                    right = canvasWidth,
                    bottom = centerY + strokeWidth / 2
                ),
                startAngleDegrees = 0f,
                sweepAngleDegrees = 180f,
                forceMoveTo = false
            )
            // 闭合路径形成完整形状
            close()
        }
        
        // 填充路径得到带圆角的线条
        drawPath(
            path = path,
            color = Color.Black
        )
    }
}

内容的提问来源于stack exchange，提问作者Compose Learner