feat:添加按数字涂颜色

2025-12-02 11:34:08 +08:00
parent 698109e6f5
commit 425eccea21
52 changed files with 1446 additions and 65 deletions
@@ -0,0 +1,476 @@
+/**
+ * 数字颜色映射（使用基础12色）
+ * 由于只有10个数字，使用全部12种颜色中的11种（跳过黑色，因为黑色不适合作为数字颜色）
+ */
+const NUMBER_COLORS: Record<number, string> = {
+    1: '#ED6D50', // 柔和红色
+    2: '#F9A857', // 柔和橙色
+    3: '#FFE176', // 柔和黄色
+    4: '#B2D94B', // 柔和黄绿色
+    5: '#53D1B6', // 柔和绿色
+    6: '#6CD2EA', // 柔和青色
+    7: '#79A7ED', // 柔和蓝色
+    8: '#9C98DE', // 柔和紫色
+    9: '#F2A4C0', // 柔和粉色
+    10: '#FC9B6C', // 柔和橙红色
+    11: '#BC8F71', // 柔和棕色
+    12: '#666666', // 柔和黑灰
+};
+
+interface DrawNumberColorContentParams {
+    canvas: WechatMiniprogram.Canvas;
+    ctx: RenderingContext;
+    colorData: {
+        numbers: number[];
+    };
+    canvasWidth: number;
+    startY: number;
+    patternType?: string; // 'circle' 或 'caterpillar'
+}
+
+/**
+ * 绘制圆角矩形（虚线边框）
+ */
+function drawRoundedRect(
+    ctx: RenderingContext,
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+    radius: number,
+    isDashed: boolean = true,
+) {
+    ctx.beginPath();
+    ctx.moveTo(x + radius, y);
+    ctx.lineTo(x + width - radius, y);
+    ctx.quadraticCurveTo(x + width, y, x + width, y + radius);
+    ctx.lineTo(x + width, y + height - radius);
+    ctx.quadraticCurveTo(x + width, y + height, x + width - radius, y + height);
+    ctx.lineTo(x + radius, y + height);
+    ctx.quadraticCurveTo(x, y + height, x, y + height - radius);
+    ctx.lineTo(x, y + radius);
+    ctx.quadraticCurveTo(x, y, x + radius, y);
+    ctx.closePath();
+
+    if (isDashed) {
+        ctx.setLineDash([6, 6]); // 虚线
+    } else {
+        ctx.setLineDash([]);
+    }
+    ctx.stroke();
+    ctx.setLineDash([]); // 重置为实线
+}
+
+/**
+ * 绘制毛毛虫头部
+ */
+function drawCaterpillarHead(
+    ctx: RenderingContext,
+    x: number,
+    y: number,
+    size: number,
+    color: string,
+) {
+    const headRadius = 18; // 固定头部半径
+    const headCenterX = x + headRadius;
+    const headCenterY = y + size / 2;
+
+    // 绘制头部（圆形）
+    ctx.fillStyle = color;
+    ctx.beginPath();
+    ctx.arc(headCenterX, headCenterY, headRadius, 0, Math.PI * 2);
+    ctx.fill();
+
+    // 绘制头部圆圈实线边框
+    ctx.strokeStyle = '#000';
+    ctx.lineWidth = 1;
+    ctx.setLineDash([]); // 确保是实线
+    ctx.beginPath();
+    ctx.arc(headCenterX, headCenterY, headRadius, 0, Math.PI * 2);
+    ctx.stroke();
+
+    // 绘制触角（在头部圆圈的正上方，带弧度的弯曲）
+    const antennaLength = headRadius * 0.6;
+    const antennaStartY = headCenterY - headRadius; // 头部圆圈的正上方
+    const antennaOffset = headRadius * 0.3; // 触角左右偏移距离
+
+    // 左侧触角：从顶部左侧开始，先向上，然后向左弯曲（带弧度）
+    const leftAntennaStartX = headCenterX - antennaOffset;
+    const leftAntennaStartY = antennaStartY;
+    const leftAntennaMidY = leftAntennaStartY - antennaLength * 0.5; // 向上延伸的中点
+    const leftAntennaEndX = leftAntennaStartX - antennaLength * 0.4; // 向左弯曲
+    const leftAntennaEndY = leftAntennaMidY - antennaLength * 0.3; // 向上并向左
+
+    // 右侧触角：从顶部右侧开始，先向上，然后向右弯曲（带弧度）
+    const rightAntennaStartX = headCenterX + antennaOffset;
+    const rightAntennaStartY = antennaStartY;
+    const rightAntennaMidY = rightAntennaStartY - antennaLength * 0.5; // 向上延伸的中点
+    const rightAntennaEndX = rightAntennaStartX + antennaLength * 0.4; // 向右弯曲
+    const rightAntennaEndY = rightAntennaMidY - antennaLength * 0.3; // 向上并向右
+
+    ctx.strokeStyle = '#000';
+    ctx.lineWidth = 1.5;
+    ctx.lineCap = 'round'; // 圆角端点
+
+    // 绘制左侧触角（使用二次贝塞尔曲线实现平滑弧度）
+    ctx.beginPath();
+    ctx.moveTo(leftAntennaStartX, leftAntennaStartY);
+    // 使用二次贝塞尔曲线：起点、控制点、终点
+    // 控制点在中间位置，使曲线平滑向左弯曲
+    const leftControlX = leftAntennaStartX - antennaLength * 0.2;
+    const leftControlY = leftAntennaMidY;
+    ctx.quadraticCurveTo(
+        leftControlX,
+        leftControlY,
+        leftAntennaEndX,
+        leftAntennaEndY,
+    );
+    ctx.stroke();
+
+    // 绘制右侧触角（使用二次贝塞尔曲线实现平滑弧度）
+    ctx.beginPath();
+    ctx.moveTo(rightAntennaStartX, rightAntennaStartY);
+    // 使用二次贝塞尔曲线：起点、控制点、终点
+    // 控制点在中间位置，使曲线平滑向右弯曲
+    const rightControlX = rightAntennaStartX + antennaLength * 0.2;
+    const rightControlY = rightAntennaMidY;
+    ctx.quadraticCurveTo(
+        rightControlX,
+        rightControlY,
+        rightAntennaEndX,
+        rightAntennaEndY,
+    );
+    ctx.stroke();
+
+    // 绘制触角末端的小圆点
+    ctx.fillStyle = '#000';
+    ctx.beginPath();
+    ctx.arc(leftAntennaEndX, leftAntennaEndY, 2, 0, Math.PI * 2);
+    ctx.fill();
+    ctx.beginPath();
+    ctx.arc(rightAntennaEndX, rightAntennaEndY, 2, 0, Math.PI * 2);
+    ctx.fill();
+
+    // 绘制眼睛
+    const eyeSize = headRadius * 0.15;
+    const eyeOffsetX = headRadius * 0.25;
+    const eyeOffsetY = headRadius * 0.22;
+    ctx.fillStyle = '#fff';
+    ctx.beginPath();
+    ctx.arc(
+        headCenterX - eyeOffsetX - 2,
+        headCenterY - eyeOffsetY,
+        eyeSize,
+        0,
+        Math.PI * 2,
+    );
+    ctx.fill();
+    ctx.beginPath();
+    ctx.arc(
+        headCenterX + eyeOffsetX - 2,
+        headCenterY - eyeOffsetY,
+        eyeSize,
+        0,
+        Math.PI * 2,
+    );
+    ctx.fill();
+
+    // 绘制眼珠
+    ctx.fillStyle = '#000';
+    ctx.beginPath();
+    ctx.arc(
+        headCenterX - eyeOffsetX - 2,
+        headCenterY - eyeOffsetY,
+        eyeSize * 0.6,
+        0,
+        Math.PI * 2,
+    );
+    ctx.fill();
+    ctx.beginPath();
+    ctx.arc(
+        headCenterX + eyeOffsetX - 2,
+        headCenterY - eyeOffsetY,
+        eyeSize * 0.6,
+        0,
+        Math.PI * 2,
+    );
+    ctx.fill();
+
+    // 绘制嘴巴（微笑）
+    ctx.strokeStyle = '#000';
+    ctx.lineWidth = 1.5;
+    ctx.beginPath();
+    ctx.arc(
+        headCenterX - 2,
+        headCenterY + headRadius * 0.22,
+        headRadius * 0.3,
+        0,
+        Math.PI,
+    );
+    ctx.stroke();
+}
+
+/**
+ * 绘制毛毛虫身体（带弧度的圆圈）
+ */
+function drawCaterpillarBody(
+    ctx: RenderingContext,
+    startX: number,
+    startY: number,
+    count: number,
+    bodyRadius: number,
+    color: string,
+) {
+    const spacing = bodyRadius * 2; // 身体圆圈之间的间距（稍微重叠）
+    const waveAmplitude = bodyRadius * 0.4; // 波浪幅度
+
+    for (let i = 0; i < count; i++) {
+        // 计算每个身体圆圈的位置（带弧度，形成弯曲效果）
+        const baseX = startX + i * spacing;
+        // 使用正弦函数创建波浪效果，使身体有弧度
+        const waveOffset = Math.sin((i * Math.PI) / 2.5) * waveAmplitude;
+        const bodyX = baseX;
+        const bodyY = startY + waveOffset;
+
+        // 绘制身体圆圈
+        ctx.fillStyle = color;
+        ctx.beginPath();
+        ctx.arc(bodyX, bodyY, bodyRadius, 0, Math.PI * 2);
+        ctx.fill();
+
+        // 绘制边框（可选，根据设计需求）
+        ctx.strokeStyle = '#000';
+        ctx.lineWidth = 1;
+        ctx.stroke();
+    }
+}
+
+/**
+ * 绘制圆圈模式的内容
+ */
+function drawCirclePattern(
+    ctx: RenderingContext,
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+    number: number,
+    numberColor: string,
+    isFirstRow: boolean,
+) {
+    const totalCircles = 10;
+    const circleRadius = 16; // 固定半径
+    const circleSpacing = 6; // 固定间距
+
+    // 计算所有圆圈的总宽度
+    const totalWidth =
+        totalCircles * circleRadius * 2 + (totalCircles - 1) * circleSpacing;
+
+    // 计算水平居中位置
+    const startX = x + (width - totalWidth) / 2 + circleRadius;
+
+    // 计算垂直居中位置
+    const centerY = y + height / 2;
+
+    // 绘制10个虚线圆圈（一行）
+    for (let i = 0; i < totalCircles; i++) {
+        const circleX = startX + i * (circleRadius * 2 + circleSpacing);
+
+        // 绘制虚线圆圈
+        ctx.strokeStyle = numberColor;
+        ctx.lineWidth = 1;
+        ctx.setLineDash([3, 3]);
+        ctx.beginPath();
+        ctx.arc(circleX, centerY, circleRadius, 0, Math.PI * 2);
+        ctx.stroke();
+        ctx.setLineDash([]);
+
+        // 第一行：根据数字数量涂色
+        if (isFirstRow && i < number) {
+            ctx.fillStyle = numberColor;
+            ctx.beginPath();
+            ctx.arc(circleX, centerY, circleRadius - 1, 0, Math.PI * 2);
+            ctx.fill();
+        }
+    }
+}
+
+/**
+ * 绘制毛毛虫模式的内容
+ */
+function drawCaterpillarPattern(
+    ctx: RenderingContext,
+    x: number,
+    y: number,
+    width: number,
+    height: number,
+    number: number,
+    numberColor: string,
+    isFirstRow: boolean,
+) {
+    const padding = 15;
+    const headSize = 45; // 头部区域高度（用于垂直居中）
+    const headRadius = 18; // 固定头部半径
+    const bodyRadius = 16; // 固定身体半径
+
+    if (isFirstRow) {
+        // 第一行：绘制完整的毛毛虫（头部+身体）
+        const headX = x + padding;
+        const headY = y + (height - headSize) / 2;
+
+        // 绘制头部
+        drawCaterpillarHead(ctx, headX, headY, headSize, numberColor);
+
+        // 计算头部的实际宽度（头部半径 * 2）
+        const headWidth = headRadius * 2; // 头部的实际宽度 = 36
+
+        // 绘制身体（从头部右侧边缘开始，留一点间距）
+        const bodyStartX = headX + headWidth + 17; // 头部右边缘 + 5px间距
+        const bodyStartY = headY + headSize / 2; // 与头部中心Y对齐
+        drawCaterpillarBody(
+            ctx,
+            bodyStartX,
+            bodyStartY,
+            number,
+            bodyRadius,
+            numberColor,
+        );
+    } else {
+        // 其他行：只绘制头部
+        const headX = x + padding;
+        const headY = y + (height - headSize) / 2;
+        drawCaterpillarHead(ctx, headX, headY, headSize, numberColor);
+    }
+}
+
+/**
+ * 绘制按数字涂颜色内容区域
+ */
+export async function drawNumberColorContent({
+    canvas,
+    ctx,
+    colorData,
+    canvasWidth,
+    startY,
+    patternType = 'circle',
+}: DrawNumberColorContentParams): Promise<void> {
+    const { numbers } = colorData;
+
+    const leftMargin = 24;
+    const rightMargin = 24;
+    const itemSpacing = 115; // 行间距
+    const leftBoxWidth = 100;
+    const rightBoxWidth = 420;
+    const boxHeight = 80;
+    const borderRadius = 12;
+    const startYPos = startY + 20;
+
+    // 获取所有可用颜色值
+    const availableColors = Object.values(NUMBER_COLORS);
+
+    // 为每一行随机分配颜色，确保不重复
+    const shuffledColors = [...availableColors];
+    // Fisher-Yates 洗牌算法
+    for (let i = shuffledColors.length - 1; i > 0; i--) {
+        const j = Math.floor(Math.random() * (i + 1));
+        [shuffledColors[i], shuffledColors[j]] = [
+            shuffledColors[j],
+            shuffledColors[i],
+        ];
+    }
+
+    // 为每一行分配颜色（确保不重复）
+    // 如果行数超过颜色数量，从剩余颜色中随机选择，但确保相邻行不同
+    const rowColors: string[] = [];
+
+    for (let i = 0; i < numbers.length; i++) {
+        if (i < shuffledColors.length) {
+            // 前 N 行（N <= 颜色数量）使用不同的颜色
+            rowColors.push(shuffledColors[i]);
+        } else {
+            // 如果行数超过颜色数量，从剩余颜色中选择（确保与上一行不同）
+            const remainingColors = shuffledColors.filter(
+                (color) => color !== rowColors[i - 1],
+            );
+            const randomColor =
+                remainingColors[
+                    Math.floor(Math.random() * remainingColors.length)
+                ];
+            rowColors.push(randomColor);
+        }
+    }
+
+    // 计算左侧和右侧的起始X位置
+    const leftBoxX = leftMargin;
+    const rightBoxX = canvasWidth - rightMargin - rightBoxWidth;
+
+    // 绘制每一行
+    for (let i = 0; i < numbers.length; i++) {
+        const boxY = startYPos + i * itemSpacing;
+        const number = numbers[i];
+        const numberColor = rowColors[i]; // 使用随机分配的颜色
+        const isFirstRow = i === 0;
+
+        // 绘制左侧数字框（虚线）
+        ctx.strokeStyle = '#999';
+        ctx.lineWidth = 1;
+        drawRoundedRect(
+            ctx,
+            leftBoxX,
+            boxY,
+            leftBoxWidth,
+            boxHeight,
+            borderRadius,
+            true,
+        );
+
+        // 绘制数字（带颜色）
+        ctx.fillStyle = numberColor;
+        ctx.font = `bold ${56}px "Microsoft Yahei"`;
+        ctx.textAlign = 'center';
+        ctx.textBaseline = 'middle';
+        ctx.fillText(
+            String(number),
+            leftBoxX + leftBoxWidth / 2,
+            boxY + boxHeight / 2,
+        );
+
+        // 绘制右侧内容框（虚线）
+        ctx.strokeStyle = '#999';
+        ctx.lineWidth = 1;
+        drawRoundedRect(
+            ctx,
+            rightBoxX,
+            boxY,
+            rightBoxWidth,
+            boxHeight,
+            borderRadius,
+            true,
+        );
+
+        // 根据模式绘制右侧内容
+        if (patternType === 'circle') {
+            drawCirclePattern(
+                ctx,
+                rightBoxX,
+                boxY,
+                rightBoxWidth,
+                boxHeight,
+                number,
+                numberColor,
+                isFirstRow,
+            );
+        } else if (patternType === 'caterpillar') {
+            drawCaterpillarPattern(
+                ctx,
+                rightBoxX,
+                boxY,
+                rightBoxWidth,
+                boxHeight,
+                number,
+                numberColor,
+                isFirstRow,
+            );
+        }
+    }
+}