feat: 绘制Header和Legend

miniprogram/canvasService/constant.ts

@@ -0,0 +1,24 @@
+const PAPER_SIZE = {
+    A4: {
+        width: 2480,
+        height: 3508,
+    },
+    A3: {
+        width: 3508,
+        height: 4960,
+    },
+    A2: {
+        width: 4960,
+        height: 7016,
+    },
+    A1: {
+        width: 7016,
+        height: 10032,
+    },
+    A0: {
+        width: 10032,
+        height: 14176,
+    },
+};
+
+export { PAPER_SIZE };

miniprogram/canvasService/textDrawService.ts

@@ -0,0 +1,121 @@
+import { PAPER_SIZE } from './constant';
+
+class TextDrawService {
+    canvas: WechatMiniprogram.Canvas;
+    ctx: RenderingContext;
+    options: Record<string, any>;
+    paperSize: PaperSize;
+    currentX: number;
+    currentY: number;
+
+    constructor(canvas: Canvas, ctx: RenderingContext, options?: Record<string, any>) {
+        this.canvas = canvas;
+        this.ctx = ctx;
+        this.paperSize = 'A4';
+        this.options = {
+            title: '找一找  涂  色',
+            radius: 80,
+            colors: ['#2196F3', '#FFEB3B', '#FF9800', '#F44336'],
+            characters: ['鱼', '鸟', '猫', '狗'],
+            ...options,
+        };
+        this.currentX = 0;
+        this.currentY = 0;
+    }
+
+    draw() {
+        this.setPaper();
+        this.drawHeader();
+        this.drawLegend();
+    }
+
+    drawHeader() {
+        const { canvas, ctx } = this;
+        const { title } = this.options;
+
+        ctx.font = 'bold 80px "Microsoft Yahei"';
+        ctx.fillStyle = '#333';
+        ctx.textAlign = 'center';
+        const titleX = canvas.width / 2;
+        const titleY = 120;
+        ctx.fillText(title, titleX, titleY);
+
+        // 记录当前X、Y坐标
+        this.currentX = titleX;
+        this.currentY = titleY + 50;
+        // 绘制分割线
+        this.drawLine(this.currentY);
+    }
+
+    // 绘制示例
+    drawLegend() {
+        const { ctx, options } = this;
+        const { colors, characters, radius } = options;
+        const startX = (this.canvas.width - colors.length * 400) / 2; // 计算起始X坐标以居中
+        this.currentY = this.currentY + radius + 50; // radius 为圆的半径，再加上离线的边距为50
+        const startY = this.currentY; // 设置起始Y坐标
+
+        ctx.moveTo(startX, startY);
+        colors.forEach((color: string, index: number) => {
+            const x = startX + index * 500; // 计算每个圆的X坐标
+            const y = startY; // 计算圆的Y坐标
+
+            // 绘制圆
+            ctx.beginPath();
+            ctx.arc(x, y, radius, 0, Math.PI * 2);
+            ctx.fillStyle = color;
+            ctx.fill();
+            ctx.fillStyle = '#333';
+            ctx.stroke();
+            ctx.closePath();
+
+            // 绘制长方形
+            ctx.fillStyle = '#fff'; // 长方形背景色
+            ctx.strokeStyle = '#333';
+            ctx.lineWidth = 4;
+            const rectangleX = x - 120; // 计算字符X坐标
+            const rectangleY = y + radius + 40; // 计算字符Y坐标
+            ctx.strokeRect(rectangleX, rectangleY, 240, 100); // 绘制长方形
+            // ctx.fillRect(x - 75, y + 10, 240, 100); // 填充长方形
+
+            // 绘制字符
+            ctx.fillStyle = '#333';
+            ctx.font = 'bold 60px "Microsoft Yahei"';
+            ctx.textAlign = 'center';
+            ctx.fillText(characters[index], rectangleX + 120, rectangleY + 70);
+            this.currentY = rectangleY + 100; // 100会矩形宽度
+        });
+
+        this.currentY = this.currentY + 50; // 计算分割线的Y坐标，距离示例图20px
+        this.drawLine(this.currentY);
+    }
+
+    drawLine(linY: number) {
+        const { canvas, ctx } = this;
+
+        ctx.strokeStyle = '#333';
+        ctx.lineWidth = 4;
+        ctx.beginPath();
+        ctx.moveTo(20, linY);
+        ctx.lineTo(canvas.width - 20, linY);
+        ctx.stroke();
+    }
+
+    setPaper() {
+        const ctx = this.ctx;
+        const { width, height } = PAPER_SIZE[this.paperSize];
+        this.canvas.width = width;
+        this.canvas.height = height;
+
+        this.clear();
+        ctx.fillStyle = '#fff'; // 设置背景色为白色
+        ctx.fillRect(0, 0, width, height);
+    }
+
+    clear() {
+        const canvas = this.canvas;
+        this.ctx.clearRect(0, 0, canvas.width, canvas.height);
+    }
+}
+
+export default TextDrawService;

