feat: 完成图形涂色绘制

2025-08-20 10:49:20 +08:00
parent 64deb9f3be
commit c95bd601e8
12 changed files with 178 additions and 146 deletions
@@ -1,21 +1,20 @@
+import config from './config/config';
+
+const defaultPrintConfig: PrintConfig = config.printHeader as PrintConfig;
+
+
 // app.ts
 App<IAppOption>({
    globalData: {
        env: 'release',
-        printConfig: {
-            header: 'wechat',
-            appName: '涂鸦丫小程序'
-        }
+        printConfig: defaultPrintConfig
    },
    onLaunch() {
        const accountInfo = wx.getAccountInfoSync();
        const env = accountInfo.miniProgram.envVersion || 'release';
        this.globalData.env = env;
        if (env !== 'release') {
-            const printConfig = wx.getStorageSync('printConfig') || {
-                header: 'wechat',
-                appName: '涂鸦丫小程序'
-            };
+            const printConfig = wx.getStorageSync('printConfig') || defaultPrintConfig;
            this.globalData.printConfig = printConfig;
        }
    },
@@ -29,10 +28,7 @@ App<IAppOption>({
    },

    getPrintConfig(): PrintConfig {
-        return this.globalData.printConfig || {
-            header: 'wechat',
-            appName: '涂鸦丫小程序'
-        };
+        return this.globalData.printConfig || defaultPrintConfig;
    },

    setPrintConfig(config: PrintConfig) {
@@ -10,9 +10,9 @@ Component({
            type: Boolean,
            value: false,
        },
-        singleMode: {
-            type: Boolean,
-            value: false,
+        selectedShapeIndex: {
+            type: Number,
+            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
+            });
        },
    },
 });
@@ -3,9 +3,10 @@
    bind:close="onClose"
    custom-class="shape-picker-popup">
    <view class="shape-picker-container">
-        <text class="shape-picker-title"
-            >选择形状{{ singleMode ? '' : '（多选）' }}</text
-        >
+        <text class="shape-picker-title">
+            选择形状{{selectedShapeIndex}} {{ singleMode ? '（单选）' :
+            '（多选）' }}
+        </text>
        <view class="shape-options-wrapper">
            <view class="shape-options">
                <view
@@ -0,0 +1,6 @@
+export default {
+    printHeader: {
+        header: 'LogoImage',
+        appName: '涂鸦丫'
+    }
+}
@@ -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="#ff0000"/>',
+        svg: '<polygon points="15,15 85,85 20,70" stroke="#141414" stroke-width="1" fill="transparent"/>',
        fillColor: '#ff0000',
        drawFunction: 'drawTriangle',
    },
@@ -1,17 +1,15 @@
+import config from '../../config/config';
+
+const defaultPrintConfig: PrintConfig = config.printHeader as PrintConfig;
+
 Page({
    data: {
-        printConfig: {
-            header: 'wechat',
-            appName: '涂鸦丫小程序'
-        },
+        printConfig: defaultPrintConfig,
        enableDebug: false
    },

    onLoad() {
-        const printConfig = getApp().getPrintConfig() || {
-            header: 'wechat',
-            appName: '涂鸦丫小程序'
-        };
+        const printConfig = getApp().getPrintConfig() || defaultPrintConfig;
        const enableDebug = wx.getStorageSync('enableDebug') || false;
        this.setData({ printConfig, enableDebug });
    },
@@ -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"
@@ -8,7 +8,7 @@ page {
    box-sizing: border-box;

    .empty {
-        height: 190rpx;
+        height: 120rpx;
    }

    .wrapper {
@@ -14,7 +14,7 @@ Page({
    data: {
        shapeList: [] as ShapeCard[],
        showSelectShapePopup: false,
-        currentShapeId: '',
+        selectedShapeIndex: -1,
        showColorPopup: false,
        currentIndex: 0,
        currentColor: '',
@@ -94,75 +94,89 @@ 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. 新增的图形分配未被占用的颜色，且不重复

-        // 获取所有可用颜色
-        const colorList = WATER_COLORS.basic12.map(item => item.hex);
+        let newShapeList: ShapeCard[] = [];

-        // 记录已被使用的颜色（只考虑当前 shapeList 中的 fillColor）
-        const usedColors = prevShapeList.map(item => item.fillColor).filter(Boolean);
+        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
-        const newShapeList: ShapeCard[] = [];
+            // 记录已被使用的颜色（只考虑当前 shapeList 中的 fillColor）
+            const usedColors = prevShapeList.map(item => item.fillColor).filter(Boolean);

-        // 记录已分配的颜色，避免重复
-        const assignedColors = [...usedColors];
+            // 记录已分配的颜色，避免重复
+            const assignedColors = [...usedColors];

-        // 先将 shapes 转为 Map，方便查找
-        const prevShapeMap = new Map(prevShapeList.map(item => [item.id, item]));
+            // 先将 shapes 转为 Map，方便查找
+            const prevShapeMap = new Map(prevShapeList.map(item => [item.id, item]));

-        // 随机打乱剩余可用颜色
-        function shuffle(arr: string[]) {
-            for (let i = arr.length - 1; i > 0; i--) {
-                const j = Math.floor(Math.random() * (i + 1));
-                [arr[i], arr[j]] = [arr[j], arr[i]];
+            // 随机打乱剩余可用颜色
+            function shuffle(arr: string[]) {
+                for (let i = arr.length - 1; i > 0; i--) {
+                    const j = Math.floor(Math.random() * (i + 1));
+                    [arr[i], arr[j]] = [arr[j], arr[i]];
+                }
+                return arr;
            }
-            return arr;
+
+            // 计算未被占用的颜色
+            let availableColors = colorList.filter(color => !assignedColors.includes(color));
+            availableColors = shuffle(availableColors);
+
+            shapes.forEach((item: ShapeCard) => {
+                if (prevShapeMap.has(item.id)) {
+                    // 已存在，保留原有 fillColor
+                    newShapeList.push({
+                        ...item,
+                        fillColor: prevShapeMap.get(item.id)!.fillColor
+                    });
+                } else {
+                    // 新增，分配未被占用的颜色
+                    const color = availableColors.shift() || colorList[0];
+                    assignedColors.push(color);
+                    newShapeList.push({
+                        ...item,
+                        fillColor: color
+                    });
+                }
+            });
        }

-        // 计算未被占用的颜色
-        let availableColors = colorList.filter(color => !assignedColors.includes(color));
-        availableColors = shuffle(availableColors);
-
-        shapes.forEach((item: ShapeCard) => {
-            if (prevShapeMap.has(item.id)) {
-                // 已存在，保留原有 fillColor
-                newShapeList.push({
-                    ...item,
-                    fillColor: prevShapeMap.get(item.id)!.fillColor
-                });
-            } else {
-                // 新增，分配未被占用的颜色
-                const color = availableColors.shift() || colorList[0];
-                assignedColors.push(color);
-                newShapeList.push({
-                    ...item,
-                    fillColor: color
-                });
-            }
-        });
-
        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,
@@ -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
@@ -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.lineTo(x + size, y);
-    ctx.lineTo(x, y + size);
-    ctx.lineTo(x - size, y);
+    ctx.moveTo(x, topY);         // 顶点
+    ctx.lineTo(rightX, y);       // 右
+    ctx.lineTo(x, bottomY);      // 下
+    ctx.lineTo(leftX, y);        // 左
    ctx.closePath();
    if (fillColor !== 'transparent') {
        ctx.fillStyle = fillColor;
@@ -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);