gradient bar: canvas-drawn arc matching screen corner radius
This commit is contained in:
parent
e6c65cad45
commit
5a7d205516
1 changed files with 27 additions and 20 deletions
|
|
@ -27,31 +27,38 @@ PanelWindow {
|
||||||
opacity: M.Theme.barOpacity
|
opacity: M.Theme.barOpacity
|
||||||
}
|
}
|
||||||
|
|
||||||
Item {
|
Canvas {
|
||||||
anchors.top: parent.top
|
anchors.top: parent.top
|
||||||
anchors.left: parent.left
|
anchors.left: parent.left
|
||||||
anchors.right: parent.right
|
anchors.right: parent.right
|
||||||
height: 3
|
height: Math.max(M.Theme.screenRadius + 2, 4)
|
||||||
clip: true
|
|
||||||
|
|
||||||
Rectangle {
|
onPaint: {
|
||||||
anchors.top: parent.top
|
const ctx = getContext("2d");
|
||||||
anchors.left: parent.left
|
const w = width;
|
||||||
anchors.right: parent.right
|
const r = M.Theme.screenRadius;
|
||||||
height: M.Theme.screenRadius > 0 ? M.Theme.screenRadius * 2 : 3
|
const lw = 3;
|
||||||
topLeftRadius: M.Theme.screenRadius
|
const hw = lw / 2;
|
||||||
topRightRadius: M.Theme.screenRadius
|
|
||||||
gradient: Gradient {
|
ctx.clearRect(0, 0, w, height);
|
||||||
orientation: Gradient.Horizontal
|
|
||||||
GradientStop {
|
const grad = ctx.createLinearGradient(0, 0, w, 0);
|
||||||
position: 0
|
grad.addColorStop(0, M.Theme.base0C.toString());
|
||||||
color: M.Theme.base0C
|
grad.addColorStop(1, M.Theme.base09.toString());
|
||||||
}
|
ctx.strokeStyle = grad;
|
||||||
GradientStop {
|
ctx.lineWidth = lw;
|
||||||
position: 1
|
|
||||||
color: M.Theme.base09
|
ctx.beginPath();
|
||||||
}
|
if (r > lw) {
|
||||||
|
ctx.moveTo(0, r);
|
||||||
|
ctx.arc(r, r, r - hw, Math.PI, -Math.PI / 2);
|
||||||
|
ctx.lineTo(w - r, hw);
|
||||||
|
ctx.arc(w - r, r, r - hw, -Math.PI / 2, 0);
|
||||||
|
} else {
|
||||||
|
ctx.moveTo(0, hw);
|
||||||
|
ctx.lineTo(w, hw);
|
||||||
}
|
}
|
||||||
|
ctx.stroke();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue