feat: 增加找字模板

miniprogram/service/textDrawService.ts

@@ -1,6 +1,9 @@
 // import { PAPER_SIZE } from './constant';
 import { PAPER_SIZE } from '../constants/colors';
-import { getMiniCodeImage, getImage } from '../utils/index';
+import {
+    drawHeader as drawHeaderCommon,
+    drawMiniHeader as drawMiniHeaderCommon,
+} from './headerDrawService';
 
 /**
  * 计算示例区域圆的中心点
@@ -89,7 +92,7 @@ class TextDrawService {
         this.options.appName = printConfig.appName;
     }
 
-    draw(list: Array<{ color: string; word: string }>) {
+    async draw(list: Array<{ color: string; word: string }>) {
         this.setPrintConfig();
 
         this.colors = list.map((item) => item.color || '#000');
@@ -97,7 +100,7 @@ class TextDrawService {
         this.clear();
         this.setPaper();
         if (this.headerType !== 'minimal') {
-            this.drawHeader();
+            await this.drawHeader();
         } else {
             this.drawMiniHeader();
         }
@@ -107,85 +110,40 @@ class TextDrawService {
     }
 
     async drawHeader() {
-        const { canvas, ctx } = this;
-        const { appName, appHint, title, subTitle } = this.options;
-
         this.currentX = 80;
         this.currentY = 80;
-        let titleX = this.currentX + 200 + 48;
-        const titleY = 80;
-
-        const logoX = 80;
-        const logoY = 60;
-        const logoWidth = 200;
-        const logoHeight = 200;
-
-        switch (this.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.strokeStyle = '#888';
-        // ctx.lineWidth = 2;
-        // ctx.beginPath();
-        // ctx.moveTo(483, 70);
-        // ctx.lineTo(483, 70 + 140);
-        // ctx.stroke();
-
-        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);
-
-        this.currentY = 304;
-        this.drawLine(this.currentY);
+        await drawHeaderCommon({
+            canvas: this.canvas,
+            ctx: this.ctx,
+            headerType: this.headerType,
+            options: {
+                appName: this.options.appName || '涂鸦丫小程序',
+                appHint: this.options.appHint || '识字|识图|练字|打印',
+                title: this.options.title || '找一找  涂  色',
+                subTitle: this.options.subTitle || '给文字涂上相同的颜色',
+            },
+            onHeaderDrawn: (currentY) => {
+                this.currentY = currentY;
+                this.drawLine(this.currentY);
+            },
+        });
     }
 
     drawMiniHeader() {
-        const { canvas, ctx } = this;
-        const { appName, title } = this.options;
-        const titleY = 120;
-
-        ctx.font = 'bold 64px "Microsoft Yahei"';
-        ctx.fillStyle = '#000';
-        ctx.textAlign = 'center';
-        ctx.fillText(appName + '    ' + title, canvas.width / 2, titleY);
-        this.currentY = 200;
-        this.drawLine(this.currentY);
+        drawMiniHeaderCommon({
+            canvas: this.canvas,
+            ctx: this.ctx,
+            options: {
+                appName: this.options.appName || '涂鸦丫小程序',
+                title: this.options.title || '找一找  涂  色',
+            },
+            onHeaderDrawn: (currentY) => {
+                this.currentY = currentY;
+                this.drawLine(this.currentY);
+            },
+        });
     }
 
-
     /** 绘制示例
      * 矩形： x、y为左上角
      * 圆形：x、y为圆心