feat: 修改字母描红逻辑，添加字母手写字体

2026-04-15 17:29:59 +08:00
parent ec5bc44741
commit 4299c4e082
62 changed files with 4135 additions and 894 deletions
@@ -0,0 +1,65 @@
+/**
+ * 绘制工具集合（后续可继续扩展其他通用绘制方法）
+ */
+
+export type FourLineGridStyle = {
+    /** 顶线/底线颜色 */
+    ink?: string;
+    /** 中间两条虚线颜色 */
+    middleInk?: string;
+    /** 线宽 */
+    lineWidth?: number;
+    /** 虚线样式 */
+    dash?: number[];
+};
+
+/**
+ * 四线三格（通用）
+ * - 顶/底：实线
+ * - 中间两条：虚线
+ */
+export function drawFourLineGrid(
+    ctx: RenderingContext,
+    x: number,
+    y: number,
+    w: number,
+    h: number,
+    style?: FourLineGridStyle,
+) {
+    const ink = style?.ink ?? '#322E25';
+    const middleInk = style?.middleInk ?? 'rgba(50, 46, 37, 0.3)';
+    const lineWidth = style?.lineWidth ?? 1;
+    const dash = style?.dash ?? [4, 4];
+
+    const yTop = y;
+    const y1 = y + h / 3;
+    const y2 = y + (h * 2) / 3;
+    const yBot = y + h;
+
+    ctx.strokeStyle = ink;
+    ctx.lineWidth = lineWidth;
+    ctx.setLineDash([]);
+    ctx.beginPath();
+    ctx.moveTo(x, yTop);
+    ctx.lineTo(x + w, yTop);
+    ctx.stroke();
+
+    ctx.strokeStyle = middleInk;
+    ctx.setLineDash(dash);
+    ctx.beginPath();
+    ctx.moveTo(x, y1);
+    ctx.lineTo(x + w, y1);
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.moveTo(x, y2);
+    ctx.lineTo(x + w, y2);
+    ctx.stroke();
+
+    ctx.strokeStyle = ink;
+    ctx.setLineDash([]);
+    ctx.beginPath();
+    ctx.moveTo(x, yBot);
+    ctx.lineTo(x + w, yBot);
+    ctx.stroke();
+}
+