From 93b25dfa97494184493e02b75766e57bc6fe79bb Mon Sep 17 00:00:00 2001 From: Erik Prabowo Kamal Date: Fri, 12 Dec 2025 17:51:38 +0800 Subject: 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. --- Course/Detail/Classic/Content/Sidebar/Video.ui.qml | 21 +++++++++---- Header.ui.qml | 35 ++++++++++++++-------- Header/CartItem.ui.qml | 18 +++++++---- Home/Default/Card.ui.qml | 20 +++++++++---- Instructor/EditProfile.ui.qml | 22 +++++++++----- Shop/Course.ui.qml | 21 ++++++++----- 6 files changed, 93 insertions(+), 44 deletions(-) diff --git a/Course/Detail/Classic/Content/Sidebar/Video.ui.qml b/Course/Detail/Classic/Content/Sidebar/Video.ui.qml index e8469fb..5c22f05 100644 --- a/Course/Detail/Classic/Content/Sidebar/Video.ui.qml +++ b/Course/Detail/Classic/Content/Sidebar/Video.ui.qml @@ -2,6 +2,7 @@ import QtQuick import QtQuick.Controls import QtQuick.Layouts import Qt5Compat.GraphicalEffects +import QtQuick.Effects import QtMultimedia import Bootstrap import Eduport @@ -28,15 +29,23 @@ ColumnLayout { Layout.maximumHeight: width * 400 / 533 source: "https://eduport.webestica.com/assets/images/courses/4by3/01.jpg" fillMode: Image.PreserveAspectFit - layer.enabled: true - layer.effect: OpacityMask { - maskSource: Rectangle { - width: image.width - height: image.height - radius: 8 + layer { + enabled: true + effect: MultiEffect { + maskEnabled: true + maskSource: maskRectangle } } + Rectangle { + id: maskRectangle + width: image.width + height: image.height + radius: 8 + layer.enabled: true + visible: false + } + MediaPlayer { id: mediaPlayer } diff --git a/Header.ui.qml b/Header.ui.qml index d903b2a..3b19cfb 100644 --- a/Header.ui.qml +++ b/Header.ui.qml @@ -2,6 +2,7 @@ import QtQuick import QtQuick.Controls import QtQuick.Layouts import Qt5Compat.GraphicalEffects +import QtQuick.Effects import Bootstrap import Eduport import "DropShadow" as DrpShdw @@ -99,14 +100,19 @@ ToolBar { } layer { enabled: true - effect: OpacityMask { - maskSource: Rectangle { - width: 40 - height: 40 - radius: 40 - } + effect: MultiEffect { + maskEnabled: true + maskSource: maskRectangle } } + Rectangle { + id: maskRectangle + width: 40 + height: 40 + radius: 40 + layer.enabled: true + visible: false + } contentItem: Item { Image { @@ -214,14 +220,19 @@ ToolBar { } layer { enabled: true - effect: OpacityMask { - maskSource: Rectangle { - width: imageWidth - height: imageHeight - radius: maskRadius - } + effect: MultiEffect { + maskEnabled: true + maskSource: maskRectangle } } + Rectangle { + id: maskRectangle + width: imageWidth + height: imageHeight + radius: maskRadius + layer.enabled: true + visible: false + } } } diff --git a/Header/CartItem.ui.qml b/Header/CartItem.ui.qml index 5df5745..f1897d7 100644 --- a/Header/CartItem.ui.qml +++ b/Header/CartItem.ui.qml @@ -2,6 +2,7 @@ import QtQuick import QtQuick.Controls import QtQuick.Layouts import Qt5Compat.GraphicalEffects +import QtQuick.Effects import Bootstrap import Eduport @@ -34,14 +35,19 @@ ColumnLayout { } layer { enabled: true - effect: OpacityMask { - maskSource: Rectangle { - width: 50 - height: 50 - radius: 5.2 - } + effect: MultiEffect { + maskEnabled: true + maskSource: maskRectangle } } + Rectangle { + id: maskRectangle + width: 50 + height: 50 + radius: 5.2 + layer.enabled: true + visible: false + } } ColumnLayout { diff --git a/Home/Default/Card.ui.qml b/Home/Default/Card.ui.qml index a46cd74..abe5eed 100644 --- a/Home/Default/Card.ui.qml +++ b/Home/Default/Card.ui.qml @@ -2,6 +2,7 @@ import QtQuick import QtQuick.Controls import QtQuick.Layouts import Qt5Compat.GraphicalEffects +import QtQuick.Effects import Bootstrap import Eduport import "../../DropShadow" as DrpShdw @@ -59,14 +60,21 @@ Item { } source: imageSource fillMode: Image.PreserveAspectFit - layer.enabled: true - layer.effect: OpacityMask { - maskSource: Rectangle { - width: image.width - height: image.height - radius: 8 + layer { + enabled: true + effect: MultiEffect { + maskEnabled: true + maskSource: maskRectangle } } + Rectangle { + id: maskRectangle + width: image.width + height: image.height + radius: 8 + layer.enabled: true + visible: false + } } Rectangle { diff --git a/Instructor/EditProfile.ui.qml b/Instructor/EditProfile.ui.qml index dc9e49f..3d3ad1b 100644 --- a/Instructor/EditProfile.ui.qml +++ b/Instructor/EditProfile.ui.qml @@ -1,7 +1,7 @@ import QtQuick import QtQuick.Controls import QtQuick.Layouts -import Qt5Compat.GraphicalEffects +import QtQuick.Effects import Bootstrap import Eduport import "../TextField" as TxtFld @@ -98,14 +98,22 @@ Flickable { width: 82 height: 82 } - layer.enabled: true - layer.effect: OpacityMask { - maskSource: Rectangle { - width: 82 - height: 82 - radius: 82 + layer { + enabled: true + effect: MultiEffect { + maskEnabled: true + maskSource: maskRectangle } } + Rectangle { + id: maskRectangle + width: 82 + height: 82 + radius: 82 + layer.enabled: true + visible: false + } + } Button { 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 + } } } -- cgit v1.2.3