Question

我希望将一个LinearGradient用作背景，跨越几个兄弟Rectangle。在每个Rectangle中，您可以看到渐变的不同部分。我使用OpacityMask来“填充”Rectangle s和渐变。 LinearGradient width是每个Rectangle width的总和。

如果我使用单个Rectangle，它就有效。从两个开始，它不正常，无论我尝试什么（我在下面的代码中留下想象的位）。到目前为止，我得到的最好结果是在每个LinearGradient中重复Rectangle的相同部分。我想我可以使用LinearGradient每个Rectangle，更改GradientStop值，但它看起来很复杂，我想有一个简单优雅的解决方案。

    Rectangle
    {
        id: page1
//        anchors.fill: parent

//            id: masqCont
            anchors.centerIn: parent
            border.color: "blue"
            width: childrenRect.width
            height: childrenRect.height
            visible: false

            Rectangle
            {
                id: masq1
                y:0
                border.color: "red"
                border.width: 10
                width: 100
                height: 100
                radius: 40
                Text {text: "Un"}
                visible: true
            }
            Rectangle
            {
                x:width
                id: masq2
                border.color: "red"
                border.width: 10
                width: 100
                height: 100
                radius: 40
                Text {text: "deux"}
                Text {text: "deux"}
                visible: true
            }
    }

            LinearGradient {
                id:grad
                width: 200 //masqCont.childrenRect.width
                height: 100//masqCont.childrenRect.height

                //anchors.fill: masqCont
                start: Qt.point(0, 0)
                end: Qt.point(200,100)//masqCont.width, masqCont.height)
                gradient: Gradient {
                    GradientStop { position: 0.0; color: "white" }
                    GradientStop { position: 1.0; color: "black" }
                }
                visible: false
            }
            OpacityMask {
                id: om21
                anchors.fill: page1;
                source: grad
                maskSource: page1;
            }
//            OpacityMask {
//                id: om21
//                anchors.fill: masq1;
//                source: grad
//                maskSource: masq1;
//            }
//            OpacityMask {
//                id: om22
//                anchors.fill: masq2;
//                source: grad
//                maskSource: masq2;
//            }
  //      }

//    }

Answer 1

你快到了。

主要问题是您选择了一个白色矩形作为子矩形的容器。这会导致显示整个LinearGradient，因为蒙版是完全不透明的（没有alpha）。

请参阅下面的工作示例（您可以通过拖动来移动矩形）

import QtQuick 2.7
import QtQuick.Window 2.0
import QtQuick.Controls 2.0
import QtGraphicalEffects 1.0

ApplicationWindow
{
    visible: true
    width: 500
    height: 400

    Item
    {
        id: page1
        anchors.fill: parent
        opacity: 0
        Repeater
        {
            model: 20
            Rectangle
            {
                id: masq1
                x:Math.random()*(page1.width-width)
                y:Math.random()*(page1.height-height)
                width: 50
                height: 50
                radius: 5

                MouseArea
                {
                    anchors.fill: parent
                    drag.target: parent
                }
            }
        }
    }

    LinearGradient {
        id:grad
        anchors.fill: page1
        start: Qt.point(0, 0)
        end: Qt.point(page1.width, 0)
        gradient: Gradient {
            GradientStop { position: 0.0; color: "white" }
            GradientStop { position: 1.0; color: "black" }
        }
        visible: false
    }

    OpacityMask {
        anchors.fill: page1;
        source: grad
        maskSource: page1;
    }


}

Answer 2

如果它只是你想要的ShaderEffectSource，那么soruceItem就是一种矫枉过正。您可以改为使用sourceRect。

您将Rectangle设置为渐变，然后选择map[From/To]Item等于您import QtQuick 2.7 import QtQuick.Controls 2.0 ApplicationWindow { id: win visible: true width: 400 height: 400 Rectangle { id: grad anchors.fill: parent gradient: Gradient { GradientStop { position: 0; color: 'blue' } GradientStop { position: 0.33; color: 'red' } GradientStop { position: 0.66; color: 'yellow' } GradientStop { position: 1; color: 'blue' } } visible: false } ShaderEffectSource { sourceItem: grad x: 50 y: 50 height: 100 width: 200 sourceRect: Qt.rect(x, y, width, height) } ShaderEffectSource { sourceItem: grad x: 280 y: 80 height: 150 width: 70 sourceRect: Qt.rect(x, y, width, height) } }。您可能需要使用userdata来正确映射坐标。

getmetatable

在几个矩形上跨越渐变

2 个答案: