Jetpack Compose 如何在 Canvas 上实现圆弧居中绘制？

• Compose 的 drawArc 方法默认以 Canvas 的左上角 (0f, 0f) 作为绘制边界的左上角坐标，你当前只指定了圆弧尺寸没有调整绘制起始位置，所以圆弧会默认靠左上角显示，无法居中。
• 只需要额外传入 topLeft 参数，计算 Canvas 总尺寸和圆弧尺寸的差值除以2作为偏移量，即可实现居中效果。

修改后的完整代码如下：

Canvas(modifier = Modifier
    .background(Color.LightGray)
    .fillMaxWidth()
    .height(300.dp)
) {
    val arcSize = size / 2.25F
    // 计算居中所需的起始偏移量
    val centerOffset = Offset(
        x = (size.width - arcSize.width) / 2f,
        y = (size.height - arcSize.height) / 2f
    )
    drawArc(
        color = Color.Blue,
        startAngle = 30f,
        sweepAngle = 300f,
        useCenter = false,
        style = Stroke(width = 50f, cap = StrokeCap.Round),
        size = arcSize,
        topLeft = centerOffset // 新增这行指定绘制起始位置
    )
}

可选优化：如果要避免圆弧边缘因为线宽超出绘制区域被裁切，可以在计算圆弧尺寸时扣掉半个线宽的余量，把arcSize的计算逻辑改成 val arcSize = size / 2.25F - Size(50f, 50f) 即可。

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