Haze 高斯模糊库技术分析

commonMain           // 跨平台公共代码
androidMain          // Android 平台实现
skikoMain            // Skiko 平台（Desktop / iOS / macOS / Web）

// haze/src/commonMain/kotlin/dev/chrisbanes/haze/HazeSourceNode.kt:180
override fun ContentDrawScope.draw() {
    if (size.minDimension.roundToInt() >= 1) {
        val contentLayer = area.contentLayer
            ?.takeUnless { it.isReleased }
            ?: graphicsContext.createGraphicsLayer()
        contentLayer.record {
            this@draw.drawContentSafely()
        }
        drawLayer(contentLayer)
    } else {
        drawContentSafely()
    }
}

public class HazeEffectNode(
    state: HazeState,
    public var block: (HazeEffectScope.() -> Unit)? = null,
) : Modifier.Node(),
    CompositionLocalConsumerModifierNode,
    GlobalPositionAwareModifierNode,
    LayoutAwareModifierNode,
    ObserverModifierNode,
    DrawModifierNode,
    TraversableNode,
    HazeEffectScope

override fun ContentDrawScope.draw() {
    if (state != null) {
        // === 背景模糊 ===
        with(visualEffect) { draw(visualEffectContext) }
        drawContentSafely()
    } else {
        // === 前景模糊 ===
        contentLayer.record(size.toIntSize()) {
            this@draw.drawContentSafely()
        }
        with(visualEffect) { draw(visualEffectContext) }
    }
}

val graphicsContext = currentValueOf(LocalGraphicsContext)
val contentLayer = area.contentLayer
    ?.takeUnless { it.isReleased }
    ?: graphicsContext.createGraphicsLayer().also {
        area.contentLayer = it
    }

internal fun canUseRenderEffect(sdkInt: Int, isHardwareAccelerated: Boolean): Boolean {
    return sdkInt >= 31 && isHardwareAccelerated
}

createBlurRenderEffect(...)              // ① 高斯模糊
    .blendForeground(noise, Softlight)   // ② 叠加噪点
    .withTints(colorEffects, ...)        // ③ 叠加色调
    .withMask(mask, ...)                 // ④ 应用遮罩
    .asComposeRenderEffect()             // ⑤ 转换为 Compose RenderEffect

// Android 端
actual fun createBlurRenderEffect(...): PlatformRenderEffect? {
    val blurEffect = RenderEffect.createBlurEffect(radiusX, radiusY, edgeTreatment)
    return if (input != null) {
        RenderEffect.createChainEffect(blurEffect, input)
    } else {
        blurEffect
    }
}

// commonMain (接口声明)
expect class PlatformRenderEffect
expect class PlatformColorFilter
expect class PlatformRuntimeEffect

// androidMain (Android 实现)
actual typealias PlatformRenderEffect = android.graphics.RenderEffect
actual typealias PlatformColorFilter = android.graphics.ColorFilter
actual typealias PlatformRuntimeEffect = android.graphics.RuntimeEffect // API 33+

// skikoMain (Skiko 实现)
actual typealias PlatformRenderEffect = org.jetbrains.skia.ImageFilter
actual typealias PlatformColorFilter = org.jetbrains.skia.ColorFilter
actual typealias PlatformRuntimeEffect = org.jetbrains.skia.RuntimeEffect

private fun radiusToSigma(radius: Float): Float {
    return radius * 0.57735f + 0.5f
}

private fun createGradientBlurRenderEffect(...): PlatformRenderEffect {
    fun shader(vertical: Boolean): PlatformRenderEffect = createRuntimeShaderRenderEffect(
        effect = if (vertical) VERTICAL_BLUR_SHADER else HORIZONTAL_BLUR_SHADER,
        shaderNames = arrayOf("content"),
        inputs = arrayOf(null),
    ) {
        setFloatUniform("blurRadius", blurRadiusPx)
        setChildShader("mask", mask)
    }
    return shader(vertical = false).then(shader(vertical = true))
}

iosMain { dependsOn(skikoMain) }    // iOS 继承 skikoMain 所有代码
macosMain { dependsOn(skikoMain) }  // macOS 也一样

@Composable
fun Greeting(name: String) {
    Text("Hello, $name!")
}

