90 lines
2.5 KiB
Markdown
90 lines
2.5 KiB
Markdown
# 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。
|