R524809
224 lines
7.5 KiB
TypeScript
224 lines
7.5 KiB
TypeScript
/**
|
|
* 找字涂色服务
|
|
* 根据模板类型绘制到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;
|