Compose - Remove part of background of an image

Question

I'd like to create a component with following result, assuming that the leaf is an existing ImageVector

With the following code:

@Composable
fun MyIcon(
    modifier: Modifier = Modifier,
) {

    Box(modifier = modifier) {
        Image(imageVector = leafImageVector)
        Ring( // the part that need to be removed from Image
            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 = {

            val strokeWidth = 8f
            drawCircle(
                color = Color.Black, // Change this to Transparent or Unspecified does not help
                radius = 12f,
                style = Stroke(
                    width = strokeWidth
                )
            )

        }
    )
}

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

The black part is the part I need to be removed from the Image

Answer 1

You can use BlendMods inside Modifier.drawWithContent to remove some part of Composable, it doesn't necessarily need to be Image for this to work. You can clip or cut from any Composable.

How to clip or cut a Composable?

@Preview
@Composable
fun ImageEraseTest() {
    Column(
        modifier = Modifier.fillMaxSize().padding(32.dp)
    ) {
        Image(
            modifier = Modifier
                .size(80.dp)
                .border(2.dp, Color.Red)
                .graphicsLayer {
                    compositingStrategy = CompositingStrategy.Offscreen
                }
                .drawWithContent {
                    val radius = 16.dp.toPx()
                    val badgeRadius = 12.dp.toPx()

                    val center = Offset(
                        size.width - radius ,
                        size.height - radius
                    )
                    
                    // Destination
                    drawContent()
                    
                    // Source
                    drawCircle(
                        color = Color.Transparent,
                        radius = radius,
                        center = center,
                        blendMode = BlendMode.Clear
                    )

                    drawCircle(
                        color = Color.Red,
                        radius = badgeRadius,
                        center = center
                    )
                },
            imageVector = Icons.Default.AccountCircle,
            contentDescription = null
        )
    }
}

You can also draw red circle if you wish to as in example above.