Span a Gradient on several Rectangle - qml

Question

I want a single LinearGradient to be used as the background, spanned into several sibling Rectangles. In each Rectangle, you can see a different part of the gradient.
I use an OpacityMask to « fill » the Rectangles with the gradient.
The LinearGradient width is the sum of each Rectangle width.
If I use a single Rectangle, it works. Beginning with two, it does not behave correctly, whatever I try (I leave bits in the code below to imagine). The best result I had so far is having the same part of the LinearGradient repeated in each Rectangle.
I guess I could use one LinearGradient per Rectangle, changing the GradientStop values, but it looks complicated and I guess there is a simple an elegant solution.
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

You were almost there.
The major problem is you chose a white Rectangle as a container for your child rectangles. This causes the entire LinearGradient to be displayed, as the mask is fully opaque (no alpha).
See below for a working example (you can move the rectangles by dragging them)
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

If it is just Rectangles you want, OpacityMask is an overkill.
You might just use a ShaderEffectSource instead.
You set the soruceItem to be your gradient, and then select the sourceRect to be equal to you Rectangle. You might need to use map[From/To]Item to map the coordinates correctly.
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)
}
}