Android Compose 图层的合成 : BlendMode

1. 图形的合成是什么 ?

Compose中，图层的合成，通过BlendMode来控制 "显示谁、保留哪部分"，常用于裁剪、遮罩、图层叠加。

1.1 初始界面

@Preview
@Composable
fun MyBlendModeTest() {
    Box {
        Box(
            Modifier
                .size(100.dp)
                .background(Color.Red, CircleShape)
        )
        Box(Modifier
            .padding(start = 30.dp, top = 30.dp)
            .size(100.dp)
            .background(Color.Blue, CircleShape))
    }
}

默认的显示效果

1.2 Modifier.graphicsLayer

Modifier.graphicsLayer会把组件内容绘制到独立图层，变换 / 动画只重绘图层，不触发重组，也不影响父布局测量。

@Preview
@Composable
fun MyBlendModeTest() {
    Box {
        Box(
            Modifier
                .size(100.dp)
                .background(Color.Red, CircleShape)
        )
        Box(Modifier
            .graphicsLayer(blendMode = ...)
            .padding(start = 30.dp, top = 30.dp)
            .size(100.dp)
            .background(Color.Blue, CircleShape))
    }
}

2. BlendMode : 图层的合成

2.1 BlendMode.SrcOver

graphicsLayer的blendMode的默认值是BlendMode.SrcOver，和不加graphicsLayer的效果一样，叠加在上面。

在图形绘制的概念里

source : 源图形 = 蓝色圆

destination : 目标图形 = 背景 + 红色圆

2.2 BlendMode.DstOver

目标在上、源在下；目标透明处显源。

2.3 BlendMode.Src

仅显示源图，完全覆盖目标。

2.4 BlendMode.Dst

仅显示目标图，丢弃源图。

2.5 BlendMode.SrcIn

仅保留重叠部分，且只显示源图内容（常用作遮罩）

2.6 BlendMode.DstIn

仅保留重叠部分，且只显示目标图内容

2.7 BlendMode.SrcOut

仅保留源图非重叠部分，重叠区透明。

2.8 BlendMode.DstOut

仅保留目标非重叠部分，重叠区透明。

2.9 BlendMode.SrcAtop

2.10 BlendMode.DstAtop

显示源全貌，重叠区用目标图。

2.11 BlendMode.Xor

重叠区透明，非重叠区保留各自

2.12 BlendMode.Clear

清除重叠区域，变透明。

3. BlendMode : 颜色混合

除了图像的合成，还支持颜色的混合。可以基于源与目标的RGB 通道做色彩运算，用于滤镜、特效、艺术合成。

这里介绍其中几个。

3.1 BlendMode.Plus

把源和目标的颜色通道直接相加

3.2 BlendMode.Modulate

只乘颜色通道，不乘 Alpha

3.3 BlendMode.Screen

反色相乘 → 再反色（变亮模式)

3.4 BlendMode.Overlay

根据底色自动选择 Multiply 或 Screen

3.5 BlendMode.Darken

每个通道取更暗的那个

3.6 BlendMode.Lighten

每个通道取更亮的那个

3.7 BlendMode.Hue

只用源的色相，保留目标的饱和度 + 亮度

4. 离屏缓冲

详见我的另一篇博文Android Compose 离屏缓冲