R524809
124 lines
3.8 KiB
TypeScript
124 lines
3.8 KiB
TypeScript
import { BaseDrawService } from '../../../core/draw/baseDraw';
|
|
import type {
|
|
LetterTracingData,
|
|
TracingRow,
|
|
} from '../generators/letter-tracing-generator';
|
|
import { drawFourLineGrid } from './drawTools';
|
|
|
|
const LETTER_FACE = 'Helvetica, Arial, "Segoe UI", Roboto, sans-serif';
|
|
|
|
type CasePairingData = Extract<LetterTracingData, { mode: 'case-pairing' }>;
|
|
|
|
export default class CasePairingDraw extends BaseDrawService {
|
|
async draw(data: CasePairingData) {
|
|
this.prepareDraw();
|
|
await this.drawHeaderAndDivider();
|
|
this.drawContent(data.leftVisualRows, data.rightVisualRows);
|
|
this.drawPrintFooter();
|
|
}
|
|
|
|
private drawContent(
|
|
leftVisualRows: TracingRow[][],
|
|
rightVisualRows: TracingRow[][],
|
|
) {
|
|
const M = 24;
|
|
const y0 = this.currentY + 6;
|
|
const bottom = this.canvasHeight - M;
|
|
const gapCol = 18;
|
|
const colW = (this.canvasWidth - M * 2 - gapCol) / 2;
|
|
const maxVisual = Math.max(
|
|
leftVisualRows.length,
|
|
rightVisualRows.length,
|
|
);
|
|
const rowSlotH = Math.max(40, (bottom - y0) / maxVisual - 6);
|
|
|
|
const drawSide = (
|
|
blocks: TracingRow[][],
|
|
startX: number,
|
|
width: number,
|
|
) => {
|
|
let y = y0;
|
|
for (const visualRow of blocks) {
|
|
const nSeg = visualRow.length;
|
|
const segGap = 6;
|
|
const segW = (width - (nSeg - 1) * segGap) / nSeg;
|
|
for (let s = 0; s < nSeg; s++) {
|
|
this.drawTracingRow(
|
|
visualRow[s],
|
|
startX + s * (segW + segGap),
|
|
y,
|
|
rowSlotH,
|
|
segW,
|
|
);
|
|
}
|
|
y += rowSlotH + 8;
|
|
}
|
|
};
|
|
|
|
drawSide(leftVisualRows, M, colW);
|
|
drawSide(rightVisualRows, M + colW + gapCol, colW);
|
|
}
|
|
|
|
private drawTracingRow(
|
|
row: TracingRow,
|
|
startX: number,
|
|
y: number,
|
|
rowH: number,
|
|
totalWidth: number,
|
|
) {
|
|
const gap = 4;
|
|
const n = row.cells.length;
|
|
const cellW = n > 0 ? (totalWidth - gap * (n - 1)) / n : totalWidth;
|
|
for (let i = 0; i < n; i++) {
|
|
const cx = startX + i * (cellW + gap);
|
|
drawFourLineGrid(this.ctx, cx, y, cellW, rowH);
|
|
const cell = row.cells[i];
|
|
this.drawCharInCell(
|
|
cell.char,
|
|
cx,
|
|
y,
|
|
cellW,
|
|
rowH,
|
|
cell.opacity,
|
|
cell.isGuide,
|
|
cell.pairChar,
|
|
);
|
|
}
|
|
}
|
|
|
|
private drawCharInCell(
|
|
ch: string,
|
|
x: number,
|
|
y: number,
|
|
w: number,
|
|
h: number,
|
|
opacity: number,
|
|
bold: boolean,
|
|
pairChar?: string,
|
|
) {
|
|
const ctx = this.ctx;
|
|
if (opacity <= 0) return;
|
|
ctx.save();
|
|
ctx.globalAlpha = opacity;
|
|
ctx.fillStyle = bold ? '#1a1a1a' : '#4a4a4a';
|
|
ctx.textAlign = 'center';
|
|
ctx.textBaseline = 'alphabetic';
|
|
const baselineY = y + h * 0.72;
|
|
|
|
if (pairChar) {
|
|
const fs = Math.min(h * 0.5, w * 0.22);
|
|
ctx.font = `${bold ? 'bold ' : ''}${fs}px ${LETTER_FACE}`;
|
|
const gap = fs * 0.2;
|
|
const totalW = fs * 2 + gap;
|
|
const x0 = x + w / 2 - totalW / 2;
|
|
ctx.fillText(ch, x0 + fs * 0.5, baselineY);
|
|
ctx.fillText(pairChar, x0 + fs * 1.5 + gap, baselineY);
|
|
} else {
|
|
const fontSize = Math.min(h * 0.72, w * 0.85);
|
|
ctx.font = `${bold ? 'bold ' : ''}${fontSize}px ${LETTER_FACE}`;
|
|
ctx.fillText(ch, x + w / 2, baselineY);
|
|
}
|
|
ctx.restore();
|
|
}
|
|
}
|