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-12-11 13:02:44 +08:00
parent 2c32235568
commit 3c0e2af10d
89 changed files with 2774 additions and 2816 deletions
Download Patch File Download Diff File Expand all files Collapse all files
miniprogram/service/findWordDrawService.ts
+28 -113
View File
@@ -1,8 +1,4 @@
import { PAPER_SIZE } from '../constants/colors';
import {
drawHeader as drawHeaderCommon,
drawMiniHeader as drawMiniHeaderCommon,
} from './headerDrawService';
import { BaseDrawService } from './baseDraw';
import { POSITION_TEMPLATES } from './findWordTemplate';
// ==================== Debug 开关 ====================
@@ -35,13 +31,11 @@ function selectTemplate(): { templateIndex: number } {
/**
* 从指定模板中获取位置
* @param templateIndex 模板索引
* @param centerX 中心X坐标
* @param centerY 中心Y坐标
* @param padding 边距
* @param canvasWidth 画布宽度
* @param canvasHeight 画布高度
* @param radius 字符圆半径
* @returns 位置数组
* @param centerX 中心X坐标（逻辑像素）
* @param centerY 中心Y坐标（逻辑像素）
* @returns 位置数组（逻辑像素）
*
* 注意：POSITION_TEMPLATES 中的坐标是基于原始像素的，需要转换为逻辑像素（除以3）
*/
function getPositionsFromTemplate(
templateIndex: number,
@@ -50,25 +44,18 @@ function getPositionsFromTemplate(
): 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;
const y = centerY + pos.y;
const x = centerX + pos.x / 3; // 转换为逻辑像素
const y = centerY + pos.y / 3; // 转换为逻辑像素
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;
class FindWordDrawService extends BaseDrawService {
colors: string[];
characters: string[];
debug: boolean = false; // Debug模式开关
@@ -79,29 +66,15 @@ class FindWordDrawService {
options?: Record<string, any>,
) {
options = options || {};
this.canvas = canvas;
this.ctx = ctx;
this.paperSize = 'A4';
this.options = {
appName: '涂鸦丫小程序',
appHint: '识字|识图|练字|打印',
super(canvas, ctx, {
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 }>) {
@@ -111,6 +84,8 @@ class FindWordDrawService {
this.characters = list.map((item) => item.word || '日');
this.clear();
this.setPaper();
// 绘制Header
if (this.headerType !== 'minimal') {
await this.drawHeader();
} else {
@@ -118,64 +93,30 @@ class FindWordDrawService {
}
// 找字模板没有 drawLegend 部分
this.drawDivider();
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;
const { 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 contentTop = this.currentY + 17; // 50/3≈17
const contentBottom = this.canvasHeight - 27; // 80/3≈27
const contentHeight = contentBottom - contentTop;
// 中心大字的参数
const centerX = canvas.width / 2;
const centerY = contentTop + contentHeight / 2; // 内容区域垂直居中
const centerX = this.canvasWidth / 2;
const centerY = contentTop + contentHeight / 2;
// 普通圆的参数（和textDrawService一致）
const radius = 80;
const fontSize = 72;
// 普通圆的参数（逻辑像素）
const radius = 27; // 80/3≈27
const fontSize = 24; // 72/3=24
// 先选择模板，获取模板的实际位置数量
const { templateIndex } = selectTemplate();
@@ -242,12 +183,12 @@ class FindWordDrawService {
// 绘制四周的字符
positions.forEach((pos, index) => {
const item = charsToDraw[index];
const y = pos.y; // 已经是绝对坐标，不需要再加contentTop
const y = pos.y; // 已经是绝对坐标
// 绘制圆
ctx.fillStyle = '#fff';
ctx.strokeStyle = '#000';
ctx.lineWidth = 4;
ctx.lineWidth = 1; // 4/3≈1
ctx.beginPath();
ctx.arc(pos.x, y, radius, 0, Math.PI * 2);
ctx.fill();
@@ -265,35 +206,9 @@ class FindWordDrawService {
});
}
// drawLine 已由基类的 drawDivider 替代，保留此方法以保持兼容
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);
this.drawDivider();
}
}