svg-layout-designer-react/src/Components/Canvas/Selector.ts
2023-02-17 16:09:36 +01:00

41 lines
822 B
TypeScript

import { SHOW_SELECTOR_TEXT } from '../../utils/default';
interface ISelectorProps {
text: string
x: number
y: number
width: number
height: number
scale: number
}
export function RenderSelector(
ctx: CanvasRenderingContext2D,
frameCount: number,
{
text,
x,
y,
width,
height,
scale
}: ISelectorProps
): void {
const xText = x + width / 2;
const yText = y + height / 2;
ctx.strokeStyle = '#3B82F6';
ctx.lineWidth = 4 / scale;
ctx.globalAlpha = (Math.sin(frameCount * 0.0450) ** 2);
ctx.strokeRect(x, y, width, height);
ctx.globalAlpha = 1;
ctx.lineWidth = 1;
ctx.strokeStyle = 'black';
if (SHOW_SELECTOR_TEXT) {
ctx.font = `${16 / scale}px Verdana`;
ctx.textAlign = 'center';
ctx.fillText(text, xText, yText);
ctx.textAlign = 'left';
}
}