Jetpack 使用 Canvas 组成半圆

Question

我正在尝试在 Jetpack Compose 中创建一个半圆速度进度条。 除非视图是正方形的，否则半圆看起来不会像预期的那样，如果我使用 1:2 宽度：高度，它将被展平。 我想要一个 Composable 代表圆圈的一半，而我没有不可用的视图下半部分。

    Box(
        modifier = modifier
            .background(Color.Red)
    ) {
        Canvas(modifier = Modifier.size(300.dp)) {
            drawArc(
                color = Color.LightGray,
                -180f,
                180f,
                useCenter = false,
                style = Stroke(8.dp.toPx(), cap = StrokeCap.Round)
            )
        }
        Text(
            modifier = Modifier.align(alignment = Alignment.Center),
            text = "20 Mbps",
            color = Color.White,
            fontSize = 20.sp
        )
    }

预期的结果将是一个可重复使用的半圆，可与实际半圆的高度组合，因此我可以轻松地将其他内容定位在它上面。 预期的视图大小由绿色虚线标记。

Answer 1

正如我在评论中提到的，如果你想要一个覆盖整个高度的半弧，那么弧使用矩形，只是你绘制弧的高度的两倍

@Composable
private fun ArcComposable(modifier: Modifier) {
    Box(
        modifier = modifier
            .background(Color.Red)
    ) {
        Canvas(modifier = Modifier
            .size(300.dp)
            .clipToBounds()) {
            drawArc(
                color = Color.LightGray,
                -180f,
                180f,
                useCenter = false,
                size = Size(size.width, size.height * 2),
                style = Stroke(8.dp.toPx(), cap = StrokeCap.Round)
            )
        }
        Text(
            modifier = Modifier.align(alignment = Alignment.Center),
            text = "20 Mbps",
            color = Color.White,
            fontSize = 20.sp
        )
    }
}

我添加了 Modifier.clipToBounds() 因为 strokeCap 轮默认添加到线的长度。 您可以将大小和高度减小几个 px 以匹配画布内部。 默认情况下，即使您没有设置具有大小的修饰符，画布也会绘制超出其边界的任何内容，除非您使用Modifier.clipToBounds()

private fun ArcComposable(modifier: Modifier) {
    Box(
        modifier = modifier
            .background(Color.Red)
    ) {
        Canvas(
            modifier = Modifier
                .size(300.dp)
//            .clipToBounds()
        ) {
            drawArc(
                color = Color.LightGray,
                -180f,
                180f,
                useCenter = false,
                topLeft = Offset(4.dp.toPx(), 6.dp.toPx()),
                size = Size(size.width - 8.dp.toPx(), size.height * 2 - 20.dp.toPx()),
                style = Stroke(8.dp.toPx(), cap = StrokeCap.Round)
            )
        }
        Text(
            modifier = Modifier.align(alignment = Alignment.Center),
            text = "20 Mbps",
            color = Color.White,
            fontSize = 20.sp
        )
    }
}