QML 图像遮罩答案

【问题标题】：QML Image MaskingQML 图像遮罩
【发布时间】：2022-10-23 15:49:13
【问题描述】：

我一直在做一个项目，我需要应用图像蒙版来应用这样的效果：

图一：https://i.stack.imgur.com/6zI2x.jpg

图二：https://i.stack.imgur.com/z7IVX.jpg

面具框：https://i.stack.imgur.com/3syEm.jpg

想要的效果：https://i.stack.imgur.com/t2kO5.jpg

我通过使用 OpacityMask 让它工作，但是要做到这一点，我必须使用一些 Photoshop 并编辑我的蒙版框架图像。我需要将此效果应用于具有不同形状的多个蒙版框架，因此使用 Photoshop 编辑所有蒙版似乎很麻烦。此外，蒙版框架图像的内部也不是全透明的。

你有什么想法可以给我解决这个问题，而不需要使用任何预Photoshop处理每个蒙版帧图像。我试图研究 ShaderEffect，但我无法真正理解我应该如何将它用于我的目的。此外，我搜索了类似 OpacityMask 的效果，但仅在具有特定颜色/特定形状区域的蒙版图像的一部分上工作。但是，我找不到任何东西。

【问题讨论】：

为什么你甚至需要 Photoshop，我不明白。无论如何，您能否更具体地说明您所指的形状？一个圆圈？三角形？还是只是一个矩形？你的框架的中心是透明的吗？如果没有，您是否尝试过使用Blend？
@SMR 正如我所说，框架的中心不透明。我拥有的每个面具都有不同的形状。就像一个是椭圆形的，另一个是矩形等。它们唯一的相似之处是它们的中心是相同的颜色，它们的框架是相同的颜色。我会研究混合

标签： qt qml qtquick2

【解决方案1】：

你可以通过使用OpacityMask 两次来解决这个问题。第一个 OpacityMask 你实际上应用在你的框架上，删除了白色的内部：

    Item {
        id: mask
        anchors.centerIn: parent
        width: rawMask.width
        height: rawMask.height
        Image {
            id: rawMask
            width: 205
            height: 250
            source: "https://i.stack.imgur.com/3syEm.jpg"
            visible: false
        }
        Rectangle {
            id: borderMask
            anchors.fill: parent
            border.width: 18
            border.color: "brown"
            color: "transparent"
        }
        OpacityMask {
            anchors.fill: parent
            source: rawMask
            maskSource: borderMask
        }
    }

现在我们已经清理了框架，我们可以使用该框架作为另一个 OpacityMask 的输入。完成的结果如下：

import QtQuick 2.15
import QtQuick.Controls 2.15
import QtGraphicalEffects 1.0

Page {
    Image {
        id: pic1
        anchors.fill: parent
        source: "https://i.stack.imgur.com/6zI2x.jpg"
    }

    Image {
        id: pic2
        anchors.fill: parent
        visible: false
        source: "https://i.stack.imgur.com/z7IVX.jpg"
    }

    Item {
        id: mask
        anchors.centerIn: parent
        width: rawMask.width
        height: rawMask.height
        Image {
            id: rawMask
            width: 205
            height: 250
            source: "https://i.stack.imgur.com/3syEm.jpg"
            visible: false
        }
        Rectangle {
            id: borderMask
            anchors.fill: parent
            border.width: 18
            border.color: "brown"
            color: "transparent"
        }
        OpacityMask {
            anchors.fill: parent
            source: rawMask
            maskSource: borderMask
        }
    }

    OpacityMask {
        anchors.fill: mask
        source: pic2
        maskSource: mask
        invert: true
    }
}

最终图像：

【讨论】：