Computing linear gradients by section so as to mimic the effect of a larger one - qml

Question

Here is my issue. I need a see through hole (square one) in my application. The problem is that my real application contains a gradient over its entire background. To simulate this problem I've written a MWE.
In order to create the hole, I need to create 4 rectangles that I will fill with the proper gradient so as to simulate the over all gradient shown in the code.
Like so:
I'm asking for help on how to write the gradient description in each of the rectangles (1 through 4) so that they would look exactly the same as they do in the picture which is showing 1 big gradient.
import QtQuick
import QtQuick.Controls
import QtQuick.Window
import Qt5Compat.GraphicalEffects
ApplicationWindow {
width: 1920
height: 1080
visible: true
title: qsTr("Render Server Development Helper App")
color: "transparent"
Rectangle {
id: mainRect
anchors.fill: parent
LinearGradient {
anchors.fill: parent
start: Qt.point(0, 0)
end: Qt.point(width,height)
gradient: Gradient {
GradientStop { position: 0.0; color: "#ff0000" }
GradientStop { position: 0.034; color: "#ff0000" }
GradientStop { position: 0.7792; color: "#0000ff" }
GradientStop { position: 1.0; color: "#0000ff" }
}
}
Column {
id: buttonRow
width: 0.1*parent.width
anchors.left: parent.left
anchors.top: parent.top
Button {
id: btnConnect
hoverEnabled: false;
width: parent.width
text: "CONNECT"
onClicked: {
console.log("Connecting ....");
}
}
}
Rectangle {
id: frame
width: parent.width*0.7;
height: parent.height*0.8;
border.color: "#000000";
border.width: 5;
//anchors.centerIn: renderServerView
anchors.centerIn: parent
color: "transparent"
}
}
}

Answer 1

I would use the same approach as we discussed here and avoid complicated gradient stitching.
Be aware that translucent windows only work on systems that have compositing enabled. Have a look here.
Canvas
import QtQuick
Window {
id: root
width: 640
height: 480
visible: true
title: qsTr("Hello World")
color: "transparent"
Canvas {
anchors.fill: parent
onPaint: {
var ctx = getContext("2d")
var gradient = ctx.createLinearGradient(0, 0, root.width, root.height)
gradient.addColorStop(0.0, "red")
gradient.addColorStop(1.0, "blue")
ctx.fillStyle = gradient
ctx.beginPath()
ctx.fillRect(0, 0, root.width, root.height)
ctx.fill()
ctx.clearRect(220, 140, 200, 200)
}
}
}
OpacityMask
import QtQuick
import Qt5Compat.GraphicalEffects
Window {
id: root
width: 640
height: 480
visible: true
color: "transparent"
LinearGradient {
id: bg
visible: false
anchors.fill: parent
start: Qt.point(0, 0)
end: Qt.point(root.width, root.height)
gradient: Gradient {
GradientStop { position: 0.0; color: "red" }
GradientStop { position: 1.0; color: "blue" }
}
}
Item {
id: cutout
visible: false
anchors.fill: parent
Rectangle {
width: 200
height: 200
anchors.centerIn: parent
}
}
OpacityMask {
anchors.fill: bg
source: bg
maskSource: cutout
invert: true
}
}