border radius on rect
This commit is contained in:
parent
58715f42bf
commit
441957185e
4 changed files with 58 additions and 32 deletions
23
src/ui.ts
23
src/ui.ts
|
|
@ -39,10 +39,29 @@ export function render(ui: UIValue, canvas: HTMLCanvasElement) {
|
|||
|
||||
function renderUI(ui: UIValue, ctx: CanvasRenderingContext2D, x: number, y: number) {
|
||||
switch (ui.kind) {
|
||||
case 'rect':
|
||||
case 'rect': {
|
||||
ctx.fillStyle = ui.color;
|
||||
ctx.fillRect(x, y, ui.w, ui.h);
|
||||
|
||||
if (ui.radius && ui.radius > 0) {
|
||||
const r = Math.min(ui.radius, ui.w / 2, ui.h / 2);
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x + r, y);
|
||||
ctx.lineTo(x + ui.w - r, y);
|
||||
ctx.arcTo(x + ui.w, y, x + ui.w, y + r, r);
|
||||
ctx.lineTo(x + ui.w, y + ui.h - r);
|
||||
ctx.arcTo(x + ui.w, y + ui.h, x + ui.w - r, y + ui.h, r);
|
||||
ctx.lineTo(x + r, y + ui.h);
|
||||
ctx.arcTo(x, y + ui.h, x, y + ui.h - r, r);
|
||||
ctx.lineTo(x, y + r);
|
||||
ctx.arcTo(x, y, x + r, y, r);
|
||||
ctx.closePath();
|
||||
ctx.fill();
|
||||
} else {
|
||||
ctx.fillRect(x, y, ui.w, ui.h);
|
||||
}
|
||||
|
||||
break;
|
||||
}
|
||||
|
||||
case 'text':
|
||||
ctx.fillStyle = 'black';
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue