android - Jetpack 使用 Canvas 组成半圆

Question

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

    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
        )
    }

预期的结果将是一个可重复使用的半圆可组合件，其高度与实际半圆相同，因此我可以轻松地将其他内容放置在其上。预期的 View 大小由绿色虚线标记。

Answer 1

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

@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()，因为默认情况下，笔画圆角会添加到线条的长度中。您只需将尺寸和高度减小几个像素即可在 Canvas 内匹配。默认情况下，即使您没有设置大小修饰符， Canvas 也会绘制超出其边界的任何内容，除非您使用 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
        )
    }
}