Jetpack Compose实现图片局部背景移除的组件开发问题

需要实现叶子图标右下角镂空一个环形区域，再叠加显示徽章的效果。现有代码尝试用透明环形覆盖，但无法实现“挖掉”图标局部的需求——透明只是不显示自身，不会清除下层的图标内容。

解决方案 #

要实现这种镂空效果，需要使用**混合模式（BlendMode）**中的DstOut，它可以让当前绘制的内容将下层对应区域的像素清除。同时需要创建独立图层来确保混合模式生效，具体修改如下：

修改后的完整代码 #

@Composable
fun MyIcon(
    modifier: Modifier = Modifier,
    badgeColor: Color
) {
    Box(modifier = modifier) {
        // 先绘制基础叶子图标
        Image(imageVector = leafImageVector, contentDescription = "叶子图标")
        
        // 负责镂空环形区域的组件
        Ring(
            modifier = Modifier
                .align(Alignment.BottomEnd)
                .padding(end = 4.dp, bottom = 8.dp)
        )
        
        // 叠加显示的徽章
        Badge(
            modifier = Modifier
                .align(Alignment.BottomEnd)
                .padding(end = 8.dp, bottom = 8.dp),
            badgeColor = badgeColor
        )
    }
}

@Composable
private fun Ring(modifier: Modifier = Modifier) {
    Canvas(modifier = modifier.size(8.dp), onDraw = {
        // 创建独立图层，确保混合模式仅作用于目标区域
        with(drawContext.canvas.nativeCanvas) {
            val saveCount = saveLayer(null, null)
            
            // 绘制环形占位（颜色不影响，仅用于定义镂空范围）
            drawCircle(
                color = Color.Black,
                radius = 12f,
                style = Stroke(width = 8f)
            )
            
            // 使用DstOut混合模式，清除下层叶子图标对应环形区域的像素
            drawCircle(
                color = Color.Black,
                radius = 12f,
                style = Stroke(width = 8f),
                blendMode = BlendMode.DstOut
            )
            
            restoreToCount(saveCount)
        }
    })
}

@Composable
fun Badge(
    modifier: Modifier = Modifier,
    badgeColor: Color
) {
    Box(
        modifier = modifier
            .size(8.dp)
            .clip(CircleShape)
            .background(badgeColor)
    )
}

关键逻辑说明 #

• 独立图层创建：通过saveLayer创建独立绘制图层，避免混合模式影响整个组件的绘制上下文。
• DstOut混合模式：该模式会让当前绘制的环形区域，将下层（叶子图标）对应位置的像素彻底清除，从而实现镂空效果。
• 层级顺序：严格按照「叶子图标 → 镂空环形 → 徽章」的顺序绘制，确保视觉层级符合需求。

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