Reimplement Qt5 OpacityMask using Qt6 MultiEffect

https://darapsa.org/qessenger.git/commit/?id=5f777bca13beadd0a56d2264225b0c09e49541a2
The mask Rectangle needs to be put outside of the MultiEffect,
and referred to by the Rectangle's ID.
It wouldn't work if it's put directly on MultiEffect's maskSource.

https://forum.qt.io/topic/145956/rounded-image-in-qt6
Enabling layer and invisibility on the mask rectangle are a must.
Take notice on what Jacoco wrote about jagged edges at the end of the
thread. Will test that later.

1 files changed, 14 insertions, 7 deletions

diff --git a/Shop/Course.ui.qml b/Shop/Course.ui.qml
index 565cd53..25efed2 100644
--- a/Shop/Course.ui.qml
+++ b/Shop/Course.ui.qml
@@ -1,7 +1,7 @@
 import QtQuick
 import QtQuick.Controls
 import QtQuick.Layouts
-import Qt5Compat.GraphicalEffects
+import QtQuick.Effects
 import Bootstrap
 
 ColumnLayout {
@@ -41,14 +41,21 @@ ColumnLayout {
 				}
 				source: imageSource
 				fillMode: Image.PreserveAspectFit
-				layer.enabled: true
-				layer.effect: OpacityMask {
-					maskSource: Rectangle {
-						width: courseItemImage.width
-						height: courseItemImage.height
-						radius: 5.2
+				layer {
+					enabled: true
+					effect: MultiEffect {
+						maskEnabled: true
+						maskSource: maskRectangle
 					}
 				}
+				Rectangle {
+					id: maskRectangle
+					width: courseItemImage.width
+					height: courseItemImage.height
+					radius: 5.2
+					layer.enabled: true
+					visible: false
+				}
 			}
 		}