miniprogram/canvasService/utils.ts

@@ -0,0 +1,17 @@
+import { PAPER_SIZE } from './constant';
+
+export function setCanvasSize(canvas: Canvas, paperSize: PaperSize) {
+    const sizeObj = PAPER_SIZE[paperSize];
+    // const { pixelRatio: dpr, windowWidth, windowHeight } = wx.getWindowInfo();
+    // const printWidth = A4.width;
+    // const printHeight = A4.height;
+    // @ts-ignore
+    // const originWidth = canvas._width || windowWidth;
+    // // @ts-ignore
+    // const originHeight = canvas._height || windowHeight;
+
+    canvas.width = sizeObj.width;
+    canvas.height = sizeObj.height;
+    console.log('canvas----:', canvas);
+    return canvas;
+}

miniprogram/demoPages/textPaint2/textPaint.ts

@@ -1,3 +1,5 @@
+import TextDrawService from '../../canvasService/textDrawService';
+
 Page({
     canvas: null as Canvas | null,
     ctx: null as RenderingContext | null,
@@ -44,11 +46,14 @@ Page({
                 const canvas = res[0].node;
                 const ctx = canvas.getContext('2d');
 
+                const textDrawService = new TextDrawService(canvas, ctx);
+                textDrawService.draw();
+
                 this.canvas = canvas;
                 this.ctx = ctx;
-                this.setCanvasSize(canvas, ctx);
+                // this.setCanvasSize(canvas, ctx);
                 // ctx.fillRect(0, 0, 2480, 3508);
-                this.drawGameBoard(ctx);
+                // this.drawGameBoard(ctx);
             });
     },
 
@@ -85,14 +90,17 @@ Page({
         const canvas = this.canvas as Canvas;
         ctx = ctx || (this.ctx as RenderingContext);
         ctx.clearRect(0, 0, canvas.width, canvas.height);
-        ctx.fillStyle = '#333'; // 设置填充色为白色
+        ctx.fillStyle = '#fff'; // 设置填充色为白色
         ctx.fillRect(0, 0, 2480, 3508); // 覆盖整个A4画布
 
         // 绘制标题
+        // 绘制标题并居中显示
         ctx.font = 'bold 80px "Microsoft Yahei"';
         ctx.fillStyle = '#333';
-        ctx.fillText('找一找  涂  色', 1240 - ctx.measureText('找一找  涂  色').width / 2, 150);
+        ctx.textAlign = 'center';
-
+        const titleX = canvas.width / 2;
+        const titleY = 150;
+        ctx.fillText('找一找  涂  色', titleX, titleY);
         // 绘制颜色示例（顶部）
         this.drawColorLegend(ctx, 250);
 

typings/global.d.ts

@@ -2,3 +2,5 @@
 type Canvas = WechatMiniprogram.Canvas;
 type RenderingContext = WechatMiniprogram.CanvasRenderingContext2D;
 type TouchEvent = WechatMiniprogram.TouchEvent;
+
+type PaperSize = 'A4' | 'A3';