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-10-30 18:21:38 +08:00
parent c4f27f2125
commit 2e0f8f0fe1
19 changed files with 450 additions and 564 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniprogram/service/wordDrawService.ts
+91 -98
View File
@@ -231,7 +231,7 @@ class WordDrawService {
this.options = {
appName: '涂鸦丫小程序',
appHint: '识字|识图|练字|打印',
title: '田字格 练 字 贴',
title: '田字格 练 字 贴',
subTitle: '按笔画临摹练习',
...options,
};
@@ -260,6 +260,7 @@ class WordDrawService {
} else {
await this.drawMiniHeader();
}
this.drawContentEmpty();
}
async drawContentEmpty() {
@@ -345,10 +346,10 @@ class WordDrawService {
ctx.fillText(subTitle, 1015, 186);
// 计算页眉的实际高度，包括分割线
const headerHeight = Math.max(logoY + logoHeight, titleY + 64 + 48 + 48) + 20; // 64px字体 + 48px间距 + 48px字体 + 20px边距
const headerHeight = Math.max(titleY + 64 + 48 + 48) + 0; // 64px字体 + 48px间距 + 48px字体 + 20px边距
// this.currentY = headerHeight;
this.currentY += headerHeight;
this.drawLine(this.currentY);
this.drawDivider(this.currentY);
}
drawMiniHeader() {
@@ -364,7 +365,7 @@ class WordDrawService {
// 计算迷你页眉的实际高度
const miniHeaderHeight = titleY + 64 + 20; // 64px字体 + 20px边距
this.currentY = miniHeaderHeight;
this.drawLine(this.currentY);
this.drawDivider(this.currentY);
}
/**
@@ -392,23 +393,14 @@ class WordDrawService {
const contentHeight = canvas.height - contentTop - bottomMargin;
const cellSize = 140;
const minGap = 24; // 最小格子列间距，用于保证横向不拥挤，后续可动态调整为实际间距
const rowGap = 36; // 最小格子行间距，用于保证纵向不拥挤，后续可动态调整为实际间距
// 计算每行可容纳的田字格数量
const columnNumber = Math.max(1, Math.floor((contentWidth + minGap) / (cellSize + minGap)));
// 计算每列可容纳的田字格数量
const rowNumber = Math.max(1, Math.floor((contentHeight + rowGap) / (cellSize + rowGap)));
// 计算总需要的田字格数量
const totalCellsNeeded = rowNumber * columnNumber;
// 统一通过 getMaxGridLayout 获取最大行列数
const { maxRow, maxCol } = this.getMaxGridLayout();
// 动态调整间距以充分利用空间（在允许的最小间距基础上弹性扩展以适配画布）
const actualRowGap = rowNumber > 1 ? (contentHeight - rowNumber * cellSize) / (rowNumber - 1) : 0;
const actualColGap = columnNumber > 1 ? (contentWidth - columnNumber * cellSize) / (columnNumber - 1) : 0;
const actualRowGap = maxRow > 1 ? (contentHeight - maxRow * cellSize) / (maxRow - 1) : 0;
const actualColGap = maxCol > 1 ? (contentWidth - maxCol * cellSize) / (maxCol - 1) : 0;
console.log(`布局信息: 总格数=${totalCellsNeeded}, 行数=${rowNumber}, 列数=${columnNumber}, 行间距=${actualRowGap.toFixed(1)}, 列间距=${actualColGap.toFixed(1)}`);
// console.log(`布局信息: 行数=${rowNumber}, 列数=${columnNumber}, 行间距=${actualRowGap.toFixed(1)}, 列间距=${actualColGap.toFixed(1)}`);
// 第一阶段：绘制所有空田字格
this.drawEmptyGrids({
@@ -418,8 +410,8 @@ class WordDrawService {
cellSize,
colGap: actualColGap,
rowGap: actualRowGap,
rowNumber,
columnNumber
maxRow,
maxCol
});
if (characterData && characterData.length > 0) {
@@ -432,26 +424,36 @@ class WordDrawService {
cellSize,
colGap: actualColGap,
rowGap: actualRowGap,
columnNumber
maxCol,
maxRow
});
};
}
/**
* 计算总需要的田字格数量
* 获取当前页面可绘制田字格的最大行数与列数（与绘制使用同一套计算规则）
*/
// calculateTotalCellsNeeded(characters: string[], wordsMap: Record<string, string[]>): number {
// let totalCells = 0;
// characters.forEach((char) => {
// const strokes = wordsMap[char] || [];
// const strokeCount = strokes.length;
// const preview = 1; // 预览格
// const practice = Math.min(strokeCount, 8); // 最多8个练习格
// const blanks = 2; // 空白格
// totalCells += preview + practice + blanks;
// });
// return totalCells;
// }
getMaxGridLayout(): { maxRow: number; maxCol: number } {
const { canvas } = this;
// 布局参数需与 drawContent 保持一致
const topGap = 50;
const leftMargin = 120;
const rightMargin = 120;
const bottomMargin = 120;
const contentTop = this.currentY + topGap;
const contentWidth = canvas.width - leftMargin - rightMargin;
const contentHeight = canvas.height - contentTop - bottomMargin;
const cellSize = 140;
const minGap = 24;
const rowGap = 36;
const maxCol = Math.max(1, Math.floor((contentWidth + minGap) / (cellSize + minGap)));
const maxRow = Math.max(1, Math.floor((contentHeight + rowGap) / (cellSize + rowGap)));
return { maxRow, maxCol };
}
/**
* 绘制空田字格网格
@@ -463,8 +465,8 @@ class WordDrawService {
cellSize,
colGap,
rowGap,
rowNumber,
columnNumber
maxRow,
maxCol
}: {
ctx: RenderingContext;
startX: number;
@@ -472,12 +474,11 @@ class WordDrawService {
cellSize: number;
colGap: number;
rowGap: number;
rowNumber: number; // 行数
columnNumber: number; // 列数
maxRow: number; // 行数
maxCol: number; // 列数
}) {
console.log('drawEmptyGrids startY----:', startY)
for (let row = 0; row < rowNumber; row++) {
for (let col = 0; col < columnNumber; col++) {
for (let row = 0; row < maxRow; row++) {
for (let col = 0; col < maxCol; col++) {
const x = startX + col * (cellSize + colGap) + cellSize / 2;
const y = startY + row * (cellSize + rowGap) + cellSize / 2;
drawTianZiGrid({ ctx, x, y, size: cellSize });
@@ -496,7 +497,8 @@ class WordDrawService {
cellSize,
colGap,
rowGap,
columnNumber
maxCol,
maxRow
}: {
ctx: RenderingContext;
characterData: CharacterItem[];
@@ -505,69 +507,60 @@ class WordDrawService {
cellSize: number;
colGap: number;
rowGap: number;
columnNumber: number;
maxCol: number;
maxRow: number;
}) {
const reservedCells = 2;
let rowIndex = 0, columnIndex = 0;
let rowIndex = 0;
// console.log('开始绘制练字内容，汉字数量:', characters.length);
characterData.forEach((item, index) => {
const character = item.character;
for (let i = 0; i < characterData.length; i++) {
const item = characterData[i];
const strokes = item.strokes;
const strokeCount = strokes.length;
console.log(`绘制第 ${index + 1} 个汉字 "${character}"，笔画数: ${strokeCount}`);
const totalCells = 1 + strokeCount; // 预览 + 练习
const totalRows = Math.ceil(totalCells / maxCol);
// 1. 预览格：显示完整汉字（黑色）
this.drawPreviewCell({
ctx,
strokes,
startX,
startY,
cellSize,
colGap,
rowGap,
rowIndex,
});
columnIndex++;
if (rowIndex + totalRows > maxRow) {
break; // 放不下，停止绘制
}
// 2. 练习格：逐笔画显示（红色）
for (let strokeIndex = 0; strokeIndex < strokeCount; strokeIndex++) {
// 先绘制当前笔画
this.drawPracticeCell({
ctx,
strokes,
strokeIndex,
startX,
startY,
cellSize,
colGap,
rowGap,
rowIndex,
columnIndex
});
columnIndex++;
if (columnIndex >= columnNumber) {
columnIndex = 0;
rowIndex++;
for (let cellIdx = 0; cellIdx < totalCells; cellIdx++) {
const localRowOffset = Math.floor(cellIdx / maxCol);
const localColIndex = cellIdx % maxCol;
const globalRow = rowIndex + localRowOffset;
if (globalRow >= maxRow) {
break;
}
if (cellIdx === 0) {
this.drawPreviewCell({
ctx,
strokes,
startX,
startY,
cellSize,
colGap,
rowGap,
rowIndex: globalRow,
});
} else {
const strokeIndex = cellIdx - 1;
this.drawPracticeCell({
ctx,
strokes,
strokeIndex,
startX,
startY,
cellSize,
colGap,
rowGap,
rowIndex: globalRow,
columnIndex: localColIndex,
});
}
// console.log(`笔画 ${strokeIndex + 1} 绘制完成，当前 columnIndex: ${columnIndex}`);
}
if (columnIndex + reservedCells > columnNumber) {
columnIndex = 0;
rowIndex++;
}
// 4. 强制下一个汉字换行到新行的第一个田字格
if (index < characterData.length - 1) { // 不是最后一个汉字
rowIndex = rowIndex + 1;
columnIndex = 0;
// console.log(`汉字 "${char}" 绘制完成，强制换行到新行，下一个汉字从 rowIndex: ${rowIndex}, columnIndex: ${columnIndex} 开始`);
}
});
// console.log('所有汉字绘制完成');
rowIndex = rowIndex + totalRows;
}
}
/**
@@ -651,13 +644,13 @@ class WordDrawService {
offsetY: y,
size: cellSize,
uptoInclusive: strokeIndex,
fillStyle: 'rgb(220, 20, 20)', // 深红色填充
strokeStyle: 'rgb(220, 20, 20)', // 深红色描边
fillStyle: '#ccc',
strokeStyle: '#ccc',
lineWidth: 3, // 中等粗细
});
}
drawLine(linY: number) {
drawDivider(linY: number) {
const { canvas, ctx } = this;
ctx.strokeStyle = '#000';
ctx.lineWidth = 2;