Jetpack Compose Canvas中矩形与圆弧间存在间隙的问题排查

你遇到的间隙是因为对drawArc的参数理解有误：

• drawArc的topLeft是圆弧所在椭圆的左上角坐标，不是圆弧本身的顶部位置。
• 你没指定drawArc的size参数，默认会使用整个Canvas的尺寸，导致椭圆高度远大于需要的圆弧直径，圆弧的实际位置和矩形底部错开，出现空隙。

要让圆弧和矩形底部无缝衔接，需要让圆弧所在的圆/椭圆的上边缘正好对齐矩形的底部。具体调整代码如下：

Canvas(
    modifier = Modifier.fillMaxWidth().height(200.dp)
) {
    val rectHeight = size.height * 0.75f
    val arcDiameter = size.width // 让圆弧的直径等于矩形宽度，形成半圆

    // 绘制矩形
    drawRect(
        color = Color(0xFFEF3125),
        topLeft = Offset(0f, 0f),
        size = Size(size.width, rectHeight)
    )

    // 绘制衔接的圆弧
    drawArc(
        color = Color(0xFFEF3125),
        startAngle = 180f, // 从左端点开始
        sweepAngle = 180f, // 顺时针画180度，形成向下凸的半圆
        useCenter = false,
        topLeft = Offset(0f, rectHeight - arcDiameter / 2), // 让椭圆中心落在矩形底部中点
        size = Size(arcDiameter, arcDiameter) // 指定圆弧为正圆，直径等于矩形宽度
    )
}

关键调整说明：

• 指定drawArc的size为正圆尺寸，确保圆弧是标准半圆；
• 计算topLeft让椭圆中心落在矩形底部中点，这样圆弧的上边缘会和矩形底部完全对齐；
• 调整角度参数，画出向下凸的半圆，完美衔接矩形底部。

内容的提问来源于stack exchange，提问作者Anurag Singh