Jetpack Compose中如何实现从一个形状中裁切另一个形状

要实现从一个形状中挖去另一个形状的镂空效果，核心是使用混合模式的清除能力，注意必须开启离屏图层才能让混合模式生效，否则会出现绘制异常。

修改后的实现代码如下：

Box(
    modifier = Modifier
        .fillMaxSize()
        .height(300.dp)
) {
    Canvas(modifier = Modifier.matchParentSize()) {
        // 开启离屏图层，为混合模式提供绘制缓冲
        withLayer {
            // 绘制底层黄色圆角矩形
            drawRoundRect(
                color = Color.Yellow,
                cornerRadius = CornerRadius(16.dp.toPx(), 16.dp.toPx())
            )
            // 以Clear混合模式绘制需要挖除的圆角矩形，直接从已有绘制内容中移除对应区域
            drawRoundRect(
                color = Color.Transparent,
                topLeft = Offset(
                    x = size.width / 5,
                    y = size.height - 60.dp.toPx()
                ),
                size = Size((size.width / 5) * 3, 50.dp.toPx() * 2),
                cornerRadius = CornerRadius(24.dp.toPx(), 24.dp.toPx()),
                blendMode = BlendMode.Clear
            )
        }
    }

    Box(
        modifier = Modifier
            .fillMaxSize()
            .padding(16.dp)
    ) {
        Text(
            text = "Test",
            modifier = Modifier.align(Alignment.BottomCenter)
        )
    }
}

实现说明：

• withLayer 会创建独立的离屏绘制缓冲，避免混合模式直接作用于底层画布导致效果异常
• BlendMode.Clear 会将当前绘制区域内已经存在的绘制内容全部清除，形成镂空效果，镂空区域会透出画布下层的内容
• 无需绘制白色矩形覆盖，直接清除对应区域即可实现预期的缺口效果

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