quickshell: fix concave corner orientation
Filled area was at the bottom of each corner instead of the top. Flipped arcs so fill connects to bar above and calendar beside. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
parent
5e78dc42dc
commit
5b3d2c1523
1 changed files with 11 additions and 14 deletions
|
|
@ -870,14 +870,13 @@ in
|
||||||
var r = width;
|
var r = width;
|
||||||
ctx.clearRect(0, 0, width, height);
|
ctx.clearRect(0, 0, width, height);
|
||||||
ctx.fillStyle = "#D1${c.base00}";
|
ctx.fillStyle = "#D1${c.base00}";
|
||||||
// Draw filled area: full square minus quarter-circle cutout
|
// Concave: filled at top+right, empty curve at bottom-left
|
||||||
// The quarter circle is centered at top-left (0,0), radius = width
|
// Arc centered at bottom-left (0, r)
|
||||||
ctx.beginPath();
|
ctx.beginPath();
|
||||||
ctx.moveTo(r, 0); // top-right corner
|
ctx.moveTo(0, 0);
|
||||||
ctx.lineTo(r, r); // bottom-right corner
|
ctx.lineTo(r, 0);
|
||||||
ctx.lineTo(0, r); // bottom-left corner
|
ctx.lineTo(r, r);
|
||||||
// Arc from bottom-left back to top-right, curving inward
|
ctx.arc(0, r, r, 0, -Math.PI / 2, true);
|
||||||
ctx.arc(0, 0, r, Math.PI / 2, 0, true);
|
|
||||||
ctx.closePath();
|
ctx.closePath();
|
||||||
ctx.fill();
|
ctx.fill();
|
||||||
}
|
}
|
||||||
|
|
@ -898,14 +897,12 @@ in
|
||||||
var r = width;
|
var r = width;
|
||||||
ctx.clearRect(0, 0, width, height);
|
ctx.clearRect(0, 0, width, height);
|
||||||
ctx.fillStyle = "#D1${c.base00}";
|
ctx.fillStyle = "#D1${c.base00}";
|
||||||
// Draw filled area: full square minus quarter-circle cutout
|
// Concave: filled at top+left, empty curve at bottom-right
|
||||||
// The quarter circle is centered at top-right (width,0), radius = width
|
// Arc centered at bottom-right (r, r)
|
||||||
ctx.beginPath();
|
ctx.beginPath();
|
||||||
ctx.moveTo(0, 0); // top-left corner
|
ctx.moveTo(0, 0);
|
||||||
ctx.lineTo(0, r); // bottom-left corner
|
ctx.lineTo(r, 0);
|
||||||
ctx.lineTo(r, r); // bottom-right corner
|
ctx.arc(r, r, r, -Math.PI / 2, Math.PI, true);
|
||||||
// Arc from bottom-right back to top-left, curving inward
|
|
||||||
ctx.arc(r, 0, r, Math.PI / 2, Math.PI, false);
|
|
||||||
ctx.closePath();
|
ctx.closePath();
|
||||||
ctx.fill();
|
ctx.fill();
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue