如何自定义BlendMode？实现文字与背景像素的联动调色

一、BlendMode的底层逻辑 #

系统预定义的BlendMode之所以高效无卡顿，核心是GPU硬件加速的批量像素运算——它们本质是封装好的GLSL片段着色器程序，在绘制时由GPU并行处理所有像素，完全避开了CPU串行遍历的性能瓶颈。

你之前用CPU逐个检测临时Canvas像素的方法，不仅要额外创建Bitmap、占用内存，还因为CPU单线程处理像素，一旦画布或文字尺寸变大，卡顿必然出现。

二、高效自定义混合的核心方案：用RuntimeShader实现GPU级自定义逻辑 #

Android 12（API 31）及以上提供了RuntimeShader，允许你直接编写GLSL代码实现自定义像素混合逻辑，完全复用GPU加速能力，和系统BlendMode性能一致。

1. 核心思路 #

通过GLSL片段着色器，同时获取文字的源像素和对应位置的背景像素，执行自定义混合运算后输出最终像素颜色。

2. 实现步骤 #

（1）编写GLSL混合逻辑

uniform shader inputShader;       // 文字的源着色器（承载文字的颜色/Alpha信息）
uniform sampler2D backgroundTex;  // 背景纹理
uniform vec2 resolution;          // 画布分辨率

half4 main(vec2 fragCoord) {
    // 获取当前像素的文字源颜色
    half4 srcColor = inputShader.eval(fragCoord);
    
    // 透明区域直接返回背景像素，不做处理
    if (srcColor.a < 0.01) {
        vec2 uv = fragCoord / resolution;
        return texture(backgroundTex, uv);
    }
    
    // 获取当前像素对应的背景颜色
    vec2 uv = fragCoord / resolution;
    half4 dstColor = texture(backgroundTex, uv);
    
    // ---------- 自定义混合逻辑（示例：文字颜色取背景补色）----------
    half3 mixedRgb = 1.0 - dstColor.rgb;
    return half4(mixedRgb, srcColor.a);
}

你可以根据需求修改mixedRgb的计算逻辑，比如按背景亮度调整文字透明度、叠加背景色等。

（2）在自定义View中集成RuntimeShader

class CustomBlendView(context: Context, attrs: AttributeSet) : View(context, attrs) {
    private val textPaint = Paint(Paint.ANTI_ALIAS_FLAG).apply {
        textSize = 140f
        color = Color.WHITE
    }
    private lateinit var backgroundBitmap: Bitmap
    private lateinit var customShader: RuntimeShader
    private val shaderPaint = Paint(Paint.ANTI_ALIAS_FLAG)

    override fun onSizeChanged(w: Int, h: Int, oldw: Int, oldh: Int) {
        super.onSizeChanged(w, h, oldw, oldh)
        
        // 初始化背景Bitmap（替换为你的实际背景）
        backgroundBitmap = Bitmap.createBitmap(w, h, Bitmap.Config.ARGB_8888)
        Canvas(backgroundBitmap).drawColor(Color.parseColor("#F5D0A9"))
        
        // 加载GLSL代码并初始化RuntimeShader
        val shaderCode = """
            uniform shader inputShader;
            uniform sampler2D backgroundTex;
            uniform vec2 resolution;

            half4 main(vec2 fragCoord) {
                half4 srcColor = inputShader.eval(fragCoord);
                if (srcColor.a < 0.01) {
                    vec2 uv = fragCoord / resolution;
                    return texture(backgroundTex, uv);
                }
                vec2 uv = fragCoord / resolution;
                half4 dstColor = texture(backgroundTex, uv);
                half3 mixedRgb = 1.0 - dstColor.rgb;
                return half4(mixedRgb, srcColor.a);
            }
        """.trimIndent()
        customShader = RuntimeShader(shaderCode)
        
        // 绑定Shader参数
        customShader.setInputShader("inputShader", textPaint.asShader())
        customShader.setSampler("backgroundTex", backgroundBitmap)
        customShader.setFloatUniform("resolution", w.toFloat(), h.toFloat())
        
        shaderPaint.shader = customShader
    }

    override fun onDraw(canvas: Canvas) {
        super.onDraw(canvas)
        // 绘制背景（如果背景动态变化，需同步更新backgroundTex采样器）
        canvas.drawBitmap(backgroundBitmap, 0f, 0f, null)
        // 用自定义Shader绘制文字
        val textX = width / 2f - textPaint.measureText("A") / 2
        val textY = height / 2f + textPaint.textSize / 3
        canvas.drawText("A", textX, textY, shaderPaint)
    }

    override fun onDetachedFromWindow() {
        super.onDetachedFromWindow()
        backgroundBitmap.recycle()
    }
}

3. 低版本兼容方案（API < 31） #

如果需要支持Android 12以下版本，推荐用Jetpack RenderScript做并行像素处理：

1. 先将文字绘制到临时Bitmap（仅保留Alpha通道作为蒙版）
2. 用RenderScript编写自定义内核，对背景Bitmap和文字蒙版做混合运算
3. 将运算后的结果Bitmap绘制到画布

虽然需要临时Bitmap，但RenderScript是CPU/GPU并行处理，性能远优于CPU逐个像素遍历。

三、性能优化关键 #

• 缓存资源：背景Bitmap、Shader等资源只在尺寸变化时初始化，不要在onDraw中重复创建
• 减少内存开销：避免创建过大的临时Bitmap，尽量复用资源
• 动态更新参数：如果背景或文字位置变化，仅更新Shader的uniform变量，无需重建Shader
• 优先GPU方案：能用RuntimeShader/RenderEffect就不用CPU或RenderScript

内容的提问来源于stack exchange，提问作者Allo Moondragon