feat:数字学习卡

2025-11-26 18:03:29 +08:00
parent 61e7781bf8
commit 698109e6f5
37 changed files with 872 additions and 158 deletions
@@ -0,0 +1,78 @@
+/**
+ * 绘制内容区域的参数接口
+ */
+interface DrawNumberContentParams {
+    ctx: RenderingContext;
+    selectedNumber: number;
+    canvasWidth: number; // 逻辑像素宽度（已除以3）
+    startY: number; // 起始Y坐标
+}
+
+/**
+ * 绘制数字涂色内容区域服务
+ * 随机绘制1-10的数字，尺寸除以3
+ */
+export function drawNumberContent({
+    ctx,
+    selectedNumber,
+    canvasWidth,
+    startY,
+}: DrawNumberContentParams): void {
+    const rows = 6;
+    const radius = 26; // 约26.67
+    const fontSize = 24; // 24
+
+    const startYPos = startY + 10 + radius; // 约47.33
+    const startX1 = 100 + radius; // 约112.22
+    const startX2 = 60 + radius; // 约75.56
+    const spaceWidthFirst = (canvasWidth - startX1 * 2) / (5 - 1);
+    const spaceWidthSecond = (canvasWidth - startX2 * 2) / (6 - 1);
+    const spaceHeight = 18; // 18
+
+    ctx.moveTo(startX1, startYPos);
+    for (let i = 0; i < rows; i++) {
+        const cols = i % 2 === 0 ? 5 : 6;
+
+        for (let j = 0; j < cols; j++) {
+            const y = startYPos + i * (spaceHeight + radius * 2);
+            const x =
+                i % 2 === 0
+                    ? startX1 + j * spaceWidthFirst
+                    : startX2 + j * spaceWidthSecond;
+
+            // 随机生成1-10的数字，但确保包含选中的数字
+            let number: number;
+            if (i === 0 && j === 0) {
+                // 第一个位置固定为选中的数字
+                number = selectedNumber;
+            } else {
+                // 其他位置随机，但增加选中数字出现的概率
+                const random = Math.random();
+                if (random < 0.3) {
+                    // 30%概率是选中的数字
+                    number = selectedNumber;
+                } else {
+                    // 70%概率是其他随机数字
+                    number = Math.floor(Math.random() * 10) + 1;
+                }
+            }
+
+            // 绘制圆形背景（线宽除以3）
+            ctx.fillStyle = '#fff';
+            ctx.strokeStyle = '#000';
+            ctx.lineWidth = 1; // 约1.33
+            ctx.beginPath();
+            ctx.arc(x, y, radius, 0, Math.PI * 2);
+            ctx.fill();
+            ctx.stroke();
+            ctx.closePath();
+
+            // 绘制数字（字体大小除以3）
+            ctx.fillStyle = '#333';
+            ctx.font = `bold ${fontSize}px "Microsoft Yahei"`;
+            ctx.textBaseline = 'middle';
+            ctx.textAlign = 'center';
+            ctx.fillText(String(number), x, y, radius * 2);
+        }
+    }
+}