QML元素 - MaskedBlur-优快云博客

本文链接：https://blog.youkuaiyun.com/daybreakboy/article/details/146905770

查无此元素

在Qt Quick中，MaskedBlur 是一个用于实现带遮罩的模糊效果的特效元素，常用于界面设计中对特定区域应用模糊效果（例如对话框背景模糊、半透明遮罩等）。以下是使用 MaskedBlur 的技巧和示例代码，帮助你高效实现所需效果。

1. 基础用法

MaskedBlur 需要配合遮罩（Mask）和源区域（Source）使用，通过遮罩定义模糊的可见区域。

示例代码：

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.Controls 2.15
import QtQuick.Effects 1.0

Window {
    visible: true
    width: 640
    height: 480

    // 背景内容（例如图片或复杂布局）
    Image {
        id: background
        source: "background.jpg"
        anchors.fill: parent
    }

    // 带模糊效果的对话框
    Rectangle {
        id: dialog
        width: 300
        height: 200
        color: "white"
        radius: 10
        anchors.centerIn: parent

        // 应用模糊遮罩
        MaskedBlur {
            id: blurEffect
            source: background  // 指定模糊的源区域
            mask: dialog        // 指定遮罩区域（仅在遮罩外显示模糊效果）
            radius: 10          // 模糊半径（值越大越模糊）
            samples: 1          // 模糊采样次数（值越大越清晰但性能越低）
            anchors.fill: parent
        }

        // 对话框内容
        Text {
            text: "This is a blurred dialog"
            anchors.centerIn: parent
        }
    }
}

关键属性说明：

source：指定需要模糊的源区域（例如背景图片或父容器）。
mask：定义模糊效果的可见区域。模糊效果仅在遮罩的外部显示（即遮罩内部区域不显示模糊）。
radius：模糊半径，值越大模糊效果越强，但性能越差。
samples：模糊采样次数，值越大效果越清晰，但计算量越大。

2. 高级技巧

2.1. 自定义遮罩形状

可以通过 Path 或 Shape 定义复杂遮罩形状：

MaskedBlur {
    source: background
    mask: Shape {
        width: 200
        height: 200
        ShapePath {
            strokeWidth: 0
            strokeColor: "transparent"
            fillColor: "white"
            PathQuad {
                x: 100; y: 0
                controlX: 50; controlY: 100
            }
            PathQuad {
                x: 200; y: 200
                controlX: 150; controlY: 100
            }
        }
    }
    radius: 10
}

2.2. 动态更新遮罩

通过绑定属性动态改变遮罩区域：

Rectangle {
    id: movableMask
    width: 100
    height: 100
    color: "white"
    MouseArea {
        anchors.fill: parent
        drag.target: parent
    }
}

MaskedBlur {
    source: background
    mask: movableMask
    radius: 10
}

2.3. 性能优化

降低 radius 和 samples：减少模糊半径和采样次数可提升性能。
限制模糊区域范围：仅对需要模糊的区域应用效果，避免全屏模糊。
使用 sourceRegion：指定模糊的源区域（如 sourceRegion: dialog.parent）。
硬件加速：确保项目启用OpenGL渲染（在.pro中添加 QT += quick 并设置 QSG_RENDER_LOOP = basic）。

2.4. 混合模糊与透明度

结合透明度（opacity）实现渐变模糊效果：

MaskedBlur {
    source: background
    mask: dialog
    radius: 10
    opacity: 0.5  // 调整模糊层的透明度
}

2.5. 多层模糊叠加

通过嵌套多个 MaskedBlur 实现复杂效果：

Item {
    width: 640
    height: 480

    MaskedBlur {
        id: outerBlur
        source: background
        mask: rect1
        radius: 20
    }

    Rectangle {
        id: rect1
        width: 300
        height: 300
        color: "transparent"

        MaskedBlur {
            source: outerBlur  // 使用外层模糊作为源
            mask: rect2
            radius: 10
        }

        Rectangle {
            id: rect2
            width: 200
            height: 200
            color: "white"
        }
    }
}

3. 常见问题与解决方案

3.1. 模糊效果不显示

原因：遮罩（mask）未正确绑定或遮罩区域与模糊区域重叠。
解决：
- 确保 mask 是一个可见的 Item。
- 调整遮罩位置，确保模糊区域在遮罩外部。

3.2. 性能卡顿

原因：radius 或 samples 值过高，或模糊区域过大。
解决：
- 减小 radius 和 samples。
- 使用 sourceRegion 限制模糊区域。

3.3. 遮罩形状不生效

原因：遮罩的 fillColor 未设置为不透明颜色（如白色）。

解决：

Shape {
    fillColor: "white"  // 必须为不透明颜色
}

4. 替代方案

如果 MaskedBlur 性能不足，可以考虑以下方法：

自定义Shader：通过着色器实现更高效的模糊效果（需编写GLSL代码）。
预渲染模糊图层：将模糊后的图片缓存为纹理，动态更新时减少计算量。

5. 注意事项

Qt版本要求：MaskedBlur 需要 Qt 5.12 或更高版本。
硬件支持：模糊效果依赖GPU加速，低性能设备可能表现不佳。
内存消耗：大尺寸的模糊区域会显著增加内存使用。

通过以上技巧，你可以灵活控制模糊效果的可见区域、性能和视觉效果，满足复杂界面设计需求。