feat: 增加找字模板

2025-11-20 17:35:37 +08:00
parent 2e0f8f0fe1
commit 654ea69915
11 changed files with 1061 additions and 532 deletions
@@ -0,0 +1,126 @@
+import { getMiniCodeImage, getImage } from '../utils/index';
+
+/**
+ * 绘制页眉的参数接口
+ */
+interface DrawHeaderParams {
+    canvas: WechatMiniprogram.Canvas;
+    ctx: RenderingContext;
+    headerType: PrintHeader;
+    options: {
+        appName: string;
+        appHint: string;
+        title: string;
+        subTitle: string;
+    };
+    onHeaderDrawn?: (currentY: number) => void; // 绘制完成后的回调，用于设置 currentY 和绘制分割线
+}
+
+/**
+ * 绘制完整页眉（包含 Logo、应用名称、提示、标题、副标题）
+ */
+export async function drawHeader({
+    canvas,
+    ctx,
+    headerType,
+    options,
+    onHeaderDrawn,
+}: DrawHeaderParams): Promise<void> {
+    const { appName, appHint, title, subTitle } = options;
+
+    let titleX = 80 + 200 + 48; // currentX + logoWidth + spacing
+    const titleY = 80;
+
+    const logoX = 80;
+    const logoY = 60;
+    const logoWidth = 200;
+    const logoHeight = 200;
+
+    // 根据 headerType 绘制 Logo 或调整标题位置
+    switch (headerType) {
+        case 'LogoImage': {
+            const image = await getImage(
+                canvas,
+                '/assets/imgs/doodle-logo.png',
+            );
+            ctx.drawImage(image, logoX, logoY, logoWidth, logoHeight);
+            break;
+        }
+        case 'noLogoImage': {
+            titleX = 120;
+            break;
+        }
+        case 'minimal': {
+            titleX = 120;
+            break;
+        }
+        default: {
+            const image = await getMiniCodeImage(canvas);
+            ctx.drawImage(image, logoX, logoY, logoWidth, logoHeight);
+            break;
+        }
+    }
+
+    // 绘制应用名称
+    ctx.font = 'bold 64px "Microsoft Yahei"';
+    ctx.fillStyle = '#000';
+    ctx.textAlign = 'left';
+    ctx.textBaseline = 'top';
+    ctx.fillText(appName, titleX, titleY);
+
+    // 绘制应用提示
+    ctx.font = '48px "Microsoft Yahei"';
+    ctx.fillStyle = '#666';
+    ctx.fillText(appHint, titleX, 186);
+
+    // 绘制标题
+    ctx.font = 'bold 64px "Microsoft Yahei"';
+    ctx.fillStyle = '#000';
+    ctx.fillText(title, 1015, titleY);
+
+    // 绘制副标题
+    ctx.font = '48px "Microsoft Yahei"';
+    ctx.fillStyle = '#666';
+    ctx.fillText(subTitle, 1015, 186);
+
+    // 调用回调函数，让调用者设置 currentY 并绘制分割线
+    if (onHeaderDrawn) {
+        onHeaderDrawn(304);
+    }
+}
+
+/**
+ * 绘制迷你页眉的参数接口
+ */
+interface DrawMiniHeaderParams {
+    canvas: WechatMiniprogram.Canvas;
+    ctx: RenderingContext;
+    options: {
+        appName: string;
+        title: string;
+    };
+    onHeaderDrawn?: (currentY: number) => void; // 绘制完成后的回调，用于设置 currentY 和绘制分割线
+}
+
+/**
+ * 绘制迷你页眉（仅包含应用名称和标题，居中显示）
+ */
+export function drawMiniHeader({
+    canvas,
+    ctx,
+    options,
+    onHeaderDrawn,
+}: DrawMiniHeaderParams): void {
+    const { appName, title } = options;
+    const titleY = 120;
+
+    ctx.font = 'bold 64px "Microsoft Yahei"';
+    ctx.fillStyle = '#000';
+    ctx.textAlign = 'center';
+    ctx.fillText(appName + '    ' + title, canvas.width / 2, titleY);
+
+    // 调用回调函数，让调用者设置 currentY 并绘制分割线
+    if (onHeaderDrawn) {
+        onHeaderDrawn(200);
+    }
+}