// "切断"直接绘制、重定向到离屏缓冲区
contentLayer.record {
    this@draw.drawContentSafely()  // 内容被录制到纹理，而非屏幕
}
drawLayer(contentLayer)            // 纹理映射到屏幕（轻量操作）

layer.renderEffect = createRenderEffect(  // 设置 GPU 后处理特效
    blurRadius = blurRadius,
    noise = noise,
    colorEffects = colorEffects,
    mask = mask,
)
drawLayer(layer)  // GPU 在绘制此层时自动应用 RenderEffect

view.renderEffect = RenderEffect.createBlurEffect(
    radiusX, radiusY, edgeTreatment
)

Modifier
    .hazeSource(state)
    .hazeEffect(state) {
        visualEffect = BlurVisualEffect().apply {
            blurRadius = 20.dp
            colorEffects = listOf(
                HazeColorEffect.tint(Color.Black.copy(alpha = 0.3f))
            )
        }
    }

blurEffect                       // ① 高斯模糊
    .blendForeground(noise, ...)  // ② 叠加噪点纹理
    .withTints(tintList, ...)     // ③ 叠加色调
    .withMask(mask, ...)          // ④ 应用遮罩
    .asComposeRenderEffect()      // ⑤ 转换为 Compose RenderEffect

Auto → when {
    blurRadius < 7.dp  → 1f       // 小半径不缩放
    progressive != null → 0.5f     // 渐进模糊缩放到 50%
    mask != null        → 0.5f
    else                → 0.3334f  // 均匀模糊缩放到 33%
}

Modifier.hazeEffect(state) {
    visualEffect = BlurVisualEffect().apply {
        blurRadius = 20.dp
    }
    
    // 三种选择
    inputScale = HazeInputScale.Auto        // ① 自动（默认）
    // inputScale = HazeInputScale.None     // ② 不降采样 = 1.0f
    // inputScale = HazeInputScale.Fixed(0.5f) // ③ 自定义
}

// 低端设备上大半径模糊 → 性能优先
inputScale = HazeInputScale.Fixed(0.25f)  // 强制 1/16 像素

// 高DPI屏幕上的小半径模糊 → 保画质
inputScale = HazeInputScale.None

@Composable
fun MyScreen() {
    // 我需要给背景加毛玻璃效果
    // 但 Compose 的 Canvas 上没法直接调 UIVisualEffectView
}

// 理论上可以，实际上问题很多
UIKitView(
    factory = {
        UIVisualEffectView(effect: UIBlurEffect(style = .systemMaterial))
    }
)

dependencies {
    // Haze 核心 + 模糊特效 + 材料预设
    implementation("dev.chrisbanes.haze:haze:1.7.2")
    implementation("dev.chrisbanes.haze:haze-blur:1.7.2")
    implementation("dev.chrisbanes.haze:haze-materials:1.7.2")

    // 其他常规 Compose 依赖
    implementation("androidx.compose.material3:material3:1.3.1")
    // ...
}

plugins {
    id("org.jetbrains.kotlin.android") version "2.0.21" apply false
    id("org.jetbrains.kotlin.plugin.compose") version "2.0.21" apply false
}

plugins {
    id("org.jetbrains.kotlin.plugin.compose") // Kotlin 2.0+ 分离出来的 Compose 编译器插件
}

android {
    compileSdk = 35  // 或 34

    buildFeatures {
        compose = true
    }
}

// ✅ 正确：同一个 hazeState 实例
val hazeState = rememberHazeState()
LazyColumn(modifier = Modifier.hazeSource(state = hazeState)) { ... }
TopAppBar(modifier = Modifier.hazeEffect(state = hazeState) { ... })

// ❌ 错误：两个不同的 state，效果不会连接
val state1 = rememberHazeState()
val state2 = rememberHazeState()

progressive = HazeProgressive.verticalGradient(
    startIntensity = 1f,
    endIntensity = 0f,
    easing = FastOutSlowInEasing,  // 默认 EaseIn，换这个过渡更柔和
)

// 太激进 → 模糊结果可能马赛克感
inputScale = HazeInputScale.Fixed(0.15f)

// 建议：渐进模糊至少保持 0.5x
inputScale = HazeInputScale.Fixed(0.5f)