如何在 Compose Canvas 中从圆中剪切矩形？

Question

当我使用BlendMode.DstOut时，它应该显示透明源形状但它是黑色的。

假设结果：

实际结果：

@Composable
fun BlendMode() {
    Box(modifier = Modifier.fillMaxSize().background(White100))
    Canvas(modifier = Modifier.size(300.dp)) {
        val radius = size.width / 3
        drawCircle(
            color = Color.Red,
            radius = radius,
            center = Offset(radius, radius)
        )
        drawRect(
            color = Color.Blue,
            topLeft = Offset(radius, radius),
            size = Size(radius * 2, radius * 2),
            blendMode = BlendMode.DstOut
        )
    }
}

Answer 1

blendMode不会让您达到预期的效果。您可以使用 clipRect:

clipRect(
    top = radius,
    left = radius,
    right = radius * 3,
    bottom = radius * 3,
    clipOp = ClipOp.Difference
) {
    drawCircle(
        color = Color.Red,
        radius = radius,
        center = Offset(radius, radius)
    )
}

如何在 Compose Canvas 中从圆中剪切矩形？

How to cut rect from circle in Compose Canvas?

android

android-jetpack-compose