如何保存應用了OpacityMask的影像？

我正在處理一個專案，我想在其中完全按照顯示的方式保存渲染螢屏的縮略圖，包括OpacityMask. 問題是無論我做什么，它總是會在沒有應用的情況下創建縮略圖。

所以即使螢屏看起來像這樣：

創建的影像如下所示：

import QtQuick 2.15
import QtGraphicalEffects 1.12
import QtQuick.Layouts 1.2
import QtQuick.Controls 1.4
import QtQuick.Dialogs 1.1

ApplicationWindow {
    id: root
    width: 640
    property bool round: true

    toolBar: ToolBar {
        RowLayout {
            anchors.fill: parent
            anchors.margins: spacing
            CheckBox {
                id: roundCheckBox
                text: "Round"
                Component.onCompleted: checked = round
                onCheckedChanged: round = checked; 
            }
            Item { Layout.fillWidth: true }
        }
    }

    Rectangle {
        height: 640
        width: 640

        Rectangle {
            id: frame
            anchors.fill: parent
            focus: true
            color: "black"
            Image {
                id: background
                source: "background.jpg"
                anchors.fill: parent
            }
            Rectangle {
                anchors.centerIn: parent
                width: parent.width/2
                height: parent.height/2
                color: "red"
            }

            layer.enabled: round
            layer.effect:  OpacityMask {
                anchors.fill: parent
                source: frame
                maskSource: Rectangle {
                    width: frame.width
                    height: frame.height
                    radius: frame.width/2
                }
            }

            Keys.onReturnPressed: frame.grabToImage(
            function(result) {  
                result.saveToFile("example.jpg") 
            }, Qt.size(320, 320) )

        }
    }
}

uj5u.com熱心網友回復：

這似乎是一個范圍問題，您在未應用蒙版的級別抓取影像。使用grabToImage()你frame Rectangle的父母的功能。例如，我向該父級添加了一個 id，而是呼叫它，并獲得正確的輸出：

import QtQuick 2.15
import QtGraphicalEffects 1.12
import QtQuick.Layouts 1.2
import QtQuick.Controls 1.4
import QtQuick.Dialogs 1.1

ApplicationWindow {
    id: root
    width: 640
    property bool round: true

    toolBar: ToolBar {
        RowLayout {
            anchors.fill: parent
            anchors.margins: spacing
            CheckBox {
                id: roundCheckBox
                text: "Round"
                Component.onCompleted: checked = round
                onCheckedChanged: round = checked;
            }
            Item { Layout.fillWidth: true }
        }
    }

    Rectangle {
        id: frameParent // set parent ID here
        height: 640
        width: 640

        Rectangle {
            id: frame
            anchors.fill: parent
            focus: true
            color: "black"
            Image {
                id: background
                source: "background.jpg"
                anchors.fill: parent
            }
            Rectangle {
                anchors.centerIn: parent
                width: parent.width/2
                height: parent.height/2
                color: "red"
            }

            layer.enabled: round
            layer.effect:  OpacityMask {
                anchors.fill: parent
                source: frame
                maskSource: Rectangle {
                    width: frame.width
                    height: frame.height
                    radius: frame.width/2
                }
            }

            Keys.onReturnPressed: frameParent.grabToImage( // use parent ID here
            function(result) {
                result.saveToFile("example.jpg")
            }, Qt.size(320, 320) )

        }
    }
}

產生以下輸出example.jpg（使用我自己的隨機背景影像）：

我也能夠通過重新組織你的layer.effect而不是呼叫grabToImage()函式來半成功地讓它作業OpacityMask。不過，上面的解決方案要簡單得多。

標籤：qt 质量管理器 qtquick2 qt-快速 qtquickcontrols

上一篇：在F#中映射具有相同鍵的多個元素

下一篇：如何根據空行/空白行拆分字串？