feat:架构代码优化

2025-12-11 13:02:44 +08:00
parent 2c32235568
commit 3c0e2af10d
89 changed files with 2774 additions and 2816 deletions
@@ -0,0 +1,172 @@
+# Service 目录绘制服务改造完成总结
+
+## 改造目标
+
+将所有绘制服务统一使用 `baseDraw.ts` 和 `baseHeaderDraw.ts` 作为基类，提取公共部分并统一 Header 绘制。
+
+## 完成的工作
+
+### 1. ✅ 统一基础服务类
+
+所有绘制服务现在都继承自 `BaseDrawService`（位于 `service/baseDraw.ts`）：
+
+- ✅ `TextDrawService` - 文字涂色服务
+- ✅ `ShapeDrawService` - 图形涂色服务
+- ✅ `FindWordDrawService` - 找字涂色服务
+- ✅ `WordDrawService` - 田字格练字服务
+
+### 2. ✅ 统一 Header 绘制
+
+所有服务使用统一的 Header 绘制功能（位于 `service/baseHeaderDraw.ts`）：
+
+- `drawBaseHeader()` - 完整 Header（包含 Logo、应用名称、标题、副标题）
+- `drawBaseMiniHeader()` - 迷你 Header（简化版本）
+
+### 3. ✅ 统一使用逻辑像素
+
+所有服务现在使用逻辑像素（尺寸除以3），与数学模块保持一致：
+
+- Canvas 尺寸通过 `setPaper()` 统一处理 DPR（device pixel ratio）
+- 所有绘制代码中的硬编码尺寸都已转换为逻辑像素
+- 坐标计算统一使用 `this.canvasWidth` 和 `this.canvasHeight`
+
+### 4. ✅ 清理重复代码
+
+删除了以下重复方法，统一使用基类实现：
+
+- `setPrintConfig()` - 统一在基类中实现
+- `setPaper()` - 统一在基类中实现
+- `clear()` - 统一在基类中实现
+- `drawHeader()` / `drawMiniHeader()` - 统一在基类中实现
+- `drawDivider()` - 统一在基类中实现
+
+## 改造详情
+
+### TextDrawService
+
+**改造内容：**
+
+- 继承 `BaseDrawService`
+- 移除自定义的 `setPaper()`, `clear()`, `drawHeader()`, `drawMiniHeader()`
+- 所有尺寸转换为逻辑像素：
+    - 半径：80 → 27
+    - 字体：72px → 24px, 48px → 16px
+    - 边距：80 → 27, 220 → 73
+    - 坐标：200 → 67, 304 → 101
+
+**关键方法：**
+
+- `drawLegend()` - 绘制示例区域
+- `drawContent()` - 绘制内容区域
+
+### ShapeDrawService
+
+**改造内容：**
+
+- 继承 `BaseDrawService`
+- 移除自定义的绘制方法
+- 所有尺寸转换为逻辑像素：
+    - 图形大小：200 → 67, 180 → 60
+    - 字体：36px → 12px
+    - 间距：120 → 40, 160 → 53
+
+**关键方法：**
+
+- `drawLegend()` - 绘制示例区域
+- `drawContent()` - 绘制内容区域
+
+### FindWordDrawService
+
+**改造内容：**
+
+- 继承 `BaseDrawService`
+- 移除自定义的绘制方法
+- 所有尺寸转换为逻辑像素：
+    - 半径：80 → 27
+    - 字体：72px → 24px
+    - 模板坐标转换：`pos.x / 3`, `pos.y / 3`
+
+**关键方法：**
+
+- `drawContent()` - 绘制找字内容（中心大字 + 四周字符）
+
+**特殊处理：**
+
+- `getPositionsFromTemplate()` 函数中增加了坐标转换逻辑，将模板中的原始像素坐标转换为逻辑像素
+
+### WordDrawService
+
+**改造内容：**
+
+- 继承 `BaseDrawService`
+- 移除自定义的绘制方法
+- 所有尺寸转换为逻辑像素：
+    - 田字格大小：140 → 47
+    - 边距：120 → 40, 50 → 17
+    - 间距：24 → 8, 36 → 12
+
+**关键方法：**
+
+- `drawLayout()` - 绘制页眉和基础布局
+- `drawContent()` - 绘制田字格和练字内容
+- `drawPracticeContent()` - 绘制练习内容
+- `getMaxGridLayout()` - 计算最大网格布局
+
+## 架构优势
+
+1. ✅ **代码复用**：公共逻辑集中在 `BaseDrawService` 基类中
+2. ✅ **统一 Header**：所有服务使用相同的 Header 绘制逻辑
+3. ✅ **统一像素标准**：所有服务使用逻辑像素，保持一致
+4. ✅ **易于维护**：修改 Header 或基础功能只需修改一个地方
+5. ✅ **类型安全**：TypeScript 类型支持完整
+
+## 注意事项
+
+### 坐标转换
+
+所有硬编码的尺寸值都已转换为逻辑像素（除以3）：
+
+```typescript
+// 原始像素 → 逻辑像素
+const radius = 27; // 80/3≈27
+const fontSize = 24; // 72/3=24
+const margin = 40; // 120/3=40
+```
+
+### 模板坐标转换
+
+`FindWordDrawService` 中使用的 `POSITION_TEMPLATES` 坐标是基于原始像素的，需要在使用时转换：
+
+```typescript
+const x = centerX + pos.x / 3; // 转换为逻辑像素
+const y = centerY + pos.y / 3; // 转换为逻辑像素
+```
+
+### Canvas 尺寸
+
+所有服务现在统一使用：
+
+- `this.canvasWidth` - 逻辑像素宽度
+- `this.canvasHeight` - 逻辑像素高度
+
+这些值在 `setPaper()` 中设置，已经处理了 DPR。
+
+## 向后兼容性
+
+- ✅ `drawServiceFactory.ts` 接口无需修改
+- ✅ 所有服务的公共接口保持不变
+- ✅ 只改变了内部实现方式
+
+## 后续优化建议
+
+1. 可以考虑将 `findWordTemplate.ts` 中的坐标模板也转换为逻辑像素，避免运行时转换
+2. 可以考虑创建更多的基础绘制工具函数（如绘制表格、绘制网格等）
+3. 可以考虑支持更多 Paper 尺寸（目前仅支持 A4）
+
+## 测试建议
+
+1. 验证所有绘制服务功能正常
+2. 验证 Header 正确显示
+3. 验证尺寸和比例正确
+4. 验证不同 Header 类型（wechat, LogoImage, noLogoImage, minimal）
+5. 验证打印输出质量