Jetpack Compose绘制圆形交集问题：BlendMode.DstIn未生效排查

问题描述 #

尝试在Jetpack Compose中通过为第二个圆形设置BlendMode.DstIn来遮罩第一个圆形，绘制两个圆形的交集，但实际仅显示第一个圆形，无遮罩效果。

代码示例 #

@Composable
fun BlendModeTest() {
    Canvas(
        modifier = Modifier
            .fillMaxSize()
            .graphicsLayer(alpha = 0.99f, compositingStrategy = CompositingStrategy.Offscreen)
    ) {
        drawCircle(Color.Cyan, 300f, Offset(500f, 500f))
        drawCircle(Color.Black, 300f, Offset(700f, 500f), blendMode = BlendMode.DstIn)
    }
}

预期与实际效果 #

• 预期效果：仅显示两个圆形的重叠交集区域（类似透镜效果）
• 实际效果：只显示第一个青色圆形，无任何遮罩修改

问题原因与解决方法 #

1. BlendMode.DstIn 的逻辑误区 #

BlendMode.DstIn的作用是保留目标区域（已绘制的内容）与源区域（当前要绘制的内容）的重叠部分，且使用源区域的透明度。你这里第二个圆形用的是完全不透明的黑色，相当于保留了第一个圆形的全部区域（黑色覆盖的地方透明度都是1），自然看不到遮罩效果。

2. 正确实现方式 #

要得到两个圆形的交集，可通过以下两种方式实现：

方法一：调整绘制顺序 + BlendMode.SrcIn

利用saveLayer创建独立图层，先绘制遮罩形状，再用SrcIn混合模式绘制需要被遮罩的内容：

@Composable
fun BlendModeTest() {
    Canvas(
        modifier = Modifier
            .fillMaxSize()
            .graphicsLayer(compositingStrategy = CompositingStrategy.Offscreen)
    ) {
        drawRect(Color.White)
        
        saveLayer(null, Paint()) {
            // 先绘制遮罩形状（第二个圆形）
            drawCircle(Color.Black, 300f, Offset(700f, 500f))
            // 用SrcIn混合模式绘制第一个圆形，仅保留重叠区域
            drawCircle(Color.Cyan, 300f, Offset(500f, 500f), blendMode = BlendMode.SrcIn)
        }
    }
}

方法二：使用 clipPath 直接裁剪

如果只是需要交集区域，用clipPath更直观易懂：

@Composable
fun BlendModeTest() {
    Canvas(
        modifier = Modifier
            .fillMaxSize()
    ) {
        val maskPath = Path().apply {
            addOval(Rect(Offset(700f, 500f), 300f))
        }
        // 裁剪到第二个圆形的区域
        clipPath(maskPath) {
            // 绘制第一个圆形，只会显示与遮罩重叠的部分
            drawCircle(Color.Cyan, 300f, Offset(500f, 500f))
        }
    }
}

3. 关于 graphicsLayer 的优化 #

你之前设置的alpha=0.99f是旧版本触发离屏渲染的 workaround，现在compositingStrategy = CompositingStrategy.Offscreen已经足够开启离屏渲染，不需要额外设置alpha。

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