78 lines
1.7 KiB
TypeScript
78 lines
1.7 KiB
TypeScript
import { hexWithAlpha } from './render-cache';
|
|
|
|
export interface PillShellOptions {
|
|
width: number;
|
|
height: number;
|
|
radius: number;
|
|
fillStyle: string;
|
|
borderColor: string;
|
|
borderWidth: number;
|
|
shadowColor?: string;
|
|
shadowBlur?: number;
|
|
accentColor?: string;
|
|
accentWidth?: number;
|
|
}
|
|
|
|
export function drawPillShell(
|
|
ctx: CanvasRenderingContext2D,
|
|
options: PillShellOptions
|
|
): void {
|
|
const {
|
|
width,
|
|
height,
|
|
radius,
|
|
fillStyle,
|
|
borderColor,
|
|
borderWidth,
|
|
shadowColor,
|
|
shadowBlur = 0,
|
|
accentColor,
|
|
accentWidth = 4,
|
|
} = options;
|
|
const halfWidth = width / 2;
|
|
const halfHeight = height / 2;
|
|
|
|
if (shadowColor && shadowBlur > 0) {
|
|
ctx.shadowColor = shadowColor;
|
|
ctx.shadowBlur = shadowBlur;
|
|
}
|
|
|
|
ctx.beginPath();
|
|
ctx.roundRect(-halfWidth, -halfHeight, width, height, radius);
|
|
ctx.fillStyle = fillStyle;
|
|
ctx.fill();
|
|
|
|
ctx.shadowBlur = 0;
|
|
ctx.strokeStyle = borderColor;
|
|
ctx.lineWidth = borderWidth;
|
|
ctx.stroke();
|
|
|
|
if (accentColor) {
|
|
ctx.fillStyle = accentColor;
|
|
ctx.beginPath();
|
|
ctx.roundRect(-halfWidth, -halfHeight, accentWidth, height, [radius, 0, 0, radius]);
|
|
ctx.fill();
|
|
}
|
|
}
|
|
|
|
export function drawPillStackLayer(
|
|
ctx: CanvasRenderingContext2D,
|
|
options: {
|
|
width: number;
|
|
height: number;
|
|
radius: number;
|
|
offsetX: number;
|
|
offsetY: number;
|
|
fillColor: string;
|
|
fillAlpha: number;
|
|
}
|
|
): void {
|
|
const { width, height, radius, offsetX, offsetY, fillColor, fillAlpha } = options;
|
|
const halfWidth = width / 2;
|
|
const halfHeight = height / 2;
|
|
|
|
ctx.beginPath();
|
|
ctx.roundRect(-halfWidth + offsetX, -halfHeight + offsetY, width, height, radius);
|
|
ctx.fillStyle = hexWithAlpha(fillColor, fillAlpha);
|
|
ctx.fill();
|
|
}
|