How to use qt-component OpacityMask - qt

Question

There is a question How to hide an image using transparent rectangle in QML?
The accepted answer is to use OpacityMask.
I created a qml file follow this answer, but didn't get the expected result.
Is there anything wrong in my codes?
import QtQuick 2.5
import QtQuick.Controls 1.4
import QtGraphicalEffects 1.0
ApplicationWindow {
visible: true
width: 1280
height: 800
title: qsTr("Hello World")
Rectangle {
id: background
anchors.fill: parent
color: "black"
}
Image
{
id:underlyingImage
width: 1204
height: 682
fillMode: Image.PreserveAspectCrop
layer.enabled: true
layer.effect: OpacityMask {
maskSource: hiding_rect
}
source:"qrc:/timg.jpg"
}
Rectangle
{
id:hiding_rect
width: underlyingImage.width/2
height: underlyingImage.height/2
color: "yellow"
}
}
the result picture

Answer 1

I'm not familiar with the approach suggested in the other question.
However, following the approach suggested in the documentation (http://doc.qt.io/qt-5/qml-qtgraphicaleffects-opacitymask.html), this works:
Window {
visible: true
width: 1280
height: 800
title: qsTr("Hello World")
Rectangle {
id: background
anchors.fill: parent
color: "black"
}
Image
{
anchors.centerIn: parent
id:underlyingImage
width: 1204
height: 682
fillMode: Image.PreserveAspectCrop
source:"file:///tmp/timg.jpg"
visible: false
}
Item {
id:hiding_rect
anchors.fill: underlyingImage
visible: false
Rectangle
{
anchors.left: parent.left
anchors.top: parent.top
width: underlyingImage.width/2
height: underlyingImage.height/2
color: Qt.rgba(1,1,1,1)
z: underlyingImage.z + 1
}
}
OpacityMask {
anchors.fill: underlyingImage
source: underlyingImage
maskSource: hiding_rect
}
}