feat: 文字涂色

miniprogram/demoPages/textPaint2/textPaint.ts

@@ -1,5 +1,7 @@
 // import TextDrawService from '../../canvasService/textDrawService';
-import TextDrawServiceV2 from '../../canvasService/textDrawServiceV2';
+// import TextDrawServiceV2 from '../../canvasService/textDrawServiceV2';
+import { PAPER_SIZE } from '../../canvasService/constant';
+import TextDrawServiceV3 from '../../canvasService/textDrawServiceV3';
 
 Page({
     canvas: null as Canvas | null,
@@ -19,10 +21,49 @@ Page({
 
     onLoad() {
         console.log('textPaint2 onLoad');
-        this.generateMatrix();
-        this.initCanvas();
+        // this.setCanvasBoxSize();
+        // this.generateMatrix();
     },
 
+    onReady() {
+        wx.nextTick(() => {
+            this.setCanvasBoxSize();
+        });
+    },
+
+    // setCanvasBoxSize() {
+    //     const { width: paperWidth, height: paperHeight } = PAPER_SIZE['A4'];
+
+    //     // 逻辑尺寸（容器宽高）
+    //     const boxWidth = windowWidth - 40;
+    //     const boxHeight = boxWidth / (paperWidth / paperHeight);
+    //     console.log('boxWidth---:', boxWidth);
+    //     console.log('boxHeight---:', boxHeight);
+    //     this.setData({ boxWidth, boxHeight });
+    //     // // 实际像素尺寸（需乘以设备像素比）
+    //     // const canvasWidth = boxWidth * pixelRatio;
+    //     // const canvasHeight = boxHeight * pixelRatio;
+
+    //     // // 更新 Canvas 节点属性
+    //     // const query = wx.createSelectorQuery().select('#textCanvas');
+    //     // query.fields({ node: true, size: true }).exec((res) => {
+    //     //     const canvas = res[0].node;
+    //     //     canvas.width = canvasWidth;
+    //     //     canvas.height = canvasHeight;
+    //     //     // 缩放上下文以适配逻辑尺寸
+    //     //     const ctx = canvas.getContext('2d');
+    //     //     ctx.scale(pixelRatio, pixelRatio);
+
+    //     //     this.canvas = canvas;
+    //     //     this.ctx = ctx;
+
+    //     //     const textDrawService = new TextDrawServiceV3(canvas, ctx);
+    //     //     textDrawService.draw();
+    //     //     ctx.fillStyle = '#fff'; // 设置背景色为白色
+    //     //     ctx.fillRect(0, 0, canvasWidth, canvasHeight);
+    //     // });
+    // },
+
     // 生成6列随机矩阵
     generateMatrix() {
         const shuffled = [...this.data.characters]
@@ -35,6 +76,18 @@ Page({
         this.setData({ matrix: shuffled.slice(0, 42) }); // 6列x7行
     },
 
+    setCanvasBoxSize() {
+        const { width, height } = PAPER_SIZE['A4'];
+        const { windowWidth } = wx.getWindowInfo();
+        const boxWidth = windowWidth - 20;
+        const boxHeight = boxWidth / (width / height);
+        console.log('boxWidth----:', boxWidth);
+        console.log('boxHeight----:', boxHeight);
+        this.setData({ boxHeight, boxWidth }, () => {
+            this.initCanvas();
+        });
+    },
+
     // 初始化A4画布（300DPI）
     initCanvas() {
         wx.createSelectorQuery()
@@ -44,13 +97,35 @@ Page({
                 size: true,
             })
             .exec((res) => {
-                const canvas = res[0].node;
-                const ctx = canvas.getContext('2d');
-                this.canvas = canvas;
-                this.ctx = ctx;
+                if (res[0] && res[0].node) {
+                    const canvas = res[0].node;
+                    const ctx = canvas.getContext('2d');
+                    if (ctx) {
+                        this.canvas = canvas;
+                        this.ctx = ctx;
+                        const rect = res[0];
+                        console.log('rect-----:', rect);
+                        // const width = rect.width * dpr;
+                        // const height = rect.height * dpr;
 
-                const textDrawService = new TextDrawServiceV2(canvas, ctx);
-                textDrawService.draw();
+                        // 设置canvas的实际尺寸
+                        // canvas.width = width;
+                        // canvas.height = height;
+                        // ctx.scale(dpr, dpr);
+
+                        // 使用TextDrawServiceV3绘制
+                        const textDrawService = new TextDrawServiceV3(canvas, ctx);
+                        textDrawService.draw();
+                    }
+                }
+
+                // const canvas = res[0].node;
+                // const ctx = canvas.getContext('2d');
+                // this.canvas = canvas;
+                // this.ctx = ctx;
+
+                // const textDrawService = new TextDrawServiceV3(canvas, ctx);
+                // textDrawService.draw();
 
                 // this.setCanvasSize(canvas, ctx);
                 // ctx.fillRect(0, 0, 2480, 3508);