feat: textPaint

2025-03-17 17:50:44 +08:00
parent 277477dd9b
commit e4e9f6d527
11 changed files with 185 additions and 107 deletions
@@ -0,0 +1,54 @@
+Page({
+    data: {
+        showModal: false,
+        texts: ['', '', '', ''],
+    },
+
+    onReady: function () {
+        this.drawCircles();
+    },
+
+    drawCircles: function () {
+        const ctx = wx.createCanvasContext('myCanvas');
+        const { texts } = this.data;
+
+        // 绘制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.setFillStyle('white');
+            ctx.fill();
+            ctx.setStrokeStyle('black');
+            ctx.stroke();
+
+            if (texts[i]) {
+                ctx.setFillStyle('black');
+                ctx.setFontSize(20);
+                ctx.setTextAlign('center');
+                ctx.setTextBaseline('middle');
+                ctx.fillText(texts[i], x, y);
+            }
+        }
+
+        ctx.draw();
+    },
+
+    showInput: function () {
+        this.setData({ showModal: true });
+    },
+
+    updateText: function (e) {
+        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();
+    },
+});
@@ -0,0 +1,7 @@
+{
+    "navigationBarTitleText": "文本绘制 示例",
+    "navigationBarBackgroundColor": "#d2e7d8",
+    "homeButton": true,
+    "backgroundColor": "#e8eddb",
+    "enablePullDownRefresh": false
+}
@@ -0,0 +1,13 @@
+<view class="container">
+    <canvas canvas-id="myCanvas" style="width: 100%; height: 100vh;"></canvas>
+    <button class="input-button" bindtap="showInput">输入文本</button>
+    <view wx:if="{{showModal}}" class="modal">
+        <view class="modal-content">
+            <input placeholder="输入第一个文本" bindinput="updateText" data-index="0" />
+            <input placeholder="输入第二个文本" bindinput="updateText" data-index="1" />
+            <input placeholder="输入第三个文本" bindinput="updateText" data-index="2" />
+            <input placeholder="输入第四个文本" bindinput="updateText" data-index="3" />
+            <button bindtap="confirmInput">确认</button>
+        </view>
+    </view>
+</view>
@@ -0,0 +1,34 @@
+.container {
+    position: relative;
+}
+
+canvas {
+    width: 100%;
+    height: 100vh;
+}
+
+.input-button {
+    position: absolute;
+    bottom: 20px;
+    right: 20px;
+    z-index: 10;
+}
+
+.modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.modal-content {
+    background-color: white;
+    padding: 20px;
+    border-radius: 10px;
+    width: 80%;
+}