使用BlendMode.DstIn实现Composable圆形裁剪失效问题求助

我想要让包含Surface()和Text()的内容被圆形裁剪，仅显示圆形内部的内容。我使用了BlendMode.DstIn，但效果和预期不符：

• 使用纯黑色时，完全没有裁剪效果，就像未应用遮罩一样；
• 使用半透明黑色时，圆形内的内容也变为半透明，但圆形外的内容依然可见。

相关代码 #

@Composable
fun BlendModeTest() {
    Box(
        modifier = Modifier
            .circularReveal(radius = 80.dp),
    ) {
        Surface(
            modifier = Modifier
                .fillMaxWidth()
                .height(300.dp),
            color = Color.Gray,
        ) {
            Text(
                modifier = Modifier
                    .fillMaxSize()
                    .wrapContentSize(align = Alignment.Center),
                text = "My content text",
            )
        }
    }
}

@Stable
private fun Modifier.circularReveal(
    radius: Dp,
): Modifier =
    this
        .graphicsLayer(
            compositingStrategy = CompositingStrategy.Offscreen,
        )
        .drawWithContent {
            drawContent()
            drawCircle(
                color = Color.Black,
                radius = radius.toPx(),
                blendMode = BlendMode.DstIn,
            )
        }

@Preview
@Composable
private fun Preview() {
    MaterialTheme {
        BlendModeTest()
    }
}

效果展示 #

• 使用不透明Color.Black的裁剪效果：
  

• 使用半透明Color.Black.copy(alpha = 0.5f)的裁剪效果：
  

根据BlendMode.DstIn的文档说明，圆形外的内容应该不会被绘制，为什么实际情况并非如此？

问题解答 #

问题核心在于绘制顺序与BlendMode的逻辑不匹配：

BlendMode.DstIn的作用是保留「先绘制的目标像素（即drawContent()的内容）」中与「后绘制的源像素（圆形）」重叠的部分，最终透明度由源像素的透明度决定。你当前的写法是先绘内容、再绘圆形，导致：

1. 纯黑色（不透明）时，源像素alpha为1，目标像素会完全保留（公式为Dst * SrcAlpha），自然没有裁剪效果；
2. 半透明黑色时，源像素alpha为0.5，重叠区域内容会被乘以0.5变半透明，而圆形外无源性像素覆盖，目标像素不受影响，因此依然可见。

正确实现方式 #

方法1：调整BlendMode与绘制顺序

先绘制圆形遮罩，再绘制内容并应用BlendMode.SrcIn（让内容仅保留与遮罩重叠的部分）：

@Stable
private fun Modifier.circularReveal(
    radius: Dp,
): Modifier =
    this
        .graphicsLayer(
            compositingStrategy = CompositingStrategy.Offscreen,
        )
        .drawWithContent {
            // 先绘制圆形遮罩
            drawCircle(
                color = Color.Black,
                radius = radius.toPx(),
            )
            // 再绘制内容，用SrcIn实现裁剪
            drawContent(blendMode = BlendMode.SrcIn)
        }

方法2：使用clipPath（更简洁高效）

直接用Compose提供的裁剪API，性能和可读性更优：

@Stable
private fun Modifier.circularReveal(
    radius: Dp,
): Modifier =
    this.clipPath(
        path = Path().apply {
            addOval(Rect(
                center = Offset(radius.toPx(), radius.toPx()),
                radius = radius.toPx()
            ))
        }
    )

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