# 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/shape.ts` 中的实现，展示了如何在页面中使用 ShapeDrawService。