Android Jetpack Compose Canvas：drawImage如何同时调整亮度、对比度等参数？

你遇到的问题核心在于ColorMatrix的setToSaturation()方法会完全覆盖之前构造的亮度对比度矩阵，导致只能保留最后一次的设置。而Compose的ColorMatrix确实没有提供postConcat方法，但我们可以手动实现矩阵合并，从而同时应用多个颜色变换。

问题代码回顾 #

drawImage(
    imageBitmaps[currentBitmapIndex].image,
    dstOffset = IntOffset.Zero,
    dstSize = IntSize(viewWidth, viewHeight),
    colorFilter = ColorFilter.colorMatrix(ColorMatrix(
        // 亮度与对比度矩阵
        floatArrayOf(
            contrast, 0f, 0f, 0f, brightness,
            0f, contrast, 0f, 0f, brightness,
            0f, 0f, contrast, 0f, brightness,
            0f, 0f, 0f, 1f, 0f
        )
    ).apply {
        // 饱和度设置会覆盖之前的矩阵
        setToSaturation(saturation)
    })
)

解决方案：手动合并颜色变换矩阵 #

我们可以给ColorMatrix编写一个扩展函数实现类似postConcat的功能，把多个变换矩阵合并成一个，这样就能同时应用所有颜色参数调整。

1. 实现矩阵合并的扩展函数

fun ColorMatrix.postConcat(other: ColorMatrix) {
    val result = FloatArray(20)
    val matrixA = this.array
    val matrixB = other.array

    // 执行4x5颜色矩阵乘法：result = matrixA * matrixB
    for (row in 0..3) {
        for (col in 0..4) {
            result[row * 5 + col] =
                matrixA[row * 5 + 0] * matrixB[0 * 5 + col] +
                matrixA[row * 5 + 1] * matrixB[1 * 5 + col] +
                matrixA[row * 5 + 2] * matrixB[2 * 5 + col] +
                matrixA[row * 5 + 3] * matrixB[3 * 5 + col] +
                (if (col == 4) matrixA[row * 5 + 4] else 0f)
        }
    }
    System.arraycopy(result, 0, this.array, 0, 20)
}

2. 构造色温变换矩阵

色温调整本质是调整红、蓝通道的增益：暖色调提升红色通道、降低蓝色通道；冷色调则相反。可以用工具函数生成对应矩阵：

fun createWarmthMatrix(warmth: Float): ColorMatrix {
    // warmth范围建议设为-1（冷色）到1（暖色）
    val redGain = if (warmth > 0) 1 + warmth else 1f
    val blueGain = if (warmth < 0) 1 - warmth else 1f
    return ColorMatrix(floatArrayOf(
        redGain, 0f, 0f, 0f, 0f,
        0f, 1f, 0f, 0f, 0f,
        0f, 0f, blueGain, 0f, 0f,
        0f, 0f, 0f, 1f, 0f
    ))
}

3. 合并所有变换矩阵并应用

// 1. 创建亮度对比度矩阵
val brightnessContrastMatrix = ColorMatrix(floatArrayOf(
    contrast, 0f, 0f, 0f, brightness,
    0f, contrast, 0f, 0f, brightness,
    0f, 0f, contrast, 0f, brightness,
    0f, 0f, 0f, 1f, 0f
))

// 2. 创建饱和度矩阵
val saturationMatrix = ColorMatrix().apply {
    setToSaturation(saturation)
}

// 3. 创建色温矩阵
val warmthMatrix = createWarmthMatrix(warmth)

// 4. 合并矩阵（注意顺序：后合并的矩阵会先应用到图片上，可根据需求调整）
brightnessContrastMatrix.postConcat(saturationMatrix)
brightnessContrastMatrix.postConcat(warmthMatrix)

// 5. 在drawImage中使用合并后的矩阵
drawImage(
    imageBitmaps[currentBitmapIndex].image,
    dstOffset = IntOffset.Zero,
    dstSize = IntSize(viewWidth, viewHeight),
    colorFilter = ColorFilter.colorMatrix(brightnessContrastMatrix)
)

注意事项 #

• 矩阵合并顺序会影响最终效果：比如先应用饱和度再调整亮度，和先调亮度再应用饱和度，结果略有不同，可根据实际需求调整。
• 参数建议范围：亮度-255f~255f、对比度0f~2f、饱和度0f~2f、色温-1f~1f，能获得更自然的视觉效果。

内容的提问来源于stack exchange，提问作者Phan Quang Thang