feat: 生产 shape

miniprogram/service/README.md

@@ -0,0 +1,89 @@
+# ShapeDrawService 使用说明
+
+## 概述
+
+ShapeDrawService 是一个用于绘制图形涂色A4打印页的服务类，参考了 TextDrawService 的结构设计。
+
+## 功能特性
+
+- 支持最多6个图形的涂色页面绘制
+- 包含三个部分：标题区域、示例区域、练习区域
+- 自动避免图形重叠，保持适当间距
+- 智能边界检查：距离A4纸下边小于20px时自动停止绘制，左右边距100px，上边距距离分割线20px
+- 使用Canvas API直接绘制图形，性能更好
+- 支持多种图形类型：三角形、四边形、多边形、圆形、椭圆、心形、五角星等
+
+## 使用方法
+
+### 1. 初始化
+
+```typescript
+import ShapeDrawService from '../../service/shapeDrawService';
+
+// 在页面中初始化
+const canvas = res[0].node;
+const ctx = canvas.getContext('2d');
+this.shapeDrawService = new ShapeDrawService(canvas, ctx);
+```
+
+### 2. 绘制页面
+
+```typescript
+// 准备图形数据
+const shapes: ShapeCard[] = [
+    {
+        id: 'circle',
+        name: '圆形',
+        type: 'circle',
+        svg: '<circle cx="50" cy="50" r="36" stroke="#141414" stroke-width="1" fill="transparent"/>',
+        fillColor: '#ff0000',
+    },
+    // ... 更多图形
+];
+
+// 绘制页面
+this.shapeDrawService.draw(shapes);
+```
+
+### 3. 页面结构
+
+绘制的页面包含以下三个部分：
+
+1. **标题区域**：显示应用名称、提示信息和主标题
+2. **示例区域**：显示选中的图形及其对应的颜色和名称
+3. **练习区域**：随机排列的图形轮廓，供用户涂色
+
+## 支持的图形类型
+
+- 三角形（钝角、直角、等腰）
+- 四边形（正方形、长方形、平行四边形、菱形、梯形）
+- 五边形、六边形
+- 五角星、心形
+- 圆形、椭圆、半圆、扇形、圆环
+
+## 配置选项
+
+可以通过构造函数传入配置选项：
+
+```typescript
+const options = {
+    appName: '自定义应用名',
+    appHint: '自定义提示',
+    title: '自定义标题',
+    subTitle: '自定义副标题',
+};
+
+this.shapeDrawService = new ShapeDrawService(canvas, ctx, options);
+```
+
+## 注意事项
+
+1. 最多支持6个图形同时绘制
+2. 图形会自动避免重叠，保持适当间距
+3. 练习区域的图形会随机旋转，增加趣味性
+4. 智能边界检查：自动确保图形不会超出A4纸边界（下边距20px，左右边距100px，上边距距离分割线20px）
+5. 支持不同的打印头部类型（wechat、noLogoImage、LogoImage、minimal）
+
+## 示例
+
+参考 `miniprogram/pages/shape/index.ts` 中的实现，展示了如何在页面中使用 ShapeDrawService。