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-11-20 17:35:37 +08:00
parent 2e0f8f0fe1
commit 654ea69915
11 changed files with 1061 additions and 532 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniprogram/service/wordDrawService.ts
+98 -103
View File
@@ -1,6 +1,9 @@
import { PAPER_SIZE } from '../constants/colors';
import { getMiniCodeImage, getImage } from '../utils/index';
import { CharacterItem } from '../types/characterType';
import {
drawHeader as drawHeaderCommon,
drawMiniHeader as drawMiniHeaderCommon,
} from './headerDrawService';
/**
* 仅支持 M/L/Z 的简单 SVG 路径解析与绘制
@@ -18,19 +21,21 @@ function drawSvgPathCommands({
pathD,
offsetX,
offsetY,
scale
scale,
}: DrawSvgPathCommandsParams) {
// console.log('drawSvgPathCommands 参数:', { pathD, offsetX, offsetY, scale });
// 精度处理函数：避免浮点数精度问题
const roundToPrecision = (num: number, precision: number = 2): number => {
return Math.round(num * Math.pow(10, precision)) / Math.pow(10, precision);
return (
Math.round(num * Math.pow(10, precision)) / Math.pow(10, precision)
);
};
// 新的解析方法：按命令片段解析
// 使用正则表达式匹配从字母开头到下一个字母（或结尾）的片段
const commandRegex = /([MLZ])([^MLZ]*?)(?=[MLZ]|$)/g;
const commands: Array<{ cmd: string, coords: string }> = [];
const commands: Array<{ cmd: string; coords: string }> = [];
let match;
while ((match = commandRegex.exec(pathD)) !== null) {
@@ -44,9 +49,15 @@ function drawSvgPathCommands({
let commandCount = 0;
// 优化的坐标解析和绘制函数
const parseAndDrawCoords = (coords: string, cmd: string, drawFunction: (x: number, y: number) => void) => {
const parseAndDrawCoords = (
coords: string,
cmd: string,
drawFunction: (x: number, y: number) => void,
) => {
// 更严格的坐标解析：支持负数和小数
const coordParts = coords.split(/\s+/).filter(part => part.trim() !== '');
const coordParts = coords
.split(/\s+/)
.filter((part) => part.trim() !== '');
if (coordParts.length >= 2) {
const x = parseFloat(coordParts[0]);
@@ -60,21 +71,27 @@ function drawSvgPathCommands({
// console.log(`${cmd}: 绘制到 (${finalX}, ${finalY}) [原始: (${x}, ${y})]`);
drawFunction(finalX, finalY);
} else {
console.warn(`${cmd}: 坐标解析失败 - x=${x}, y=${y}, 原始坐标: "${coords}"`);
console.warn(
`${cmd}: 坐标解析失败 - x=${x}, y=${y}, 原始坐标: "${coords}"`,
);
}
} else {
console.warn(`${cmd}: 坐标数量不足，需要2个，实际${coordParts.length}个，原始: "${coords}"`);
console.warn(
`${cmd}: 坐标数量不足，需要2个，实际${coordParts.length}个，原始: "${coords}"`,
);
}
};
// 命令处理映射表，提高可读性和可扩展性
const commandHandlers: Record<string, (coords: string) => void> = {
'M': (coords) => parseAndDrawCoords(coords, 'M', (x, y) => ctx.moveTo(x, y)),
'L': (coords) => parseAndDrawCoords(coords, 'L', (x, y) => ctx.lineTo(x, y)),
'Z': () => {
M: (coords) =>
parseAndDrawCoords(coords, 'M', (x, y) => ctx.moveTo(x, y)),
L: (coords) =>
parseAndDrawCoords(coords, 'L', (x, y) => ctx.lineTo(x, y)),
Z: () => {
// console.log('Z: 闭合路径');
// 注意：不要在这里调用 closePath()，因为 drawStrokes 中会统一处理
}
},
};
for (const { cmd, coords } of commands) {
@@ -113,7 +130,7 @@ function drawStrokes({
uptoInclusive,
fillStyle,
strokeStyle,
lineWidth
lineWidth,
}: DrawStrokesParams) {
// 模板中使用 54x54 的视窗尺寸
const viewBoxSize = 54;
@@ -152,7 +169,7 @@ function drawStrokes({
pathD: strokes[s],
offsetX: contentOffsetX,
offsetY: contentOffsetY,
scale: contentScale
scale: contentScale,
});
ctx.fillStyle = fillStyle;
ctx.strokeStyle = strokeStyle;
@@ -178,7 +195,7 @@ function drawTianZiGrid({
y,
size,
lineColor = '#e0e0e0',
boldColor = '#cccccc'
boldColor = '#cccccc',
}: DrawTianZiGridParams) {
// 外框
ctx.strokeStyle = boldColor;
@@ -289,83 +306,53 @@ class WordDrawService {
// 清空页眉以下的所有内容
ctx.fillStyle = '#fff';
ctx.fillRect(0, contentStartY, canvas.width, canvas.height - contentStartY);
ctx.fillRect(
0,
contentStartY,
canvas.width,
canvas.height - contentStartY,
);
}
async drawHeader() {
const { canvas, ctx } = this;
const { appName, appHint, title, subTitle } = this.options;
this.currentX = 80;
this.currentY = 80;
let titleX = this.currentX + 200 + 48;
const titleY = 80;
const logoX = 80;
const logoY = 60;
const logoWidth = 200;
const logoHeight = 200;
switch (this.headerType) {
case 'LogoImage': {
const image = await getImage(canvas, '/assets/imgs/doodle-logo.png');
ctx.drawImage(image, logoX, logoY, logoWidth, logoHeight);
break;
}
case 'noLogoImage': {
titleX = 120;
break;
}
case 'minimal': {
titleX = 120;
break;
}
default: {
const image = await getMiniCodeImage(canvas);
ctx.drawImage(image, logoX, logoY, logoWidth, logoHeight);
break;
}
}
ctx.font = 'bold 64px "Microsoft Yahei"';
ctx.fillStyle = '#000';
ctx.textAlign = 'left';
ctx.textBaseline = 'top';
ctx.fillText(appName, titleX, titleY);
ctx.font = '48px "Microsoft Yahei"';
ctx.fillStyle = '#666';
ctx.fillText(appHint, titleX, 186);
ctx.font = 'bold 64px "Microsoft Yahei"';
ctx.fillStyle = '#000';
ctx.fillText(title, 1015, titleY);
ctx.font = '48px "Microsoft Yahei"';
ctx.fillStyle = '#666';
ctx.fillText(subTitle, 1015, 186);
// 计算页眉的实际高度，包括分割线
const headerHeight = Math.max(titleY + 64 + 48 + 48) + 0; // 64px字体 + 48px间距 + 48px字体 + 20px边距
// this.currentY = headerHeight;
this.currentY += headerHeight;
this.drawDivider(this.currentY);
await drawHeaderCommon({
canvas: this.canvas,
ctx: this.ctx,
headerType: this.headerType,
options: {
appName: this.options.appName || '涂鸦丫小程序',
appHint: this.options.appHint || '识字|识图|练字|打印',
title: this.options.title || '田字格 练 字 贴',
subTitle: this.options.subTitle || '按笔画临摹练习',
},
onHeaderDrawn: () => {
// wordDrawService 使用不同的计算方式
const titleY = 80;
const headerHeight = Math.max(titleY + 64 + 48 + 48) + 0; // 64px字体 + 48px间距 + 48px字体 + 20px边距
this.currentY = 80 + headerHeight;
this.drawDivider(this.currentY);
},
});
}
drawMiniHeader() {
const { canvas, ctx } = this;
const { appName, title } = this.options;
const titleY = 120;
ctx.font = 'bold 64px "Microsoft Yahei"';
ctx.fillStyle = '#000';
ctx.textAlign = 'center';
ctx.fillText(appName + ' ' + title, canvas.width / 2, titleY);
// 计算迷你页眉的实际高度
const miniHeaderHeight = titleY + 64 + 20; // 64px字体 + 20px边距
this.currentY = miniHeaderHeight;
this.drawDivider(this.currentY);
drawMiniHeaderCommon({
canvas: this.canvas,
ctx: this.ctx,
options: {
appName: this.options.appName || '涂鸦丫小程序',
title: this.options.title || '田字格 练 字 贴',
},
onHeaderDrawn: () => {
// wordDrawService 使用不同的计算方式
const titleY = 120;
const miniHeaderHeight = titleY + 64 + 20; // 64px字体 + 20px边距
this.currentY = miniHeaderHeight;
this.drawDivider(this.currentY);
},
});
}
/**
@@ -373,10 +360,10 @@ class WordDrawService {
*/
/**
* 绘制正文内容：包括田字格的排布和内容
*
*
* minGap 作用解释：
* minGap（最小列间距）用于田字格水平方向（每一行格子之间的间距）的初始最小值。它保证多个田字格在一行内不会紧贴排布、而是有一个最小的间隔，整体看起来不会拥挤。后续还会结合画布实际剩余空间动态调整为更合适的实际间距 actualColGap。
*
*
* rowGap 作用解释：
* rowGap（行间距）用于田字格竖直方向（每一行田字格之间的间隔）的初始最小值。它防止行与行的田字格上下贴得太紧，增加一定的可视呼吸空间。之后同样会结合剩余空间动态调整为实际间距 actualRowGap。
*/
@@ -397,8 +384,10 @@ class WordDrawService {
const { maxRow, maxCol } = this.getMaxGridLayout();
// 动态调整间距以充分利用空间（在允许的最小间距基础上弹性扩展以适配画布）
const actualRowGap = maxRow > 1 ? (contentHeight - maxRow * cellSize) / (maxRow - 1) : 0;
const actualColGap = maxCol > 1 ? (contentWidth - maxCol * cellSize) / (maxCol - 1) : 0;
const actualRowGap =
maxRow > 1 ? (contentHeight - maxRow * cellSize) / (maxRow - 1) : 0;
const actualColGap =
maxCol > 1 ? (contentWidth - maxCol * cellSize) / (maxCol - 1) : 0;
// console.log(`布局信息: 行数=${rowNumber}, 列数=${columnNumber}, 行间距=${actualRowGap.toFixed(1)}, 列间距=${actualColGap.toFixed(1)}`);
@@ -411,7 +400,7 @@ class WordDrawService {
colGap: actualColGap,
rowGap: actualRowGap,
maxRow,
maxCol
maxCol,
});
if (characterData && characterData.length > 0) {
@@ -425,9 +414,9 @@ class WordDrawService {
colGap: actualColGap,
rowGap: actualRowGap,
maxCol,
maxRow
maxRow,
});
};
}
}
/**
@@ -449,8 +438,14 @@ class WordDrawService {
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)));
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 };
}
@@ -466,7 +461,7 @@ class WordDrawService {
colGap,
rowGap,
maxRow,
maxCol
maxCol,
}: {
ctx: RenderingContext;
startX: number;
@@ -474,8 +469,8 @@ class WordDrawService {
cellSize: number;
colGap: number;
rowGap: number;
maxRow: number; // 行数
maxCol: number; // 列数
maxRow: number; // 行数
maxCol: number; // 列数
}) {
for (let row = 0; row < maxRow; row++) {
for (let col = 0; col < maxCol; col++) {
@@ -498,7 +493,7 @@ class WordDrawService {
colGap,
rowGap,
maxCol,
maxRow
maxRow,
}: {
ctx: RenderingContext;
characterData: CharacterItem[];
@@ -574,7 +569,7 @@ class WordDrawService {
cellSize,
colGap,
rowGap,
rowIndex
rowIndex,
}: {
ctx: RenderingContext;
strokes: string[];
@@ -599,9 +594,9 @@ class WordDrawService {
offsetY: y,
size: cellSize,
uptoInclusive: strokes.length - 1,
fillStyle: 'rgb(0,0,0)', // 黑色填充
strokeStyle: 'rgb(0,0,0)', // 黑色描边
lineWidth: 4, // 较粗的线条
fillStyle: 'rgb(0,0,0)', // 黑色填充
strokeStyle: 'rgb(0,0,0)', // 黑色描边
lineWidth: 4, // 较粗的线条
});
}
@@ -618,7 +613,7 @@ class WordDrawService {
colGap,
rowGap,
rowIndex,
columnIndex
columnIndex,
}: {
ctx: RenderingContext;
strokes: string[];
@@ -646,7 +641,7 @@ class WordDrawService {
uptoInclusive: strokeIndex,
fillStyle: '#ccc',
strokeStyle: '#ccc',
lineWidth: 3, // 中等粗细
lineWidth: 3, // 中等粗细
});
}