feat: 完成四种字母描红开发
This commit is contained in:
R524809
@@ -3,121 +3,128 @@ import type {
|
||||
LetterTracingData,
|
||||
TracingRow,
|
||||
} from '../generators/letter-tracing-generator';
|
||||
import { drawFourLineGrid } from './drawTools';
|
||||
import { fontFamilyOf } from '../data/fontProfiles';
|
||||
import {
|
||||
calcLetterFontSizes,
|
||||
drawFourLineGrid,
|
||||
drawLetterInFourLineGrid,
|
||||
FOUR_LINE_GRID_H,
|
||||
type LetterFontSizes,
|
||||
} from './drawTools';
|
||||
const COLOR_BLACK = '#1a1a1a';
|
||||
const COLOR_LIGHT_RED = '#FF8E8E';
|
||||
|
||||
const LETTER_FACE = 'Helvetica, Arial, "Segoe UI", Roboto, sans-serif';
|
||||
/** 左右大写/小写两栏之间的间距（相对行宽 + 下限，避免过窄屏过小） */
|
||||
const COLUMN_GUTTER_RATIO = 0.02;
|
||||
const COLUMN_GUTTER_MIN = 14;
|
||||
|
||||
type CasePairingData = Extract<LetterTracingData, { mode: 'case-pairing' }>;
|
||||
/**
|
||||
* 单栏内字母排版区域占栏宽比例（<1 则同栏字母更紧凑、字间距更小）
|
||||
*/
|
||||
const INTRA_COLUMN_LETTER_BAND_RATIO = 1;
|
||||
|
||||
type CasePairingData = Extract<
|
||||
LetterTracingData,
|
||||
{ mode: 'letter-tracing-case-pairing' }
|
||||
>;
|
||||
|
||||
/**
|
||||
* 分栏对照绘制：
|
||||
* 四线三格横跨整页宽度，字母分左右两侧书写——
|
||||
* 左栏大写、右栏小写（各 repetitions 个），中间留间距；同栏内字母略收紧。
|
||||
* 每侧第一个字母黑色，后续浅红色。
|
||||
*/
|
||||
export default class CasePairingDraw extends BaseDrawService {
|
||||
private letterSizes: LetterFontSizes =
|
||||
calcLetterFontSizes(FOUR_LINE_GRID_H);
|
||||
|
||||
async draw(data: CasePairingData) {
|
||||
this.prepareDraw();
|
||||
await this.drawHeaderAndDivider();
|
||||
this.drawContent(data.leftVisualRows, data.rightVisualRows);
|
||||
this.drawContent(data.leftRows, data.rightRows);
|
||||
this.drawPrintFooter();
|
||||
}
|
||||
|
||||
private drawContent(
|
||||
leftVisualRows: TracingRow[][],
|
||||
rightVisualRows: TracingRow[][],
|
||||
) {
|
||||
private drawContent(leftRows: TracingRow[], rightRows: 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 lineW = this.canvasWidth - M * 2;
|
||||
const maxR = Math.max(leftRows.length, rightRows.length);
|
||||
|
||||
const footerReserve = 56;
|
||||
const availableH =
|
||||
this.canvasHeight - this.currentY - footerReserve - 12;
|
||||
const rowGap = Math.max(
|
||||
4,
|
||||
(availableH - maxR * FOUR_LINE_GRID_H) / (maxR + 1),
|
||||
);
|
||||
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;
|
||||
const y0 = this.currentY + rowGap;
|
||||
|
||||
const columnGutter = Math.max(
|
||||
COLUMN_GUTTER_MIN,
|
||||
Math.round(lineW * COLUMN_GUTTER_RATIO),
|
||||
);
|
||||
const halfContentW = (lineW - columnGutter) / 2;
|
||||
const leftX = M;
|
||||
const rightX = M + halfContentW + columnGutter;
|
||||
|
||||
for (let i = 0; i < maxR; i++) {
|
||||
const y = y0 + i * (FOUR_LINE_GRID_H + rowGap);
|
||||
|
||||
drawFourLineGrid(this.ctx, M, y, lineW, FOUR_LINE_GRID_H);
|
||||
|
||||
if (i < leftRows.length) {
|
||||
this.drawLettersInHalf(
|
||||
leftRows[i],
|
||||
leftX,
|
||||
y,
|
||||
halfContentW,
|
||||
INTRA_COLUMN_LETTER_BAND_RATIO,
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
drawSide(leftVisualRows, M, colW);
|
||||
drawSide(rightVisualRows, M + colW + gapCol, colW);
|
||||
if (i < rightRows.length) {
|
||||
this.drawLettersInHalf(
|
||||
rightRows[i],
|
||||
rightX,
|
||||
y,
|
||||
halfContentW,
|
||||
INTRA_COLUMN_LETTER_BAND_RATIO,
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private drawTracingRow(
|
||||
/**
|
||||
* 在四线三格的半侧区域内绘制字母。
|
||||
* 第一个字母黑色，后续字母浅红色。
|
||||
*/
|
||||
private drawLettersInHalf(
|
||||
row: TracingRow,
|
||||
startX: number,
|
||||
x: number,
|
||||
y: number,
|
||||
rowH: number,
|
||||
totalWidth: number,
|
||||
columnW: number,
|
||||
letterBandRatio: number,
|
||||
) {
|
||||
const gap = 4;
|
||||
const n = row.cells.length;
|
||||
const cellW = n > 0 ? (totalWidth - gap * (n - 1)) / n : totalWidth;
|
||||
if (n === 0) return;
|
||||
|
||||
const bandW = columnW * letterBandRatio;
|
||||
const inset = (columnW - bandW) / 2;
|
||||
const slotW = bandW / n;
|
||||
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(
|
||||
const color = i === 0 ? COLOR_BLACK : COLOR_LIGHT_RED;
|
||||
const cx = x + inset + slotW * i + slotW / 2;
|
||||
|
||||
drawLetterInFourLineGrid(
|
||||
this.ctx,
|
||||
cell.char,
|
||||
cx,
|
||||
y,
|
||||
cellW,
|
||||
rowH,
|
||||
cell.opacity,
|
||||
cell.isGuide,
|
||||
cell.pairChar,
|
||||
FOUR_LINE_GRID_H,
|
||||
this.letterSizes,
|
||||
{ fontFamily: fontFamilyOf(this.letterSizes._profile), color },
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
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();
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user