QML元素 - ThresholdMask

原创

于 2025-05-15 15:37:19 发布 · 309 阅读

10 ·

CC 4.0 BY-SA版权

文章标签：

#开发语言 #学习 #qt #性能优化

QML 的 ThresholdMask 用于根据阈值将源元素与遮罩元素的像素值进行比较，通过设定阈值范围来控制源元素的可见区域。它适用于基于亮度、透明度或颜色通道的动态遮罩效果，例如游戏中的血条、进度指示器或图像处理中的抠图。以下是详细使用技巧和场景示例：

1. 基本用法

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

Item {
    width: 300
    height: 300

    // 源元素（被遮罩的内容）
    Image {
        id: sourceImage
        source: "image.jpg"
        visible: false  // 隐藏源
    }

    // 遮罩元素（定义阈值参考）
    Rectangle {
        id: mask
        width: 200
        height: 200
        gradient: Gradient {  // 黑白渐变
            GradientStop { position: 0.0; color: "black" }
            GradientStop { position: 1.0; color: "white" }
        }
        visible: false
    }

    // 应用阈值遮罩
    ThresholdMask {
        anchors.fill: parent
        source: sourceImage  // 源内容
        maskSource: mask     // 遮罩参考
        threshold: 0.5      // 阈值（0.0~1.0）
        spread: 0.1         // 阈值过渡范围
    }
}