feat: 文字涂色

miniprogram/demoPages/textPaint2/textPaint.less

@@ -22,16 +22,20 @@
 .container {
     height: 100vh;
     background-color: transparent;
-    // overflow-y: hidden;
+    background-color: transparent;
+    display: flex;
+    align-items: center;
+    flex-direction: column;
 }
 
 .canvas-container {
-    margin: 20rpx;
-    width: calc(100% - 40rpx);
-    // width: 100%;
-    height: 86%;
+    margin-top: 20rpx;
+    // margin: 20rpx;
+    // width: calc(100% - 40rpx);
+    // // width: 100%;
+    // height: 580px;
     // height: calc(100% - 80rpx);
-    border: 1rpx solid #333;
+    border: 2rpx solid #333;
     background-color: #fff;
     box-sizing: border-box;
-}
+}

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);

miniprogram/demoPages/textPaint2/textPaint.wxml

@@ -9,10 +9,9 @@
                 data-index="{{index}}"></view>
         </block>
     </view> -->
-
     <!-- 画布容器 -->
-    <canvas type="2d" id="textCanvas" class="canvas-container" />
-
+    <canvas type="2d" id="textCanvas" class="canvas-container" style="width:{{boxWidth}}px;height:{{boxHeight}}px" />
+    <view>当前宽度：{{boxWidth}}px，高度：{{boxHeight}}px</view>
     <!-- 操作按钮 -->
     <button class="action-btn" bindtap="exportToPrint">导出A4图片</button>
-</view>
+</view>