RibbonBlur,RibbonRectangle: Refactor and improved.

lib_source/qml/Qt5/RibbonBlur.qml

@@ -2,20 +2,17 @@ import QtQuick 2.15
 import QtGraphicalEffects 1.0
 import RibbonUI 1.0
 
-Item {
+RibbonRectangle {
     id: control
-    property int radius: 0
-    property int topLeftRadius: radius
-    property int bottomLeftRadius: radius
-    property int topRightRadius: radius
-    property int bottomRightRadius: radius
     property int blurRadius: 32
     property alias target: effect.sourceItem
     property rect targetRect : Qt.rect(control.x, control.y, control.width, control.height)
     property color maskColor: RibbonTheme.isDarkMode ? RibbonTheme.modernStyle ? '#292929' : "#212629" : RibbonTheme.modernStyle ? "#F5F5F5" : "#FFFFFF"
     property real maskOpacity: 0.5
-    property alias maskBorder: mask.border
+    property alias maskBorderColor: mask.borderColor
+    property alias maskBorderWidth: mask.borderWidth
     property bool useSolidBg: true
+    color: control.useSolidBg ? control.maskColor : 'transparent'
 
     ShaderEffectSource {
         id: effect
@@ -31,37 +28,17 @@ Item {
         deviation: 8
         samples: (control.blurRadius / 4) * 3
         source: effect
-        visible: false
     }
 
     RibbonRectangle{
-        anchors.fill: parent
-        color: control.useSolidBg ? control.maskColor : 'transparent'
-        radius: control.radius
-        topLeftRadius: control.topLeftRadius
-        bottomLeftRadius: control.bottomLeftRadius
-        topRightRadius: control.topRightRadius
-        bottomRightRadius: control.bottomRightRadius
-        OpacityMask {
-            anchors.fill: parent
-            source: blur
-            maskSource: RibbonRectangle{
-                width: control.width
-                height: control.height
-                radius: control.radius
-                topLeftRadius: control.topLeftRadius
-                bottomLeftRadius: control.bottomLeftRadius
-                topRightRadius: control.topRightRadius
-                bottomRightRadius: control.bottomRightRadius
-            }
-        }
-    }
-
-    Rectangle{
         id: mask
         anchors.fill: parent
         color: control.maskColor
         opacity: control.maskOpacity
         radius: control.radius
+        topLeftRadius: control.topLeftRadius
+        bottomLeftRadius: control.bottomLeftRadius
+        topRightRadius: control.topRightRadius
+        bottomRightRadius: control.bottomRightRadius
     }
 }

lib_source/qml/Qt5/RibbonRectangle.qml

@@ -9,60 +9,63 @@ Item {
     property int topRightRadius: radius
     property int bottomLeftRadius: radius
     property int bottomRightRadius: radius
+    property real borderWidth: 0
+    property var borderColor: Qt.color("transparent")
     default property alias contentItem: container.data
-    onWidthChanged: {
+
-        canvas.requestPaint()
+    Shape {
-    }
+        id: shape
-    onHeightChanged: {
-        canvas.requestPaint()
-    }
-    onTopLeftRadiusChanged: {
-        canvas.requestPaint()
-    }
-    onTopRightRadiusChanged: {
-        canvas.requestPaint()
-    }
-    onBottomLeftRadiusChanged: {
-        canvas.requestPaint()
-    }
-    onBottomRightRadiusChanged: {
-        canvas.requestPaint()
-    }
-    onColorChanged: {
-        canvas.requestPaint()
-    }
-    Canvas {
-        id: canvas
         anchors.fill: parent
-        visible: false
+        ShapePath {
-        onPaint: {
+            capStyle: ShapePath.RoundCap
-            var ctx = getContext("2d")
+            strokeWidth: 0
-            ctx.clearRect(0, 0, width, height)
+            strokeColor: "transparent"
-            ctx.beginPath()
+            fillColor: control.color
-            ctx.moveTo(control.topLeftRadius, 0)
+            joinStyle: ShapePath.RoundJoin
-            ctx.lineTo(width - control.topRightRadius, 0)
+            startX: control.topLeftRadius; startY: 0
-            ctx.arcTo(width, 0, width, control.topRightRadius, control.topRightRadius)
+            PathLine { x: shape.width - control.topRightRadius; y: 0 }
-            ctx.lineTo(width, height - control.bottomRightRadius)
+            PathArc { x: shape.width; y: control.topRightRadius; radiusX: control.topRightRadius; radiusY: radiusX }
-            ctx.arcTo(width, height, width - control.bottomRightRadius, height, control.bottomRightRadius)
+            PathLine { x: shape.width; y: shape.height - control.bottomRightRadius }
-            ctx.lineTo(control.bottomLeftRadius, height)
+            PathArc { x: shape.width - control.bottomRightRadius; y: shape.height; radiusX: control.bottomRightRadius; radiusY: radiusX }
-            ctx.arcTo(0, height, 0, height - control.bottomLeftRadius, control.bottomLeftRadius)
+            PathLine { x: control.bottomLeftRadius; y: shape.height }
-            ctx.lineTo(0, control.topLeftRadius)
+            PathArc { x: 0; y: shape.height - control.bottomLeftRadius; radiusX: control.bottomLeftRadius; radiusY: radiusX }
-            ctx.arcTo(0, 0, control.topLeftRadius, 0, control.topLeftRadius)
+            PathLine { x: 0; y: control.topLeftRadius }
-            ctx.closePath()
+            PathArc { x: control.topLeftRadius; y: 0; radiusX: control.topLeftRadius; radiusY: radiusX }
-            ctx.fillStyle = control.color
-            ctx.fill()
         }
     }
-    Rectangle {
+
+    Shape {
+        id: border
+        width: shape.width
+        height: shape.height
+        anchors.centerIn: parent
+        ShapePath {
+            capStyle: ShapePath.RoundCap
+            strokeWidth: control.borderWidth
+            strokeColor: control.borderColor
+            fillColor: "transparent"
+            joinStyle: ShapePath.RoundJoin
+            startX: control.topLeftRadius; startY: 0
+            PathLine { x: border.width - control.topRightRadius; y: 0 }
+            PathArc { x: border.width; y: control.topRightRadius; radiusX: control.topRightRadius; radiusY: radiusX }
+            PathLine { x: border.width; y: border.height - control.bottomRightRadius }
+            PathArc { x: border.width - control.bottomRightRadius; y: border.height; radiusX: control.bottomRightRadius; radiusY: radiusX }
+            PathLine { x: control.bottomLeftRadius; y: border.height }
+            PathArc { x: 0; y: border.height - control.bottomLeftRadius; radiusX: control.bottomLeftRadius; radiusY: radiusX }
+            PathLine { x: 0; y: control.topLeftRadius }
+            PathArc { x: control.topLeftRadius; y: 0; radiusX: control.topLeftRadius; radiusY: radiusX }
+        }
+    }
+
+    Item{
         id: container
         anchors.fill: parent
-        color: control.color
+        clip: true
-        opacity: 0
+        layer.enabled: true
+        layer.effect: OpacityMask {
+            implicitHeight: container.height
+            implicitWidth: container.width
+            maskSource: shape
         }
-    OpacityMask {
-        anchors.fill: parent
-        source: container
-        maskSource: canvas
-        invert: control.color === "transparent" || control.color === "#00000000"
     }
 }

lib_source/qml/Qt6/RibbonBlur.qml

@@ -2,20 +2,17 @@ import QtQuick
 import Qt5Compat.GraphicalEffects
 import RibbonUI
 
-Item {
+RibbonRectangle {
     id: control
-    property int radius: 0
-    property int topLeftRadius: radius
-    property int bottomLeftRadius: radius
-    property int topRightRadius: radius
-    property int bottomRightRadius: radius
     property int blurRadius: 32
     property alias target: effect.sourceItem
     property rect targetRect : Qt.rect(control.x, control.y, control.width, control.height)
     property color maskColor: RibbonTheme.isDarkMode ? RibbonTheme.modernStyle ? '#292929' : "#212629" : RibbonTheme.modernStyle ? "#F5F5F5" : "#FFFFFF"
     property real maskOpacity: 0.5
-    property alias maskBorder: mask.border
+    property alias maskBorderColor: mask.borderColor
+    property alias maskBorderWidth: mask.borderWidth
     property bool useSolidBg: true
+    color: control.useSolidBg ? control.maskColor : 'transparent'
 
     ShaderEffectSource {
         id: effect
@@ -31,37 +28,17 @@ Item {
         deviation: 8
         samples: (control.blurRadius / 4) * 3
         source: effect
-        visible: false
     }
 
     RibbonRectangle{
-        anchors.fill: parent
-        color: control.useSolidBg ? control.maskColor : 'transparent'
-        radius: control.radius
-        topLeftRadius: control.topLeftRadius
-        bottomLeftRadius: control.bottomLeftRadius
-        topRightRadius: control.topRightRadius
-        bottomRightRadius: control.bottomRightRadius
-        OpacityMask {
-            anchors.fill: parent
-            source: blur
-            maskSource: RibbonRectangle{
-                width: control.width
-                height: control.height
-                radius: control.radius
-                topLeftRadius: control.topLeftRadius
-                bottomLeftRadius: control.bottomLeftRadius
-                topRightRadius: control.topRightRadius
-                bottomRightRadius: control.bottomRightRadius
-            }
-        }
-    }
-
-    Rectangle{
         id: mask
         anchors.fill: parent
         color: control.maskColor
         opacity: control.maskOpacity
         radius: control.radius
+        topLeftRadius: control.topLeftRadius
+        bottomLeftRadius: control.bottomLeftRadius
+        topRightRadius: control.topRightRadius
+        bottomRightRadius: control.bottomRightRadius
     }
 }

lib_source/qml/Qt6/RibbonRectangle.qml

@@ -1,5 +1,6 @@
 import QtQuick
 import QtQuick.Controls
+import QtQuick.Shapes
 import Qt5Compat.GraphicalEffects
 
 Item {
@@ -10,60 +11,63 @@ Item {
     property int topRightRadius: radius
     property int bottomLeftRadius: radius
     property int bottomRightRadius: radius
+    property real borderWidth: 0
+    property var borderColor: Qt.color("transparent")
     default property alias contentItem: container.data
-    onWidthChanged: {
+
-        canvas.requestPaint()
+    Shape {
-    }
+        id: shape
-    onHeightChanged: {
-        canvas.requestPaint()
-    }
-    onTopLeftRadiusChanged: {
-        canvas.requestPaint()
-    }
-    onTopRightRadiusChanged: {
-        canvas.requestPaint()
-    }
-    onBottomLeftRadiusChanged: {
-        canvas.requestPaint()
-    }
-    onBottomRightRadiusChanged: {
-        canvas.requestPaint()
-    }
-    onColorChanged: {
-        canvas.requestPaint()
-    }
-    Canvas {
-        id: canvas
         anchors.fill: parent
-        visible: false
+        ShapePath {
-        onPaint: {
+            capStyle: ShapePath.RoundCap
-            var ctx = getContext("2d")
+            strokeWidth: 0
-            ctx.clearRect(0, 0, width, height)
+            strokeColor: "transparent"
-            ctx.beginPath()
+            fillColor: control.color
-            ctx.moveTo(control.topLeftRadius, 0)
+            joinStyle: ShapePath.RoundJoin
-            ctx.lineTo(width - control.topRightRadius, 0)
+            startX: control.topLeftRadius; startY: 0
-            ctx.arcTo(width, 0, width, control.topRightRadius, control.topRightRadius)
+            PathLine { x: shape.width - control.topRightRadius; y: 0 }
-            ctx.lineTo(width, height - control.bottomRightRadius)
+            PathArc { x: shape.width; y: control.topRightRadius; radiusX: control.topRightRadius; radiusY: radiusX }
-            ctx.arcTo(width, height, width - control.bottomRightRadius, height, control.bottomRightRadius)
+            PathLine { x: shape.width; y: shape.height - control.bottomRightRadius }
-            ctx.lineTo(control.bottomLeftRadius, height)
+            PathArc { x: shape.width - control.bottomRightRadius; y: shape.height; radiusX: control.bottomRightRadius; radiusY: radiusX }
-            ctx.arcTo(0, height, 0, height - control.bottomLeftRadius, control.bottomLeftRadius)
+            PathLine { x: control.bottomLeftRadius; y: shape.height }
-            ctx.lineTo(0, control.topLeftRadius)
+            PathArc { x: 0; y: shape.height - control.bottomLeftRadius; radiusX: control.bottomLeftRadius; radiusY: radiusX }
-            ctx.arcTo(0, 0, control.topLeftRadius, 0, control.topLeftRadius)
+            PathLine { x: 0; y: control.topLeftRadius }
-            ctx.closePath()
+            PathArc { x: control.topLeftRadius; y: 0; radiusX: control.topLeftRadius; radiusY: radiusX }
-            ctx.fillStyle = control.color
-            ctx.fill()
         }
     }
-    Rectangle {
+
+    Shape {
+        id: border
+        width: shape.width
+        height: shape.height
+        anchors.centerIn: parent
+        ShapePath {
+            capStyle: ShapePath.RoundCap
+            strokeWidth: control.borderWidth
+            strokeColor: control.borderColor
+            fillColor: "transparent"
+            joinStyle: ShapePath.RoundJoin
+            startX: control.topLeftRadius; startY: 0
+            PathLine { x: border.width - control.topRightRadius; y: 0 }
+            PathArc { x: border.width; y: control.topRightRadius; radiusX: control.topRightRadius; radiusY: radiusX }
+            PathLine { x: border.width; y: border.height - control.bottomRightRadius }
+            PathArc { x: border.width - control.bottomRightRadius; y: border.height; radiusX: control.bottomRightRadius; radiusY: radiusX }
+            PathLine { x: control.bottomLeftRadius; y: border.height }
+            PathArc { x: 0; y: border.height - control.bottomLeftRadius; radiusX: control.bottomLeftRadius; radiusY: radiusX }
+            PathLine { x: 0; y: control.topLeftRadius }
+            PathArc { x: control.topLeftRadius; y: 0; radiusX: control.topLeftRadius; radiusY: radiusX }
+        }
+    }
+
+    Item{
         id: container
         anchors.fill: parent
-        color: control.color
+        clip: true
-        opacity: 0
+        layer.enabled: true
+        layer.effect: OpacityMask {
+            implicitHeight: container.height
+            implicitWidth: container.width
+            maskSource: shape
         }
-    OpacityMask {
-        anchors.fill: parent
-        source: container
-        maskSource: canvas
-        invert: control.color === "transparent" || control.color === "#00000000"
     }
 }