joey5628/doodle-mini
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:添加按数字涂颜色

Browse Source
This commit is contained in:
R524809
2025-12-02 11:34:08 +08:00
parent 698109e6f5
commit 425eccea21
52 changed files with 1446 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniprogram/mathPages/service/baseMathDraw.ts
+5 -6
View File
@@ -52,9 +52,6 @@ export class BaseMathDrawService {
const { ctx, canvas } = this;
const { pixelRatio: dpr } = wx.getWindowInfo();
let { width, height } = PAPER_SIZE[this.paperSize];
console.log('width', width);
console.log('height', height);
console.log('dpr', dpr);
this.canvasWidth = width;
this.canvasHeight = height;
@@ -87,8 +84,8 @@ export class BaseMathDrawService {
* 绘制Header（逻辑像素，尺寸除以3）
*/
async drawHeader() {
this.currentX = 24;
this.currentY = 24;
this.currentX = 25;
this.currentY = 25;
await drawMathHeader({
canvas: this.canvas,
ctx: this.ctx,
@@ -101,6 +98,7 @@ export class BaseMathDrawService {
this.options.subTitle || '找一找下面相同的数字，涂上颜色',
},
onHeaderDrawn: (currentY) => {
console.log('onHeaderDrawn currentY', currentY);
this.currentY = currentY;
},
});
@@ -118,6 +116,7 @@ export class BaseMathDrawService {
title: this.options.title || '看数字，涂一涂',
},
onHeaderDrawn: (currentY) => {
console.log('drawMiniHeader currentY', currentY);
this.currentY = currentY;
},
});
@@ -128,7 +127,7 @@ export class BaseMathDrawService {
*/
drawDivider() {
const { ctx, canvasWidth } = this;
const dividerY = this.currentY + 10; // 10px间距
const dividerY = this.currentY;
ctx.strokeStyle = '#000';
ctx.lineWidth = 1;
miniprogram/mathPages/service/countMatchContentDraw.ts
+293
View File
@@ -0,0 +1,293 @@
import { getImage } from '../../utils/index';
interface DrawCountMatchContentParams {
canvas: WechatMiniprogram.Canvas;
ctx: RenderingContext;
matchData: {
leftNumbers: number[];
rightNumbers: number[]; // 打乱顺序后的数字数组
};
canvasWidth: number;
startY: number;
imageType?: string; // 'twelve-animals' 或 'fruits'
}
/**
* 绘制圆角矩形（虚线边框）
*/
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 / 3, 6 / 3]); // 约2px的虚线
} else {
ctx.setLineDash([]);
}
ctx.stroke();
ctx.setLineDash([]); // 重置为实线
}
/**
* 绘制数一数连一连内容区域
* 左侧显示数字（虚线圆角框），右侧显示对应数量的图片（虚线圆角框）
* 支持根据 imageType 选择不同的图片文件夹（twelve-animals 或 fruits）
*/
export async function drawCountMatchContent({
canvas,
ctx,
matchData,
canvasWidth,
startY,
imageType = 'twelve-animals',
}: DrawCountMatchContentParams): Promise<void> {
const { leftNumbers, rightNumbers } = matchData;
// 根据图片类型确定图片目录和最大索引
const imageConfig = {
'twelve-animals': {
folder: 'twelve-animals',
maxIndex: 12,
},
fruits: {
folder: 'fruits',
maxIndex: 22,
},
};
const config =
imageConfig[imageType as keyof typeof imageConfig] ||
imageConfig['twelve-animals'];
const leftMargin = 24;
const rightMargin = 24;
const itemSpacing = 140;
const LeftBoxWidth = 120;
const rightBoxWidth = 250;
const boxHeight = 110;
const borderRadius = 12;
const imageSpacing = 5; // 图片之间的水平间距（同一行内）
const rowSpacing = 10; // 行之间的垂直间距（两行之间）
const imagesPerRow = 5; // 每行最多5张图片
const maxImages = 10; // 最多10张图片
const padding = 10; // 框内边距
const startYPos = startY + 20;
const linePointRadius = 8;
const linePointSpacing = 12;
/**
* 根据图片数量动态计算图片宽度
* @param count 图片数量
* @returns 图片宽度
*/
const getImageWidth = (count: number): number => {
if (count <= 2) {
return 90;
} else if (count <= 3) {
return 70;
} else if (count <= 4) {
return 55;
} else {
return 40;
}
};
// 计算左侧和右侧的起始X位置
const leftBoxX = leftMargin;
const rightBoxX = canvasWidth - rightMargin - rightBoxWidth;
// 绘制左侧数字框
for (let i = 0; i < leftNumbers.length; i++) {
const boxY = startYPos + i * itemSpacing;
const number = leftNumbers[i];
// 绘制虚线圆角矩形框
ctx.strokeStyle = '#999';
ctx.lineWidth = 1;
drawRoundedRect(
ctx,
leftBoxX,
boxY,
LeftBoxWidth,
boxHeight,
borderRadius,
true,
);
// 绘制数字
ctx.fillStyle = '#000';
ctx.font = `bold ${56}px "Microsoft Yahei"`;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(
String(number),
leftBoxX + LeftBoxWidth / 2,
boxY + boxHeight / 2,
);
// 绘制左侧框右侧的连线圆点（直径14，半径7）
const leftCircleX =
leftBoxX + LeftBoxWidth + linePointSpacing + linePointRadius;
const leftCircleY = boxY + boxHeight / 2;
ctx.fillStyle = '#93D333';
ctx.beginPath();
ctx.arc(leftCircleX, leftCircleY, linePointRadius, 0, Math.PI * 2);
ctx.fill();
}
// 为每个框生成唯一的图片索引，确保不同框使用不同的图片
const availableImageIndices = Array.from(
{ length: config.maxIndex },
(_, i) => i + 1,
);
const boxImageIndices: number[] = [];
for (let i = 0; i < rightNumbers.length; i++) {
const randomIndex = Math.floor(
Math.random() * availableImageIndices.length,
);
const imageIndex = availableImageIndices.splice(randomIndex, 1)[0];
boxImageIndices.push(imageIndex);
}
// 绘制右侧图片框
for (let i = 0; i < rightNumbers.length; i++) {
const boxY = startYPos + i * itemSpacing;
const number = rightNumbers[i]; // 这个数字决定了要绘制多少张图片
const boxImageIndex = boxImageIndices[i]; // 这个框使用的图片索引（所有图片都一样）
// 绘制虚线圆角矩形框
ctx.strokeStyle = '#999';
ctx.lineWidth = 1;
drawRoundedRect(
ctx,
rightBoxX,
boxY,
rightBoxWidth,
boxHeight,
borderRadius,
true,
);
// 计算要绘制的图片数量（最多10张）
const imageCount = Math.min(number, maxImages);
// 根据图片数量动态计算图片宽度
const imageWidth = getImageWidth(imageCount);
// 加载当前框使用的图片（只加载一次，用于计算高度和绘制）
let boxImage: any = null;
try {
const imagePath = `/mathPages/assets/${config.folder}/${boxImageIndex}.png`;
boxImage = await getImage(canvas, imagePath);
} catch (error) {
console.error(
`加载${config.folder}/${boxImageIndex}图片失败:`,
error,
);
}
// 计算图片高度（等比例缩放）
let imageHeight = imageWidth; // 默认高度
if (boxImage) {
// @ts-ignore - 微信小程序图片对象有 width 和 height 属性
imageHeight = (boxImage.height / boxImage.width) * imageWidth;
}
// 计算每行的图片数量
const imagesInFirstRow = Math.min(imageCount, imagesPerRow);
const imagesInSecondRow =
imageCount > imagesPerRow ? imageCount - imagesPerRow : 0;
// 计算图片的总高度（考虑行数）
const rowCount = imagesInSecondRow > 0 ? 2 : 1;
const totalImageHeight =
rowCount * imageHeight + (rowCount - 1) * rowSpacing;
// 垂直居中：框顶部 + 内边距 + (框高度 - 上下内边距 - 图片总高度) / 2
const startImageY =
boxY + padding + (boxHeight - padding * 2 - totalImageHeight) / 2;
// 计算每行的起始X位置（用于居中）
const firstRowImageCount = imagesInFirstRow;
const firstRowWidth =
firstRowImageCount * imageWidth +
(firstRowImageCount - 1) * imageSpacing;
const firstRowStartX =
rightBoxX +
padding +
(rightBoxWidth - padding * 2 - firstRowWidth) / 2;
const secondRowImageCount = imagesInSecondRow;
const secondRowWidth =
secondRowImageCount * imageWidth +
(secondRowImageCount - 1) * imageSpacing;
const secondRowStartX =
rightBoxX +
padding +
(rightBoxWidth - padding * 2 - secondRowWidth) / 2;
// 绘制图片（同一个框内使用同一张图片）
for (let imgIndex = 0; imgIndex < imageCount; imgIndex++) {
const row = Math.floor(imgIndex / imagesPerRow);
const col = imgIndex % imagesPerRow;
// 计算图片的X位置（根据行数选择不同的起始位置）
const rowStartX = row === 0 ? firstRowStartX : secondRowStartX;
const imageX = rowStartX + col * (imageWidth + imageSpacing);
// 计算图片的Y位置
const imageY = startImageY + row * (imageHeight + rowSpacing);
if (boxImage) {
// 计算图片高度（等比例缩放）
// @ts-ignore - 微信小程序图片对象有 width 和 height 属性
const scaledHeight =
(boxImage.height / boxImage.width) * imageWidth;
ctx.drawImage(
boxImage,
imageX,
imageY,
imageWidth,
scaledHeight,
);
} else {
// 如果图片加载失败，绘制一个小圆点作为备用
ctx.fillStyle = '#ccc';
ctx.beginPath();
ctx.arc(
imageX + imageWidth / 2,
imageY + imageHeight / 2,
imageWidth / 4,
0,
Math.PI * 2,
);
ctx.fill();
}
}
// 绘制右侧框左侧的连线圆点（直径14，半径7）
const rightCircleX = rightBoxX - linePointSpacing - linePointRadius; // 间距15 + 半径linePointRadius
const rightCircleY = boxY + boxHeight / 2;
ctx.fillStyle = '#93D333';
ctx.beginPath();
ctx.arc(rightCircleX, rightCircleY, linePointRadius, 0, Math.PI * 2);
ctx.fill();
}
}
miniprogram/mathPages/service/countMatchDraw.ts
+56
View File
@@ -0,0 +1,56 @@
import { BaseMathDrawService } from './baseMathDraw';
import { drawCountMatchContent } from './countMatchContentDraw';
/**
* 数一数连一连绘制服务
* 组合使用基础绘制服务和内容区域绘制服务
*/
class CountMatchDraw extends BaseMathDrawService {
matchData: {
leftNumbers: number[];
rightNumbers: number[]; // 打乱顺序后的数字数组
} | null;
constructor(
canvas: Canvas,
ctx: RenderingContext,
options?: Record<string, any>,
) {
super(canvas, ctx, options);
this.matchData = null;
}
async draw(
matchData: { leftNumbers: number[]; rightNumbers: number[] },
imageType: string = 'twelve-animals',
) {
if (!matchData || !matchData.leftNumbers || !matchData.rightNumbers) {
return;
}
this.setPrintConfig();
this.matchData = matchData;
this.clear();
this.setPaper();
// 绘制Header
if (this.headerType !== 'minimal') {
await this.drawHeader();
} else {
this.drawMiniHeader();
}
// 绘制内容区域（数一数连一连）
this.drawDivider();
await drawCountMatchContent({
canvas: this.canvas,
ctx: this.ctx,
matchData: this.matchData,
canvasWidth: this.canvasWidth,
startY: this.currentY,
imageType,
});
}
}
export default CountMatchDraw;
miniprogram/mathPages/service/mathHeaderDraw.ts
+3 -3
View File
@@ -29,7 +29,7 @@ export async function drawMathHeader({
const { appName, appHint, title, subTitle } = options;
let titleX = 108; // 约109.33
const titleY = 26; // 约26.67
const titleY = 25; // 约26.67
const logoX = 24; // 约26.67
const logoY = 20; // 20
@@ -85,7 +85,7 @@ export async function drawMathHeader({
// 调用回调函数
if (onHeaderDrawn) {
onHeaderDrawn(100);
onHeaderDrawn(110);
}
}
@@ -124,6 +124,6 @@ export function drawMathMiniHeader({
// 调用回调函数，传递除以3后的currentY
if (onHeaderDrawn) {
onHeaderDrawn(64); // 约66.67
onHeaderDrawn(66); // 约66.67
}
}
miniprogram/mathPages/service/numberColorContentDraw.ts
+476
View File
@@ -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,
);
}
}
}
miniprogram/mathPages/service/numberColorDraw.ts
+17 -38
View File
@@ -1,15 +1,14 @@
import { BaseMathDrawService } from './baseMathDraw';
import { drawNumberPreview } from './numberPreviewDraw';
import { drawNumberContent } from './numberContentDraw';
import { drawNumberWriteContent } from './numberWriteDraw';
import { drawNumberColorContent } from './numberColorContentDraw';
/**
* 数字涂色绘制服务
* 组合使用基础绘制服务、预览区域绘制服务和内容区域绘制服务
* 按数字涂颜色绘制服务
* 组合使用基础绘制服务和内容区域绘制服务
*/
class NumberColorDraw extends BaseMathDrawService {
selectedNumber: number;
functionId: string; // 功能ID，用于判断绘制类型
colorData: {
numbers: number[];
} | null;
constructor(
canvas: Canvas,
@@ -17,17 +16,19 @@ class NumberColorDraw extends BaseMathDrawService {
options?: Record<string, any>,
) {
super(canvas, ctx, options);
this.selectedNumber = 0;
this.functionId = options?.functionId || 'number-find';
this.colorData = null;
}
async draw(selectedNumber: number) {
if (selectedNumber <= 0 || selectedNumber > 10) {
async draw(
colorData: { numbers: number[] },
patternType: string = 'circle', // 'circle' 或 'caterpillar'
) {
if (!colorData || !colorData.numbers) {
return;
}
this.setPrintConfig();
this.selectedNumber = selectedNumber;
this.colorData = colorData;
this.clear();
this.setPaper();
@@ -38,38 +39,16 @@ class NumberColorDraw extends BaseMathDrawService {
this.drawMiniHeader();
}
// 绘制预览区域
// 绘制内容区域（按数字涂颜色）
this.drawDivider();
await drawNumberPreview({
await drawNumberColorContent({
canvas: this.canvas,
ctx: this.ctx,
selectedNumber: this.selectedNumber,
colorData: this.colorData,
canvasWidth: this.canvasWidth,
startY: this.currentY,
onDrawn: (currentY) => {
this.currentY = currentY;
},
patternType,
});
// 绘制内容区域（根据 functionId 选择不同的绘制方法）
this.drawDivider();
if (this.functionId === 'number-write') {
// 书写类型：绘制书写行
drawNumberWriteContent({
ctx: this.ctx,
selectedNumber: this.selectedNumber,
canvasWidth: this.canvasWidth,
startY: this.currentY,
});
} else {
// 默认类型（number-find）：绘制数字涂色内容
drawNumberContent({
ctx: this.ctx,
selectedNumber: this.selectedNumber,
canvasWidth: this.canvasWidth,
startY: this.currentY,
});
}
}
}
miniprogram/mathPages/service/numberFindDraw.ts
+76
View File
@@ -0,0 +1,76 @@
import { BaseMathDrawService } from './baseMathDraw';
import { drawNumberPreview } from './numberPreviewDraw';
import { drawNumberContent } from './numberContentDraw';
import { drawNumberWriteContent } from './numberWriteDraw';
/**
* 数字涂色绘制服务
* 组合使用基础绘制服务、预览区域绘制服务和内容区域绘制服务
*/
class NumberFindDraw extends BaseMathDrawService {
selectedNumber: number;
functionId: string; // 功能ID，用于判断绘制类型
constructor(
canvas: Canvas,
ctx: RenderingContext,
options?: Record<string, any>,
) {
super(canvas, ctx, options);
this.selectedNumber = 0;
this.functionId = options?.functionId || 'number-find';
}
async draw(selectedNumber: number) {
if (selectedNumber <= 0 || selectedNumber > 10) {
return;
}
this.setPrintConfig();
this.selectedNumber = selectedNumber;
this.clear();
this.setPaper();
// 绘制Header
if (this.headerType !== 'minimal') {
await this.drawHeader();
} else {
this.drawMiniHeader();
}
// 绘制预览区域
this.drawDivider();
await drawNumberPreview({
canvas: this.canvas,
ctx: this.ctx,
selectedNumber: this.selectedNumber,
canvasWidth: this.canvasWidth,
startY: this.currentY,
onDrawn: (currentY) => {
this.currentY = currentY;
},
});
// 绘制内容区域（根据 functionId 选择不同的绘制方法）
this.drawDivider();
if (this.functionId === 'number-write') {
// 书写类型：绘制书写行
drawNumberWriteContent({
ctx: this.ctx,
selectedNumber: this.selectedNumber,
canvasWidth: this.canvasWidth,
startY: this.currentY,
});
} else {
// 默认类型（number-find）：绘制数字涂色内容
drawNumberContent({
ctx: this.ctx,
selectedNumber: this.selectedNumber,
canvasWidth: this.canvasWidth,
startY: this.currentY,
});
}
}
}
export default NumberFindDraw;