70 lines
1.6 KiB
TypeScript
70 lines
1.6 KiB
TypeScript
export const fillTextCentered = (
|
|
ctx: CanvasRenderingContext2D,
|
|
text: string,
|
|
x: number,
|
|
y: number,
|
|
width: number,
|
|
): number => {
|
|
const measure = ctx.measureText(text);
|
|
const textX = Math.floor(x + width / 2 - measure.actualBoundingBoxRight / 2);
|
|
const textY =
|
|
measure.actualBoundingBoxAscent + measure.actualBoundingBoxDescent;
|
|
ctx.fillText(text, textX, y + textY);
|
|
return measure.actualBoundingBoxAscent + measure.actualBoundingBoxDescent + 1;
|
|
};
|
|
|
|
export const fillTextHCentered = (
|
|
ctx: CanvasRenderingContext2D,
|
|
text: string,
|
|
x: number,
|
|
y: number,
|
|
width: number,
|
|
) => {
|
|
const measure = ctx.measureText(text);
|
|
const textX = Math.floor(x + width / 2 - measure.actualBoundingBoxRight / 2);
|
|
ctx.fillText(text, textX, y);
|
|
};
|
|
|
|
export const fillTextWordWrapped = (
|
|
ctx: CanvasRenderingContext2D,
|
|
text: string,
|
|
x: number,
|
|
y: number,
|
|
width: number,
|
|
lineHeight?: number,
|
|
): number => {
|
|
const words = text.split(" ");
|
|
let line = "";
|
|
let currentY = y;
|
|
let lineCount = 0;
|
|
|
|
const height =
|
|
lineHeight ||
|
|
ctx.measureText("M").actualBoundingBoxAscent +
|
|
ctx.measureText("M").actualBoundingBoxDescent;
|
|
|
|
currentY += height;
|
|
|
|
for (let i = 0; i < words.length; i++) {
|
|
const testLine = line + (line ? " " : "") + words[i];
|
|
const metrics = ctx.measureText(testLine);
|
|
const testWidth = metrics.width;
|
|
|
|
if (testWidth > width && line) {
|
|
ctx.fillText(line, x, currentY);
|
|
line = words[i]!;
|
|
currentY += height;
|
|
lineCount++;
|
|
} else {
|
|
line = testLine;
|
|
}
|
|
}
|
|
|
|
if (line) {
|
|
ctx.fillText(line, x, currentY);
|
|
lineCount++;
|
|
}
|
|
|
|
return lineCount * height;
|
|
};
|