feat: 修改字母描红逻辑，添加字母手写字体
This commit is contained in:
R524809
@@ -1,330 +1,24 @@
|
||||
import { BaseDrawService } from '../../../core/draw/baseDraw';
|
||||
import type {
|
||||
LetterTracingData,
|
||||
TracingRow,
|
||||
} from '../generators/letter-tracing-generator';
|
||||
|
||||
const M = 24;
|
||||
/** 四线三格线色：偏黑，实线与虚线统一色相，仅以线型区分 */
|
||||
const LINE_INK = '#2a2a2a';
|
||||
import type { LetterTracingData } from '../generators/letter-tracing-generator';
|
||||
import PictureTracingDraw from './pictureTracingDraw';
|
||||
import CasePairingDraw from './casePairingDraw';
|
||||
import ColumnCompareDraw from './columnCompareDraw';
|
||||
import OverviewDraw from './overviewDraw';
|
||||
|
||||
/**
|
||||
* 字母描红绘制
|
||||
* 四线三格：顶线、上中线、下中线为格内三线间距；最上最下为实线，中间两虚线（产品文档）
|
||||
* 字母描红绘制分发层。
|
||||
* 根据 data.mode 委托给对应的独立 DrawService 完成实际绘制。
|
||||
*/
|
||||
export default class LetterTracingDraw extends BaseDrawService {
|
||||
constructor(
|
||||
canvas: Canvas,
|
||||
ctx: RenderingContext,
|
||||
options?: Record<string, unknown>,
|
||||
) {
|
||||
super(canvas, ctx, options);
|
||||
}
|
||||
|
||||
async draw(data: LetterTracingData) {
|
||||
this.prepareDraw();
|
||||
await this.drawHeaderAndDivider();
|
||||
const DrawClass = {
|
||||
'picture-tracing': PictureTracingDraw,
|
||||
'case-pairing': CasePairingDraw,
|
||||
'column-compare': ColumnCompareDraw,
|
||||
overview: OverviewDraw,
|
||||
}[data.mode];
|
||||
|
||||
switch (data.mode) {
|
||||
case 'picture-tracing':
|
||||
this.drawPictureTracing(data);
|
||||
this.drawPrintFooter();
|
||||
break;
|
||||
case 'case-pairing':
|
||||
this.drawCasePairing(data.leftVisualRows, data.rightVisualRows);
|
||||
this.drawPrintFooter();
|
||||
break;
|
||||
case 'column-compare':
|
||||
this.drawColumnCompare(data.leftRows, data.rightRows);
|
||||
this.drawPrintFooter();
|
||||
break;
|
||||
case 'overview':
|
||||
this.drawOverview(data.upperRows, data.lowerRows);
|
||||
this.drawPrintFooter();
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 四线三格：y 顶 → y+h 底，中间两条虚线
|
||||
*/
|
||||
private drawFourLines(x: number, y: number, w: number, h: number) {
|
||||
const ctx = this.ctx;
|
||||
const yTop = y;
|
||||
const yMid1 = y + h * 0.28;
|
||||
const yMid2 = y + h * 0.58;
|
||||
const yBot = y + h;
|
||||
|
||||
const strokeSolid = () => {
|
||||
ctx.strokeStyle = LINE_INK;
|
||||
ctx.lineWidth = 1;
|
||||
ctx.setLineDash([]);
|
||||
};
|
||||
const strokeDash = () => {
|
||||
ctx.strokeStyle = LINE_INK;
|
||||
ctx.lineWidth = 1;
|
||||
ctx.setLineDash([5, 5]);
|
||||
};
|
||||
|
||||
strokeSolid();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x, yTop);
|
||||
ctx.lineTo(x + w, yTop);
|
||||
ctx.stroke();
|
||||
|
||||
strokeDash();
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x, yMid1);
|
||||
ctx.lineTo(x + w, yMid1);
|
||||
ctx.stroke();
|
||||
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x, yMid2);
|
||||
ctx.lineTo(x + w, yMid2);
|
||||
ctx.stroke();
|
||||
|
||||
strokeSolid();
|
||||
ctx.setLineDash([]);
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(x, yBot);
|
||||
ctx.lineTo(x + w, yBot);
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
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 sans-serif`;
|
||||
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 sans-serif`;
|
||||
ctx.fillText(ch, x + w / 2, baselineY);
|
||||
}
|
||||
ctx.restore();
|
||||
}
|
||||
|
||||
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);
|
||||
this.drawFourLines(cx, y, cellW, rowH);
|
||||
const cell = row.cells[i];
|
||||
this.drawCharInCell(
|
||||
cell.char,
|
||||
cx,
|
||||
y,
|
||||
cellW,
|
||||
rowH,
|
||||
cell.opacity,
|
||||
cell.isGuide,
|
||||
cell.pairChar,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 看图描红：上左超大字母+例句，上右「配图」大 emoji；下 6 行四线三格
|
||||
*/
|
||||
private drawPictureTracing(
|
||||
data: Extract<LetterTracingData, { mode: 'picture-tracing' }>,
|
||||
) {
|
||||
const ctx = this.ctx;
|
||||
const { teaching, rows } = data;
|
||||
const cw = this.canvasWidth;
|
||||
let y = this.currentY + 8;
|
||||
const teachH = Math.min(240, (this.canvasHeight - y) * 0.38);
|
||||
const innerW = cw - M * 2;
|
||||
const splitX = M + innerW * 0.52;
|
||||
|
||||
ctx.fillStyle = '#f8fafc';
|
||||
ctx.fillRect(M, y, innerW, teachH);
|
||||
|
||||
// 左侧：大小写 + 例句（短句在字母下方）
|
||||
const leftPad = M + 20;
|
||||
ctx.textAlign = 'left';
|
||||
ctx.textBaseline = 'top';
|
||||
ctx.fillStyle = '#111';
|
||||
const bigFs = Math.min(56, teachH * 0.26);
|
||||
ctx.font = `bold ${bigFs}px sans-serif`;
|
||||
ctx.fillText(
|
||||
`${teaching.upper} ${teaching.lower}`,
|
||||
leftPad,
|
||||
y + teachH * 0.12,
|
||||
);
|
||||
ctx.font = `${Math.min(22, teachH * 0.1)}px sans-serif`;
|
||||
ctx.fillStyle = '#333';
|
||||
ctx.fillText(teaching.sentence, leftPad, y + teachH * 0.48);
|
||||
|
||||
// 右侧：配图区（以 emoji 作为插图占位）
|
||||
ctx.font = `${Math.min(120, teachH * 0.55)}px sans-serif`;
|
||||
ctx.textAlign = 'center';
|
||||
ctx.textBaseline = 'middle';
|
||||
ctx.fillText(
|
||||
teaching.emoji,
|
||||
splitX + (cw - M - splitX) / 2,
|
||||
y + teachH / 2,
|
||||
);
|
||||
|
||||
y += teachH + 12;
|
||||
this.drawDashedDivider(y, M, '#ccc');
|
||||
y += 14;
|
||||
|
||||
const rest = this.canvasHeight - y - M;
|
||||
const rowH = Math.max(34, (rest - 10) / rows.length);
|
||||
const rowWidth = innerW;
|
||||
for (let r = 0; r < rows.length; r++) {
|
||||
this.drawTracingRow(
|
||||
rows[r],
|
||||
M,
|
||||
y + r * (rowH + 8),
|
||||
rowH,
|
||||
rowWidth,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 大小写配对：左右两栏，每行最多 4 组子行并排
|
||||
*/
|
||||
private drawCasePairing(
|
||||
leftVisualRows: TracingRow[][],
|
||||
rightVisualRows: TracingRow[][],
|
||||
) {
|
||||
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 drawColumnCompare(leftRows: TracingRow[], rightRows: TracingRow[]) {
|
||||
const y0 = this.currentY + 6;
|
||||
const bottom = this.canvasHeight - M;
|
||||
const maxR = Math.max(leftRows.length, rightRows.length);
|
||||
const rowH = Math.max(36, (bottom - y0) / maxR - 6);
|
||||
const gapCol = 16;
|
||||
const colW = (this.canvasWidth - M * 2 - gapCol) / 2;
|
||||
|
||||
for (let i = 0; i < leftRows.length; i++) {
|
||||
const y = y0 + i * (rowH + 6);
|
||||
this.drawTracingRow(leftRows[i], M, y, rowH, colW);
|
||||
}
|
||||
const xR = M + colW + gapCol;
|
||||
for (let i = 0; i < rightRows.length; i++) {
|
||||
const y = y0 + i * (rowH + 6);
|
||||
this.drawTracingRow(rightRows[i], xR, y, rowH, colW);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 字母总览：Uppercase Letters / lowercase Letters，各行 9+9+8，四线三格
|
||||
*/
|
||||
private drawOverview(upperRows: string[][], lowerRows: string[][]) {
|
||||
const ctx = this.ctx;
|
||||
let y = this.currentY + 6;
|
||||
const innerW = this.canvasWidth - M * 2;
|
||||
|
||||
const title = (t: string) => {
|
||||
ctx.fillStyle = '#111';
|
||||
ctx.font = 'bold 17px sans-serif';
|
||||
ctx.textAlign = 'left';
|
||||
ctx.textBaseline = 'top';
|
||||
ctx.fillText(t, M, y);
|
||||
y += 24;
|
||||
};
|
||||
|
||||
const drawBand = (rows: string[][]) => {
|
||||
for (const line of rows) {
|
||||
const n = line.length;
|
||||
const gap = 4;
|
||||
const cellW = (innerW - (n - 1) * gap) / n;
|
||||
const cellH = 30;
|
||||
for (let i = 0; i < n; i++) {
|
||||
const cx = M + i * (cellW + gap);
|
||||
this.drawFourLines(cx, y, cellW, cellH);
|
||||
this.drawCharInCell(
|
||||
line[i],
|
||||
cx,
|
||||
y,
|
||||
cellW,
|
||||
cellH,
|
||||
0.9,
|
||||
true,
|
||||
);
|
||||
}
|
||||
y += cellH + 8;
|
||||
}
|
||||
};
|
||||
|
||||
title('Uppercase Letters');
|
||||
drawBand(upperRows);
|
||||
y += 6;
|
||||
this.drawDashedDivider(y, M, '#bbb');
|
||||
y += 12;
|
||||
title('lowercase Letters');
|
||||
drawBand(lowerRows);
|
||||
const delegate = new DrawClass(this.canvas, this.ctx, this.options);
|
||||
await delegate.draw(data as any);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user