feat: 完成图形涂色绘制

miniprogram/app.ts

@@ -1,21 +1,20 @@
+import config from './config/config';
+
+const defaultPrintConfig: PrintConfig = config.printHeader as PrintConfig;
+
+
 // app.ts
 App<IAppOption>({
     globalData: {
         env: 'release',
-        printConfig: {
+        printConfig: defaultPrintConfig
-            header: 'wechat',
-            appName: '涂鸦丫小程序'
-        }
     },
     onLaunch() {
         const accountInfo = wx.getAccountInfoSync();
         const env = accountInfo.miniProgram.envVersion || 'release';
         this.globalData.env = env;
         if (env !== 'release') {
-            const printConfig = wx.getStorageSync('printConfig') || {
+            const printConfig = wx.getStorageSync('printConfig') || defaultPrintConfig;
-                header: 'wechat',
-                appName: '涂鸦丫小程序'
-            };
             this.globalData.printConfig = printConfig;
         }
     },
@@ -29,10 +28,7 @@ App<IAppOption>({
     },
 
     getPrintConfig(): PrintConfig {
-        return this.globalData.printConfig || {
+        return this.globalData.printConfig || defaultPrintConfig;
-            header: 'wechat',
-            appName: '涂鸦丫小程序'
-        };
     },
 
     setPrintConfig(config: PrintConfig) {

miniprogram/components/shape-picker/shape-picker.ts

@@ -10,9 +10,9 @@ Component({
             type: Boolean,
             value: false,
         },
-        singleMode: {
+        selectedShapeIndex: {
-            type: Boolean,
+            type: Number,
-            value: false,
+            value: -1,
         },
     },
     /**
@@ -20,6 +20,7 @@ Component({
      */
     data: {
         shapes: [] as (ShapeCard & { svgDataUrl: string })[],
+        singleMode: false,
         totalSelected: 0,
     },
     lifetimes: {
@@ -36,8 +37,26 @@ Component({
             this.setData({
                 shapes: shapesWithDataUrl
             });
+        }
+    },
+    observers: {
+        selectedShapeIndex(newVal: number) {
+            this.setData({
+                singleMode: newVal !== -1
+            });
         },
     },
+    // pageLifetimes: {
+    //     show: function () {
+    //         console.log('show singleMode', this.data.singleMode);
+    //     },
+    //     hide: function () {
+    //         console.log('hide singleMode', this.data.singleMode);
+    //     },
+    //     resize: function (size) {
+    //         console.log('resize', size);
+    //     }
+    // },
     /**
      * 组件的方法列表
      */
@@ -89,9 +108,14 @@ Component({
         },
 
         onChange() {
-            const { shapes } = this.data;
+            const { shapes, selectedShapeIndex, singleMode } = this.data;
             const selectedShapes = shapes.filter(item => item.checked);
-            this.triggerEvent('onChange', { shapes: selectedShapes, singleMode: this.data.singleMode });
+
+            this.triggerEvent('onChange', {
+                shapes: selectedShapes,
+                singleMode,
+                selectedShapeIndex
+            });
         },
     },
 });

miniprogram/components/shape-picker/shape-picker.wxml

@@ -3,9 +3,10 @@
     bind:close="onClose"
     custom-class="shape-picker-popup">
     <view class="shape-picker-container">
-        <text class="shape-picker-title"
+        <text class="shape-picker-title">
-            >选择形状{{ singleMode ? '' : '（多选）' }}</text
+            选择形状{{selectedShapeIndex}} {{ singleMode ? '（单选）' :
-        >
+            '（多选）' }}
+        </text>
         <view class="shape-options-wrapper">
             <view class="shape-options">
                 <view

miniprogram/config/config.ts

@@ -0,0 +1,6 @@
+export default {
+    printHeader: {
+        header: 'LogoImage',
+        appName: '涂鸦丫'
+    }
+}

miniprogram/constants/shapes.ts

@@ -23,8 +23,7 @@ const SHAPES: ShapeCard[] = [
         id: 'obtuse-triangle',
         name: '钝角三角形',
         type: 'triangle',
-        // svg: '<polygon points="20,20 80,80 35,65" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
+        svg: '<polygon points="15,15 85,85 20,70" stroke="#141414" stroke-width="1" fill="transparent"/>',
-        svg: '<polygon points="15,15 85,85 20,70" stroke="#141414" stroke-width="1" fill="#ff0000"/>',
         fillColor: '#ff0000',
         drawFunction: 'drawTriangle',
     },

miniprogram/pages/debug/debug.ts

@@ -1,17 +1,15 @@
+import config from '../../config/config';
+
+const defaultPrintConfig: PrintConfig = config.printHeader as PrintConfig;
+
 Page({
     data: {
-        printConfig: {
+        printConfig: defaultPrintConfig,
-            header: 'wechat',
-            appName: '涂鸦丫小程序'
-        },
         enableDebug: false
     },
 
     onLoad() {
-        const printConfig = getApp().getPrintConfig() || {
+        const printConfig = getApp().getPrintConfig() || defaultPrintConfig;
-            header: 'wechat',
-            appName: '涂鸦丫小程序'
-        };
         const enableDebug = wx.getStorageSync('enableDebug') || false;
         this.setData({ printConfig, enableDebug });
     },

miniprogram/pages/debug/debug.wxml

@@ -8,7 +8,7 @@
             value="{{printConfig.header}}"
             bind:change="onChangeHeader">
             <van-cell
-                title="微信小程序头（wechat）（默认）"
+                title="微信小程序头（wechat）"
                 clickable
                 data-name="wechat"
                 bind:click="onClickHeaderSetting">
@@ -29,7 +29,7 @@
                 <van-radio slot="right-icon" name="LogoImage" />
             </van-cell>
             <van-cell
-                title="最小Header头（minimal）"
+                title="最小Header头（minimal）（默认）"
                 clickable
                 data-name="minimal"
                 bind:click="onClickHeaderSetting"

miniprogram/pages/shape/index.less

@@ -8,7 +8,7 @@ page {
     box-sizing: border-box;
 
     .empty {
-        height: 190rpx;
+        height: 120rpx;
     }
 
     .wrapper {

miniprogram/pages/shape/index.ts

@@ -14,7 +14,7 @@ Page({
     data: {
         shapeList: [] as ShapeCard[],
         showSelectShapePopup: false,
-        currentShapeId: '',
+        selectedShapeIndex: -1,
         showColorPopup: false,
         currentIndex: 0,
         currentColor: '',
@@ -94,35 +94,48 @@ Page({
     },
 
     openSelectShapePopup(e: any) {
-        const { key } = e.detail;
+        const { index } = e.detail;
         this.setData({
             showSelectShapePopup: true,
-            currentShapeId: key
+            selectedShapeIndex: index
         });
     },
 
     closeSelectShapePopup() {
         this.setData({
             showSelectShapePopup: false,
-            currentShapeId: ''
+            selectedShapeIndex: -1
         });
     },
 
     onChangeShape(e: any) {
-        const { shapes } = e.detail;
+        const { shapes, singleMode, selectedShapeIndex } = e.detail;
         const prevShapeList: ShapeCard[] = this.data.shapeList || [];
-        // 1. 保留已选图形的 fillColor，不变
-        // 2. 新增的图形分配未被占用的颜色，且不重复
 
+        let newShapeList: ShapeCard[] = [];
+
+        if (singleMode) {
+            // 单选模式，只替换 selectedShapeIndex 对应的 shape，其他 shape 保持不变和原有颜色
+            newShapeList = prevShapeList.map((item, idx) => {
+                if (idx === selectedShapeIndex) {
+                    // 替换为新选中的 shape，保留原有 fillColor
+                    return {
+                        ...shapes[0],
+                        fillColor: item.fillColor
+                    };
+                } else {
+                    // 其他 shape 不变
+                    return item;
+                }
+            });
+        } else {
+            // 多选模式，原有逻辑
             // 获取所有可用颜色
             const colorList = WATER_COLORS.basic12.map(item => item.hex);
 
             // 记录已被使用的颜色（只考虑当前 shapeList 中的 fillColor）
             const usedColors = prevShapeList.map(item => item.fillColor).filter(Boolean);
 
-        // 新的 shapeList
-        const newShapeList: ShapeCard[] = [];
-
             // 记录已分配的颜色，避免重复
             const assignedColors = [...usedColors];
 
@@ -159,10 +172,11 @@ Page({
                     });
                 }
             });
+        }
 
         this.setData({
             showSelectShapePopup: false,
-            currentShapeId: '',
+            selectedShapeIndex: -1,
             shapeList: newShapeList
         }, () => {
             // 绘制canvas
@@ -216,7 +230,6 @@ Page({
     },
     onColorTap(e: any) {
         const { index, fillColor } = e.detail;
-        console.log('shape Page onColorTap', index, fillColor);
         this.setData({
             showColorPopup: true,
             currentColor: fillColor,

miniprogram/pages/shape/index.wxml

@@ -34,6 +34,7 @@
     </view>
     <shape-picker
         show="{{showSelectShapePopup}}"
+        selectedShapeIndex="{{selectedShapeIndex}}"
         bind:onClose="closeSelectShapePopup"
         bind:onChange="onChangeShape" />
     <color-picker
@@ -43,7 +44,7 @@
         bind:onChange="onChangeColor" />
 
     <view id="previewWrapper" class="wrapper">
-        <text class="wrapper-title">预览打印效果</text>
+        <text class="wrapper-title">预览打印效果 {{currentShapeId}}</text>
         <view
             wx:if="{{!isPCDevtool}}"
             id="canvasWrapper"
@@ -55,6 +56,7 @@
                 style="width:{{boxWidth}}px;height:{{boxHeight}}px" />
         </view>
     </view>
+    <view class="empty"></view>
 </view>
 <view class="bottom-btn-box">
     <toy-button

miniprogram/service/drawShape.ts

@@ -103,11 +103,24 @@ function drawParallelogram(ctx: RenderingContext, x: number, y: number, width: n
 
 // 绘制菱形
 function drawDiamond(ctx: RenderingContext, x: number, y: number, size: number, fillColor: string) {
+    // 参考SVG: <polygon points="50,15 70,50 50,85 30,50"/>
+    // 以(x, y)为中心，size为半高，按SVG比例映射四个点
+    // SVG中心(50,50)，顶点(50,15)，右(70,50)，下(50,85)，左(30,50)
+    // 计算比例
+    // 顶点: (0, -0.7*size)
+    // 右:   (0.4*size, 0)
+    // 下:   (0, 0.7*size)
+    // 左:   (-0.4*size, 0)
+    const topY = y - size * 0.7;
+    const rightX = x + size * 0.4;
+    const bottomY = y + size * 0.7;
+    const leftX = x - size * 0.4;
+
     ctx.beginPath();
-    ctx.moveTo(x, y - size);
+    ctx.moveTo(x, topY);         // 顶点
-    ctx.lineTo(x + size, y);
+    ctx.lineTo(rightX, y);       // 右
-    ctx.lineTo(x, y + size);
+    ctx.lineTo(x, bottomY);      // 下
-    ctx.lineTo(x - size, y);
+    ctx.lineTo(leftX, y);        // 左
     ctx.closePath();
     if (fillColor !== 'transparent') {
         ctx.fillStyle = fillColor;

miniprogram/service/shapeDrawService.ts

@@ -226,89 +226,69 @@ 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;
+        const leftMargin = 160;
-        // 计算内容区起始Y坐标，保证在532或622以下
+        const rightMargin = 160;
-        const contentTop = minY + 20; // 距离minY线之后20px开始绘制
+        // 以 drawLegend 画完后的分割线作为基准，内容区顶部间距 50
-        const contentHeight = canvas.height - contentTop - bottomMargin;
+        const legendBottomY = this.currentY;
+        const topGap = 60;
+        const contentTop = legendBottomY + topGap;
 
-        // 左右各留100像素边距
+        // 可用宽度
-        const contentLeft = 100;
+        const contentWidth = canvas.width - leftMargin - rightMargin;
-        const contentWidth = canvas.width - shapeSize;
 
-        // 计算一共要绘制多少个图形
+        // 每行最多能放多少个图形（考虑最小间距40）
-        const repeatCount = 8;
+        const minGap = 40;
-        const totalShapes = shapes.length * repeatCount;
+        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;
+        for (let row = 0; row < ROW_COUNT; row++) {
-
+            // 本行起始Y
-        const canvasHeight = this.canvas.height;
+            const y = contentTop + row * (shapeSize + VERTICAL_GAP) + shapeSize / 2;
-
-        for (let row = 0; row < totalRows; row++) {
-            // 本行实际要放多少个图形
-            const shapesInThisRow = Math.min(actualPerRow, totalShapes - shapeIdx);
             // 本行实际间距
-            const gap = shapesInThisRow > 1
+            const gap = maxPerRow > 1
-                ? Math.max(minGap, (contentWidth - shapesInThisRow * shapeSize) / (shapesInThisRow - 1))
+                ? Math.max(minGap, (contentWidth - maxPerRow * shapeSize) / (maxPerRow - 1))
                 : 0;
-            // 本行起始X
+            // 本行起始X（水平居中）
-            let startX = contentLeft;
+            let startX = leftMargin;
-            // 居中对齐
+            if (maxPerRow > 1) {
-            if (shapesInThisRow > 1) {
+                const rowWidth = maxPerRow * shapeSize + (maxPerRow - 1) * gap;
-                const rowWidth = shapesInThisRow * shapeSize + (shapesInThisRow - 1) * gap;
+                startX = leftMargin + (contentWidth - rowWidth) / 2;
-                startX = contentLeft + (contentWidth - rowWidth) / 2;
             } else {
-                startX = contentLeft + (contentWidth - shapeSize) / 2;
+                startX = leftMargin + (contentWidth - shapeSize) / 2;
             }
-
+            for (let col = 0; col < maxPerRow; col++) {
-            // 计算当前行的Y坐标
-            const currentRowY = startY + row * (shapeSize + minGap) + shapeSize / 2;
-
-            // 检查当前行是否会超出下边界
-            if (currentRowY + shapeSize / 2 > canvasHeight - bottomMargin) {
-                break; // 停止生成更多行
-            }
-
-            for (let col = 0; col < shapesInThisRow; 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--) {
@@ -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];
 
-            // 随机旋转角度
+            // 随机旋转角度，范围为±90度（即最大180度）
-            const rotation = (Math.random() - 0.5) * 0.5; // ±0.25弧度
+            const rotation = (Math.random() - 0.5) * Math.PI; // ±90度 = ±π/2 弧度，Math.PI为180度
 
             ctx.save();
             ctx.translate(pos.x, pos.y);