feat: 涂色识字完善、找字涂色完成
This commit is contained in:
R524809
@@ -0,0 +1,223 @@
|
||||
/**
|
||||
* 找字涂色服务
|
||||
* 根据模板类型绘制到Canvas
|
||||
*
|
||||
* 支持的模板类型：
|
||||
* - grid：网格模板
|
||||
* - find：找字模板
|
||||
*
|
||||
* 支持的绘制服务：
|
||||
* - TextDrawService：文字涂色服务
|
||||
* - FindWordDrawService：找字涂色服务
|
||||
*/
|
||||
import { BaseDrawService } from '../../../core/draw/baseDraw';
|
||||
import { POSITION_TEMPLATES } from './findWordTemplate';
|
||||
|
||||
// ==================== Debug 开关 ====================
|
||||
// 设置为 true 时，其他文字会显示坐标系的索引值（第几个位置），方便手动调整坐标系
|
||||
const DEBUG = false;
|
||||
// ====================================================
|
||||
|
||||
/**
|
||||
* 从固定模板中获取位置
|
||||
* @param centerX 中心X坐标
|
||||
* @param centerY 中心Y坐标
|
||||
* @param count 需要的位置数量
|
||||
* @param padding 边距
|
||||
* @param canvasWidth 画布宽度
|
||||
* @param canvasHeight 画布高度
|
||||
* @param radius 字符圆半径
|
||||
* @returns 位置数组
|
||||
*/
|
||||
/**
|
||||
* 随机选择一个模板并返回模板的实际位置数量
|
||||
* @returns 模板索引和模板的实际位置数量
|
||||
*/
|
||||
function selectTemplate(): { templateIndex: number } {
|
||||
const templateIndex = Math.floor(Math.random() * POSITION_TEMPLATES.length);
|
||||
return {
|
||||
templateIndex,
|
||||
};
|
||||
}
|
||||
|
||||
/**
|
||||
* 从指定模板中获取位置
|
||||
* @param templateIndex 模板索引
|
||||
* @param centerX 中心X坐标（逻辑像素）
|
||||
* @param centerY 中心Y坐标（逻辑像素）
|
||||
* @returns 位置数组（逻辑像素）
|
||||
*
|
||||
* 注意：POSITION_TEMPLATES 中的坐标是基于原始像素的，需要转换为逻辑像素（除以3）
|
||||
*/
|
||||
function getPositionsFromTemplate(
|
||||
templateIndex: number,
|
||||
centerX: number,
|
||||
centerY: number,
|
||||
): Array<{ x: number; y: number }> {
|
||||
const template = POSITION_TEMPLATES[templateIndex];
|
||||
|
||||
// 转换为绝对坐标（模板坐标除以3转换为逻辑像素）
|
||||
const positions: Array<{ x: number; y: number }> = [];
|
||||
for (const pos of template) {
|
||||
const x = centerX + pos.x / 3; // 转换为逻辑像素
|
||||
const y = centerY + pos.y / 3; // 转换为逻辑像素
|
||||
|
||||
positions.push({ x, y });
|
||||
}
|
||||
return positions;
|
||||
}
|
||||
|
||||
class FindWordDrawService extends BaseDrawService {
|
||||
colors: string[];
|
||||
characters: string[];
|
||||
debug: boolean = false; // Debug模式开关
|
||||
|
||||
constructor(
|
||||
canvas: Canvas,
|
||||
ctx: RenderingContext,
|
||||
options?: Record<string, any>,
|
||||
) {
|
||||
options = options || {};
|
||||
super(canvas, ctx, {
|
||||
title: '找一找 涂 色',
|
||||
subTitle: '找出相同的文字涂色',
|
||||
...options,
|
||||
});
|
||||
// 从options中读取debug参数，如果没有则使用全局DEBUG常量
|
||||
this.debug = options.debug === true || DEBUG;
|
||||
this.colors = ['#000'];
|
||||
this.characters = ['王'];
|
||||
}
|
||||
|
||||
async draw(list: Array<{ color: string; word: string }>) {
|
||||
this.setPrintConfig();
|
||||
|
||||
this.colors = list.map((item) => item.color || '#000');
|
||||
this.characters = list.map((item) => item.word || '日');
|
||||
this.clear();
|
||||
this.setPaper();
|
||||
|
||||
await this.drawHeader();
|
||||
|
||||
// 找字模板没有 drawLegend 部分
|
||||
this.drawDivider();
|
||||
this.drawContent();
|
||||
// await this.drawPrintFooter();
|
||||
}
|
||||
|
||||
drawContent() {
|
||||
const { ctx, characters, colors } = this;
|
||||
if (characters.length <= 0) return;
|
||||
|
||||
// 第一个字作为中心大字
|
||||
const firstChar = characters[0];
|
||||
const firstColor = colors[0];
|
||||
|
||||
// 计算内容区域（逻辑像素）
|
||||
const contentTop = this.currentY + 17; // 50/3≈17
|
||||
const contentBottom = this.canvasHeight - 27; // 80/3≈27
|
||||
const contentHeight = contentBottom - contentTop;
|
||||
|
||||
// 中心大字的参数
|
||||
const centerX = this.canvasWidth / 2;
|
||||
const centerY = contentTop + contentHeight / 2;
|
||||
|
||||
// 普通圆的参数（逻辑像素）
|
||||
const radius = 27; // 80/3≈27
|
||||
const fontSize = 24; // 72/3=24
|
||||
|
||||
// 先选择模板，获取模板的实际位置数量
|
||||
const { templateIndex } = selectTemplate();
|
||||
// 从固定模板中获取位置
|
||||
const positions = getPositionsFromTemplate(
|
||||
templateIndex,
|
||||
centerX,
|
||||
centerY,
|
||||
);
|
||||
const targetCount = positions.length; // 使用模板的实际位置数量（中心字已单独绘制）
|
||||
|
||||
// 生成所有要绘制的字符列表（包括第一个字和其他字）
|
||||
const allChars: Array<{ char: string; color: string }> = [];
|
||||
|
||||
// 如果只有一个字符，全部使用第一个字符
|
||||
if (characters.length === 1) {
|
||||
for (let i = 0; i < targetCount; i++) {
|
||||
allChars.push({ char: firstChar, color: firstColor });
|
||||
}
|
||||
} else {
|
||||
// 第一个字出现多次（根据总字符数决定，确保有足够的第一个字）
|
||||
const firstCharCount = Math.max(
|
||||
Math.floor(targetCount * 0.4),
|
||||
Math.floor(characters.length * 2),
|
||||
);
|
||||
for (let i = 0; i < firstCharCount; i++) {
|
||||
allChars.push({ char: firstChar, color: firstColor });
|
||||
}
|
||||
|
||||
// 其他字符各出现几次
|
||||
const remainingCount = targetCount - firstCharCount;
|
||||
const otherCharCount = Math.max(
|
||||
1,
|
||||
Math.floor(remainingCount / (characters.length - 1)),
|
||||
);
|
||||
for (let i = 1; i < characters.length; i++) {
|
||||
for (let j = 0; j < otherCharCount; j++) {
|
||||
allChars.push({ char: characters[i], color: colors[i] });
|
||||
}
|
||||
}
|
||||
|
||||
// 如果生成的字符数量还不够，用第一个字符补齐
|
||||
while (allChars.length < targetCount) {
|
||||
allChars.push({ char: firstChar, color: firstColor });
|
||||
}
|
||||
}
|
||||
|
||||
// 打乱顺序
|
||||
for (let i = allChars.length - 1; i > 0; i--) {
|
||||
const j = Math.floor(Math.random() * (i + 1));
|
||||
[allChars[i], allChars[j]] = [allChars[j], allChars[i]];
|
||||
}
|
||||
|
||||
// 根据实际生成的位置数量来截取字符（确保数量匹配）
|
||||
const charsToDraw = allChars.slice(0, positions.length);
|
||||
|
||||
// 绘制中心大字（去掉圆圈border，只绘制文字）
|
||||
ctx.fillStyle = '#333';
|
||||
ctx.font = `bold ${fontSize * 3}px "Microsoft Yahei"`; // 中心字是其他字的3倍
|
||||
ctx.textBaseline = 'middle';
|
||||
ctx.textAlign = 'center';
|
||||
ctx.fillText(firstChar, centerX, centerY);
|
||||
|
||||
// 绘制四周的字符
|
||||
positions.forEach((pos, index) => {
|
||||
const item = charsToDraw[index];
|
||||
const y = pos.y; // 已经是绝对坐标
|
||||
|
||||
// 绘制圆
|
||||
ctx.fillStyle = '#fff';
|
||||
ctx.strokeStyle = '#000';
|
||||
ctx.lineWidth = 1; // 4/3≈1
|
||||
ctx.beginPath();
|
||||
ctx.arc(pos.x, y, radius, 0, Math.PI * 2);
|
||||
ctx.fill();
|
||||
ctx.stroke();
|
||||
ctx.closePath();
|
||||
|
||||
// 绘制字符
|
||||
ctx.fillStyle = '#333';
|
||||
ctx.font = `bold ${fontSize}px "Microsoft Yahei"`;
|
||||
ctx.textBaseline = 'middle';
|
||||
ctx.textAlign = 'center';
|
||||
// Debug模式：显示坐标系索引值，否则显示文字
|
||||
const displayText = this.debug ? String(index) : item.char;
|
||||
ctx.fillText(displayText, pos.x, y, radius * 2);
|
||||
});
|
||||
}
|
||||
|
||||
// drawLine 已由基类的 drawDivider 替代，保留此方法以保持兼容
|
||||
drawLine(linY: number) {
|
||||
this.drawDivider();
|
||||
}
|
||||
}
|
||||
|
||||
export default FindWordDrawService;
|
||||
Reference in New Issue
Block a user