doodle-mini/miniprogram/service

ShapeDrawService 使用说明

概述

ShapeDrawService 是一个用于绘制图形涂色A4打印页的服务类，参考了 TextDrawService 的结构设计。

功能特性

• 支持最多6个图形的涂色页面绘制
• 包含三个部分：标题区域、示例区域、练习区域
• 自动避免图形重叠，保持适当间距
• 智能边界检查：距离A4纸下边小于20px时自动停止绘制，左右边距100px，上边距距离分割线20px
• 使用Canvas API直接绘制图形，性能更好
• 支持多种图形类型：三角形、四边形、多边形、圆形、椭圆、心形、五角星等

使用方法

1. 初始化

import ShapeDrawService from '../../service/shapeDrawService';

// 在页面中初始化
const canvas = res[0].node;
const ctx = canvas.getContext('2d');
this.shapeDrawService = new ShapeDrawService(canvas, ctx);

2. 绘制页面

// 准备图形数据
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. 练习区域：随机排列的图形轮廓，供用户涂色

支持的图形类型

• 三角形（钝角、直角、等腰）
• 四边形（正方形、长方形、平行四边形、菱形、梯形）
• 五边形、六边形
• 五角星、心形
• 圆形、椭圆、半圆、扇形、圆环

配置选项

可以通过构造函数传入配置选项：

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。