RoundCorner: rewrite to use Shape instead of Canvas

This commit is contained in:
end-4
2025-08-03 20:40:52 +07:00
parent 0708070764
commit f8d162d995
3 changed files with 48 additions and 45 deletions
+2 -2
View File
@@ -111,7 +111,7 @@ Scope {
left: parent.left left: parent.left
} }
size: Appearance.rounding.screenRounding implicitSize: Appearance.rounding.screenRounding
color: showBarBackground ? Appearance.colors.colLayer0 : "transparent" color: showBarBackground ? Appearance.colors.colLayer0 : "transparent"
corner: RoundCorner.CornerEnum.TopLeft corner: RoundCorner.CornerEnum.TopLeft
@@ -130,7 +130,7 @@ Scope {
top: !Config.options.bar.bottom ? parent.top : undefined top: !Config.options.bar.bottom ? parent.top : undefined
bottom: Config.options.bar.bottom ? parent.bottom : undefined bottom: Config.options.bar.bottom ? parent.bottom : undefined
} }
size: Appearance.rounding.screenRounding implicitSize: Appearance.rounding.screenRounding
color: showBarBackground ? Appearance.colors.colLayer0 : "transparent" color: showBarBackground ? Appearance.colors.colLayer0 : "transparent"
corner: RoundCorner.CornerEnum.TopRight corner: RoundCorner.CornerEnum.TopRight
@@ -1,4 +1,5 @@
import QtQuick 2.9 import QtQuick
import QtQuick.Shapes
Item { Item {
id: root id: root
@@ -6,55 +7,57 @@ Item {
enum CornerEnum { TopLeft, TopRight, BottomLeft, BottomRight } enum CornerEnum { TopLeft, TopRight, BottomLeft, BottomRight }
property var corner: RoundCorner.CornerEnum.TopLeft // Default to TopLeft property var corner: RoundCorner.CornerEnum.TopLeft // Default to TopLeft
property int size: 25 property int implicitSize: 25
property color color: "#000000" property color color: "#000000"
onColorChanged: { implicitWidth: implicitSize
canvas.requestPaint(); implicitHeight: implicitSize
}
onCornerChanged: {
canvas.requestPaint();
}
implicitWidth: size
implicitHeight: size
Canvas {
id: canvas
Shape {
anchors.fill: parent anchors.fill: parent
antialiasing: true layer.enabled: true
layer.smooth: true
preferredRendererType: Shape.CurveRenderer
onPaint: { ShapePath {
var ctx = getContext("2d"); id: shapePath
var r = root.size; strokeWidth: 0
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.beginPath(); fillColor: root.color
switch (root.corner) { startX: switch (root.corner) {
case RoundCorner.CornerEnum.TopLeft: case RoundCorner.CornerEnum.TopLeft: return 0;
ctx.arc(r, r, r, Math.PI, 3 * Math.PI / 2); case RoundCorner.CornerEnum.TopRight: return root.implicitSize;
ctx.lineTo(0, 0); case RoundCorner.CornerEnum.BottomLeft: return 0;
break; case RoundCorner.CornerEnum.BottomRight: return root.implicitSize;
case RoundCorner.CornerEnum.TopRight: }
ctx.arc(0, r, r, 3 * Math.PI / 2, 2 * Math.PI); startY: switch (root.corner) {
ctx.lineTo(r, 0); case RoundCorner.CornerEnum.TopLeft: return 0;
break; case RoundCorner.CornerEnum.TopRight: return 0;
case RoundCorner.CornerEnum.BottomLeft: case RoundCorner.CornerEnum.BottomLeft: return root.implicitSize;
ctx.arc(r, 0, r, Math.PI / 2, Math.PI); case RoundCorner.CornerEnum.BottomRight: return root.implicitSize;
ctx.lineTo(0, r); }
break; PathAngleArc {
case RoundCorner.CornerEnum.BottomRight: moveToStart: false
ctx.arc(0, 0, r, 0, Math.PI / 2); centerX: root.implicitSize - shapePath.startX
ctx.lineTo(r, r); centerY: root.implicitSize - shapePath.startY
break; radiusX: root.implicitSize
radiusY: root.implicitSize
startAngle: switch (root.corner) {
case RoundCorner.CornerEnum.TopLeft: return 180;
case RoundCorner.CornerEnum.TopRight: return -90;
case RoundCorner.CornerEnum.BottomLeft: return 90;
case RoundCorner.CornerEnum.BottomRight: return 0;
}
sweepAngle: 90
}
PathLine {
x: shapePath.startX
y: shapePath.startY
} }
ctx.closePath();
ctx.fillStyle = root.color;
ctx.fill();
} }
} }
Behavior on size { Behavior on implicitSize {
animation: Appearance?.animation.elementMoveFast.numberAnimation.createObject(this) animation: Appearance?.animation.elementMoveFast.numberAnimation.createObject(this)
} }
@@ -35,7 +35,7 @@ Scope {
implicitHeight: cornerWidget.implicitHeight implicitHeight: cornerWidget.implicitHeight
RoundCorner { RoundCorner {
id: cornerWidget id: cornerWidget
size: Appearance.rounding.screenRounding implicitSize: Appearance.rounding.screenRounding
corner: cornerPanelWindow.corner corner: cornerPanelWindow.corner
} }
} }