feat: 完成图形涂色绘制

miniprogram/service/shapeDrawService.ts

@@ -226,90 +226,70 @@ class ShapeDrawService {
         const { canvas, ctx, shapes } = this;
         if (shapes.length <= 0) return;
 
-        const minY = this.headerType === 'minimal' ? 532 : 622;
+        // 固定可渲染的总行数
+        const ROW_COUNT = 6;
+        // 每行之间的垂直间距
+        const VERTICAL_GAP = 120;
+        // 图形大小
         const shapeSize = 180;
-        const minGap = 40; // 图形之间最小间距
-        const bottomMargin = 20;
-        // 计算内容区起始Y坐标，保证在532或622以下
-        const contentTop = minY + 20; // 距离minY线之后20px开始绘制
-        const contentHeight = canvas.height - contentTop - bottomMargin;
+        // 左右边距
+        const leftMargin = 160;
+        const rightMargin = 160;
+        // 以 drawLegend 画完后的分割线作为基准，内容区顶部间距 50
+        const legendBottomY = this.currentY;
+        const topGap = 60;
+        const contentTop = legendBottomY + topGap;
 
-        // 左右各留100像素边距
-        const contentLeft = 100;
-        const contentWidth = canvas.width - shapeSize;
+        // 可用宽度
+        const contentWidth = canvas.width - leftMargin - rightMargin;
 
-        // 计算一共要绘制多少个图形
-        const repeatCount = 8;
-        const totalShapes = shapes.length * repeatCount;
+        // 每行最多能放多少个图形（考虑最小间距40）
+        const minGap = 40;
+        const maxPerRow = Math.floor((contentWidth + minGap) / (shapeSize + minGap));
+
+        // 总共要绘制多少个图形（每行都填满）
+        const totalShapes = maxPerRow * ROW_COUNT;
 
         // 生成所有要绘制的图形（打乱顺序，保证随机性）
         let allShapes: ShapeCard[] = [];
-        for (let i = 0; i < repeatCount; i++) {
+        for (let i = 0; i < Math.ceil(totalShapes / shapes.length); i++) {
             allShapes = allShapes.concat(shapes);
         }
+        allShapes = allShapes.slice(0, totalShapes);
         // 洗牌算法彻底打乱
         for (let i = allShapes.length - 1; i > 0; i--) {
             const j = Math.floor(Math.random() * (i + 1));
             [allShapes[i], allShapes[j]] = [allShapes[j], allShapes[i]];
         }
 
-        // 计算每行最多能放多少个图形（考虑最小间距和边距）
-        const maxPerRow = Math.floor((contentWidth + minGap) / (shapeSize + minGap));
-        const rowCount = Math.ceil(totalShapes / maxPerRow);
-
-        // 计算实际间距（保证左右边距为80，且间距不小于minGap）
-        const actualPerRow = Math.min(maxPerRow, totalShapes);
-        const actualGap = actualPerRow > 1
-            ? Math.max(minGap, (contentWidth - actualPerRow * shapeSize) / (actualPerRow - 1))
-            : 0;
-
-        // 计算每行的Y坐标 - 固定上边距，不使用垂直居中
-        const totalRows = rowCount;
-        let startY = contentTop; // 直接使用contentTop，不进行垂直居中计算
-
         // 生成所有图形的位置
         let positions: { x: number, y: number }[] = [];
-        let shapeIdx = 0;
-
-        const canvasHeight = this.canvas.height;
-
-        for (let row = 0; row < totalRows; row++) {
-            // 本行实际要放多少个图形
-            const shapesInThisRow = Math.min(actualPerRow, totalShapes - shapeIdx);
+        for (let row = 0; row < ROW_COUNT; row++) {
+            // 本行起始Y
+            const y = contentTop + row * (shapeSize + VERTICAL_GAP) + shapeSize / 2;
             // 本行实际间距
-            const gap = shapesInThisRow > 1
-                ? Math.max(minGap, (contentWidth - shapesInThisRow * shapeSize) / (shapesInThisRow - 1))
+            const gap = maxPerRow > 1
+                ? Math.max(minGap, (contentWidth - maxPerRow * shapeSize) / (maxPerRow - 1))
                 : 0;
-            // 本行起始X
-            let startX = contentLeft;
-            // 居中对齐
-            if (shapesInThisRow > 1) {
-                const rowWidth = shapesInThisRow * shapeSize + (shapesInThisRow - 1) * gap;
-                startX = contentLeft + (contentWidth - rowWidth) / 2;
+            // 本行起始X（水平居中）
+            let startX = leftMargin;
+            if (maxPerRow > 1) {
+                const rowWidth = maxPerRow * shapeSize + (maxPerRow - 1) * gap;
+                startX = leftMargin + (contentWidth - rowWidth) / 2;
             } else {
-                startX = contentLeft + (contentWidth - shapeSize) / 2;
+                startX = leftMargin + (contentWidth - shapeSize) / 2;
             }
-
-            // 计算当前行的Y坐标
-            const currentRowY = startY + row * (shapeSize + minGap) + shapeSize / 2;
-
-            // 检查当前行是否会超出下边界
-            if (currentRowY + shapeSize / 2 > canvasHeight - bottomMargin) {
-                break; // 停止生成更多行
-            }
-
-            for (let col = 0; col < shapesInThisRow; col++) {
+            for (let col = 0; col < maxPerRow; col++) {
                 positions.push({
                     x: startX + col * (shapeSize + gap) + shapeSize / 2,
-                    y: currentRowY
+                    y: y
                 });
-                shapeIdx++;
-                if (shapeIdx >= totalShapes) break;
             }
-
-            if (shapeIdx >= totalShapes) break;
         }
 
+        // 修正：只保留前 totalShapes 个位置，防止多出一行
+        positions = positions.slice(0, totalShapes);
+
         // 再次彻底打乱位置顺序，保证排列无规律
         for (let i = positions.length - 1; i > 0; i--) {
             const j = Math.floor(Math.random() * (i + 1));
@@ -317,14 +297,14 @@ class ShapeDrawService {
         }
 
         // 记录实际绘制的图形数量
-        console.log(`绘制图形：计划${totalShapes}个，实际${positions.length}个，边界限制：距离下边${bottomMargin}px`);
+        console.log(`绘制图形：计划${totalShapes}个，实际${positions.length}个；每行${maxPerRow}个，共${ROW_COUNT}行；边距 左右=${leftMargin}/${rightMargin}，顶部=${topGap}（基于legend底线）`);
 
         // 绘制所有图形
         positions.forEach((pos, index) => {
             const shape = allShapes[index];
 
-            // 随机旋转角度
-            const rotation = (Math.random() - 0.5) * 0.5; // ±0.25弧度
+            // 随机旋转角度，范围为±90度（即最大180度）
+            const rotation = (Math.random() - 0.5) * Math.PI; // ±90度 = ±π/2 弧度，Math.PI为180度
 
             ctx.save();
             ctx.translate(pos.x, pos.y);