feat: 增加找字模板
This commit is contained in:
R524809
@@ -0,0 +1,300 @@
|
||||
import { PAPER_SIZE } from '../constants/colors';
|
||||
import {
|
||||
drawHeader as drawHeaderCommon,
|
||||
drawMiniHeader as drawMiniHeaderCommon,
|
||||
} from './headerDrawService';
|
||||
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坐标
|
||||
* @param padding 边距
|
||||
* @param canvasWidth 画布宽度
|
||||
* @param canvasHeight 画布高度
|
||||
* @param radius 字符圆半径
|
||||
* @returns 位置数组
|
||||
*/
|
||||
function getPositionsFromTemplate(
|
||||
templateIndex: number,
|
||||
centerX: number,
|
||||
centerY: number,
|
||||
): Array<{ x: number; y: number }> {
|
||||
const template = POSITION_TEMPLATES[templateIndex];
|
||||
|
||||
// 转换为绝对坐标并检查边界
|
||||
const positions: Array<{ x: number; y: number }> = [];
|
||||
for (const pos of template) {
|
||||
const x = centerX + pos.x;
|
||||
const y = centerY + pos.y;
|
||||
|
||||
positions.push({ x, y });
|
||||
}
|
||||
return positions;
|
||||
}
|
||||
|
||||
class FindWordDrawService {
|
||||
headerType: PrintHeader = 'wechat';
|
||||
canvas: WechatMiniprogram.Canvas;
|
||||
ctx: RenderingContext;
|
||||
options: Record<string, any>;
|
||||
paperSize: PaperSize;
|
||||
currentX: number;
|
||||
currentY: number;
|
||||
colors: string[];
|
||||
characters: string[];
|
||||
debug: boolean = false; // Debug模式开关
|
||||
|
||||
constructor(
|
||||
canvas: Canvas,
|
||||
ctx: RenderingContext,
|
||||
options?: Record<string, any>,
|
||||
) {
|
||||
options = options || {};
|
||||
this.canvas = canvas;
|
||||
this.ctx = ctx;
|
||||
this.paperSize = 'A4';
|
||||
this.options = {
|
||||
appName: '涂鸦丫小程序',
|
||||
appHint: '识字|识图|练字|打印',
|
||||
title: '找一找 涂 色',
|
||||
subTitle: '给文字涂上相同的颜色',
|
||||
...options,
|
||||
};
|
||||
// 从options中读取debug参数，如果没有则使用全局DEBUG常量
|
||||
this.debug = options.debug === true || DEBUG;
|
||||
this.currentX = 0;
|
||||
this.currentY = 0;
|
||||
this.colors = ['#000'];
|
||||
this.characters = ['王'];
|
||||
this.setPrintConfig();
|
||||
}
|
||||
|
||||
setPrintConfig() {
|
||||
const printConfig = getApp().getPrintConfig();
|
||||
this.headerType = printConfig.header;
|
||||
this.options.appName = printConfig.appName;
|
||||
}
|
||||
|
||||
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();
|
||||
if (this.headerType !== 'minimal') {
|
||||
await this.drawHeader();
|
||||
} else {
|
||||
this.drawMiniHeader();
|
||||
}
|
||||
|
||||
// 找字模板没有 drawLegend 部分
|
||||
this.drawContent();
|
||||
}
|
||||
|
||||
async drawHeader() {
|
||||
this.currentX = 80;
|
||||
this.currentY = 80;
|
||||
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: (currentY) => {
|
||||
this.currentY = currentY;
|
||||
this.drawLine(this.currentY);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
drawMiniHeader() {
|
||||
drawMiniHeaderCommon({
|
||||
canvas: this.canvas,
|
||||
ctx: this.ctx,
|
||||
options: {
|
||||
appName: this.options.appName || '涂鸦丫小程序',
|
||||
title: this.options.title || '找一找 涂 色',
|
||||
},
|
||||
onHeaderDrawn: (currentY) => {
|
||||
this.currentY = currentY;
|
||||
this.drawLine(this.currentY);
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
drawContent() {
|
||||
const { canvas, ctx, characters, colors } = this;
|
||||
if (characters.length <= 0) return;
|
||||
|
||||
// 第一个字作为中心大字
|
||||
const firstChar = characters[0];
|
||||
const firstColor = colors[0];
|
||||
|
||||
// 计算内容区域
|
||||
const contentTop = this.currentY + 50;
|
||||
const contentBottom = canvas.height - 80;
|
||||
const contentHeight = contentBottom - contentTop;
|
||||
|
||||
// 中心大字的参数
|
||||
const centerX = canvas.width / 2;
|
||||
const centerY = contentTop + contentHeight / 2; // 内容区域垂直居中
|
||||
|
||||
// 普通圆的参数（和textDrawService一致）
|
||||
const radius = 80;
|
||||
const fontSize = 72;
|
||||
|
||||
// 先选择模板，获取模板的实际位置数量
|
||||
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; // 已经是绝对坐标，不需要再加contentTop
|
||||
|
||||
// 绘制圆
|
||||
ctx.fillStyle = '#fff';
|
||||
ctx.strokeStyle = '#000';
|
||||
ctx.lineWidth = 4;
|
||||
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(linY: number) {
|
||||
const { canvas, ctx } = this;
|
||||
|
||||
ctx.strokeStyle = '#000';
|
||||
ctx.lineWidth = 2;
|
||||
ctx.beginPath();
|
||||
ctx.moveTo(80, linY);
|
||||
ctx.lineTo(canvas.width - 80, linY);
|
||||
ctx.stroke();
|
||||
}
|
||||
|
||||
setPaper() {
|
||||
const { ctx, canvas } = this;
|
||||
const { pixelRatio: dpr } = wx.getWindowInfo();
|
||||
let { width, height } = PAPER_SIZE[this.paperSize];
|
||||
width = width * dpr;
|
||||
height = height * dpr;
|
||||
|
||||
canvas.width = width;
|
||||
canvas.height = height;
|
||||
|
||||
this.clear();
|
||||
ctx.fillStyle = '#fff';
|
||||
ctx.fillRect(0, 0, width, height);
|
||||
}
|
||||
|
||||
clear() {
|
||||
const canvas = this.canvas;
|
||||
this.ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
}
|
||||
}
|
||||
|
||||
export default FindWordDrawService;
|
||||
Reference in New Issue
Block a user