feat: 初始化页面

2025-03-18 15:17:30 +08:00
parent e4e9f6d527
commit cdf57ee562
477 changed files with 12379 additions and 0 deletions
@@ -0,0 +1,13 @@
+.page-container {
+    height: 100vh;
+    background-color: transparent;
+    overflow-y: hidden;
+
+    .text-canvas {
+        margin: 20rpx 20rpx 60rpx;
+        width: calc(100% - 40rpx);
+        height: calc(100% - 80rpx);
+        border: 1rpx solid #333;
+        background-color: #fff;
+    }
+}
@@ -0,0 +1,95 @@
+Page({
+    canvas: null as WechatMiniprogram.Canvas | null,
+    ctx: null as CanvasRenderingContext2D | null,
+
+    data: {
+        showModal: false,
+        texts: ['', '', '', ''],
+    },
+
+    onReady: function () {
+        this.initCanvas();
+    },
+
+    initCanvas() {
+        const query = wx.createSelectorQuery();
+        query
+            .select('#textCanvas')
+            .fields({ node: true, size: true })
+            .exec((res) => {
+                console.log('res----:', res);
+                const canvas = res[0].node;
+                const ctx = canvas.getContext('2d');
+                this.canvas = canvas;
+                this.ctx = ctx;
+                const dpi = 300; // 明确声明 DPI
+                const mmToInch = 25.4;
+                const width = (210 / mmToInch) * dpi; // 2480px
+                const height = (297 / mmToInch) * dpi; // 3508px
+                const pixelRatio = wx.getWindowInfo().pixelRatio;
+
+                // 设置画布实际像素为 A4 尺寸
+                canvas.width = width;
+                canvas.height = height;
+
+                // 适配屏幕显示（非必须，仅用于预览）
+                canvas.style = canvas.style || {};
+                canvas.style.width = `${width / pixelRatio}px`;
+                canvas.style.height = `${height / pixelRatio}px`;
+
+                // 缩放上下文以适配高清屏
+                ctx.scale(pixelRatio, pixelRatio);
+                this.drawCircles();
+            });
+    },
+
+    setCanvasSize() {},
+
+    drawCircles: function () {
+        if (!this.canvas) {
+            return;
+        }
+        const ctx = this.ctx as CanvasRenderingContext2D;
+        const { texts } = this.data;
+
+        // 清空画布
+        ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
+
+        // 绘制4个圆圈
+        for (let i = 0; i < 4; i++) {
+            const x = 50 + i * 100;
+            const y = 50;
+            ctx.beginPath();
+            ctx.arc(x, y, 40, 0, 2 * Math.PI);
+            ctx.fillStyle = 'white';
+            ctx.fill();
+            ctx.strokeStyle = 'black';
+            ctx.stroke();
+
+            if (texts[i]) {
+                ctx.fillStyle = 'black';
+                ctx.font = '20px sans-serif';
+                ctx.textAlign = 'center';
+                ctx.textBaseline = 'middle';
+                ctx.fillText(texts[i], x, y);
+            }
+        }
+    },
+
+    showInput: function () {
+        this.setData({ showModal: true });
+    },
+
+    updateText: function (e: WechatMiniprogram.CustomEvent) {
+        const index = e.currentTarget.dataset.index;
+        const value = e.detail.value;
+        const { texts } = this.data;
+        texts[index] = value;
+        this.setData({ texts });
+    },
+
+    confirmInput: function () {
+        this.setData({ showModal: false });
+        this.drawCircles();
+    },
+});