QML元素 - GaussianBlur

QML 的 GaussianBlur 用于实现高质量高斯模糊效果，相比 FastBlur 效果更平滑（但性能消耗更大），适合对视觉效果要求较高的场景（如桌面端或静态元素）。以下是详细使用技巧和优化指南：

---

1. 基本用法

import QtQuick 2.15
import QtQuick.Effects 1.15  // 确保模块正确引入

Image {
    id: sourceImage
    source: "image.jpg"
    anchors.fill: parent

    // 应用高斯模糊
    layer.enabled: true
    layer.effect: GaussianBlur {
        anchors.fill: sourceImage
        radius: 32           // 模糊半径（0~64）
        samples: 64          // 采样数（通常为 radius*2）
        transparentBorder: true  // 处理边缘透明区域
    }
}

关键属性：

• radius：模糊半径，值越大模糊范围越广（0 到 64）。
• samples：采样数，通常设为 radius * 2（如 radius: 32, samples: 64），值越高越平滑。
• transparentBorder：设为 true 避免模糊边缘出现黑边（需源元素有透明区域）。
• cached：设为 true 缓存模糊结果，提升静态模糊性能。

---

2. 效果优化

(1) 平滑度与性能平衡

GaussianBlur {
    radius: 24
    samples: 32  // 适当降低采样数（牺牲平滑度换取性能）
    cached: true // 对静态模糊启用缓存
}

• 低端设备建议：samples 不超过 32，radius 不超过 16。

(2) 边缘黑边处理

Image {
    source: "content.png"
    layer.enabled: true
    layer.effect: GaussianBlur {
        radius: 24
        samples: 48
        transparentBorder: true  // 扩展模糊到透明边界外
    }
    // 确保源图像有透明边距（如缩放为 105%）
    sourceSize: Qt.size(width*1.05, height*1.05)
}

---

3. 动态模糊效果

(1) 结合动画实现模糊渐入

GaussianBlur {
    id: blurEffect
    radius: 0
    samples: 0

    Behavior on radius { NumberAnimation { duration: 500 } }
    Behavior on samples { NumberAnimation { duration: 500 } }
}

// 点击后触发模糊
MouseArea {
    anchors.fill: parent
    onClicked: {
        blurEffect.radius = 32;
        blurEffect.samples = 64;
    }
}

(2) 视差滚动模糊

ListView {
    id: listView
    // ... 列表内容

    GaussianBlur {
        source: listView.contentItem  // 绑定到列表内容
        radius: Math.min(64, listView.contentY * 0.5) // 根据滚动位置动态模糊
        samples: radius * 2
    }
}

---

4. 性能优化

• 降低源分辨率：通过 layer.textureSize 缩小渲染纹理：

  layer.textureSize: Qt.size(width/2, height/2)  // 降采样至 50%
  

• 限制动态更新频率：避免每帧修改 radius 或 samples。
• 静态模糊启用缓存：cached: true（默认启用）。

---

5. 进阶技巧

(1) 局部模糊（遮罩裁剪）

Rectangle {
    width: 300
    height: 300
    layer.enabled: true
    layer.effect: OpacityMask {
        maskSource: Rectangle {  // 圆形遮罩
            width: 300
            height: 300
            radius: 150
        }
        GaussianBlur {
            radius: 32
            samples: 64
        }
    }
}

(2) 文字模糊特效

Text {
    text: "Blurred Text"
    font.pixelSize: 48
    layer.enabled: true
    layer.effect: GaussianBlur {
        radius: 8
        samples: 16
    }
}

(3) 背景模糊 + 半透明叠加

// 背景图
Image {
    id: bg
    source: "bg.jpg"
}

// 前景浮层
Rectangle {
    anchors.fill: parent
    color: "transparent"

    GaussianBlur {
        source: bg         // 绑定背景
        radius: 24
        samples: 48
    }

    Rectangle {
        anchors.fill: parent
        color: "#80000000"  // 叠加半透明黑色层
    }

    Text {
        text: "Content"
        color: "white"
        anchors.centerIn: parent
    }
}

---

6. 常见问题

(1) 模糊效果不显示

• 检查 layer.enabled 是否设为 true。
• 确认 radius 和 samples 值大于 0。
• 确保源元素（如 Image）已正确加载。

(2) 性能卡顿

• 降低 samples 值（如从 64 改为 32）。
• 避免在低端设备上使用 radius > 32。

(3) 模糊边缘锯齿

• 增加 samples 值（至少 radius * 2）。
• 启用 layer.smooth: true。

---

7. 与 FastBlur 的对比

特性	GaussianBlur	FastBlur
模糊质量	更高（接近理论高斯分布）	较低（近似优化算法）
性能消耗	较高（适合桌面端或静态元素）	较低（适合移动端或动态效果）
适用场景	背景虚化、高精度UI、截图后处理	实时动画、低性能设备

---

总结

• 核心优势：高质量的平滑模糊效果，适合对视觉效果要求严格的场景。
• 关键参数：radius（范围控制）、samples（平滑度）、transparentBorder（边缘处理）。
• 适用场景：对话框背景虚化、艺术化滤镜、静态元素特效。
• 注意事项：在移动端谨慎使用，优先考虑 FastBlur 或降低 samples 值。