如何在 Jetpack Compose with Canvas 中绘制圆环？

Question

我知道您可以使用简单的方法在 Jetpack Compose 和 Canvas 中画一个圆圈。我尝试绘制一个彩色圆圈和另一个较小的白色圆圈来实现环，但似乎不正确。如果背景不是白色或者环形应该画在其他东西上并且内部需要是空心的怎么办？

Surface {
        Canvas(
            modifier = Modifier.size(200.dp),
            onDraw = {
                drawCircle(
                    color = Color.Blue,
                    radius = 200f
                )
                drawCircle(
                    color = Color.White,
                    radius = 150f
                )
            }
        )
    }

Answer 1

我意识到使用

Canvas

和

Path

可以画出很多形状。

@Preview(showBackground = true)
@Composable
fun RingPreview() {
    Surface {
        Ring(modifier = Modifier.padding(8.dp))
    }
}

@Composable
fun Ring(
    modifier: Modifier = Modifier,
    diameter: Dp = 100.dp,
    @FloatRange(from = 0.0, 1.0)
    ringSize: Float = .1f,
    color: Color = MaterialTheme.colorScheme.primary
) {
    Canvas(
        modifier = modifier.size(diameter),
        onDraw = {
            drawRing(
                color = color,
                diameter = diameter,
                ringFraction = ringSize
            )
        }
    )
}

fun DrawScope.drawRing(
    color: Color,
    diameter: Dp = 100.dp,
    @FloatRange(from = 0.0, 1.0)
    ringFraction: Float = .1f,
    offset: Offset = Offset.Zero
) {
    val path = Path().apply {
        val size = diameter.toPx()
        addOval(Rect(0f, 0f, size, size))
        op(
            path1 = this,
            path2 = Path().apply {
                addOval(
                    Rect(0f, 0f, size * (1 - ringFraction), size * (1 - ringFraction))
                )
                translate(Offset(size * ringFraction / 2, size * ringFraction / 2))
            },
            operation = PathOperation.Difference
        )
        if (offset != Offset.Zero)
            translate(offset.copy(offset.x - size / 2, offset.y - size / 2))
    }
    drawPath(path, color)
}