@math-pro/equal-split

等分图形（Equal Split）分数学习工具，支持将多种形状等分并着色，直观展示分子/分母及英文分数读法。

安装

pnpm add @math-pro/equal-split

使用

import { EqualSplit } from '@math-pro/equal-split'

export default function App() {
  return <EqualSplit />
}

功能

• 多种形状：圆形、三角形、正方形、矩形、五边形、六边形
• 等分切割：根据形状自动生成对应的等分数选项（2～12 等分）
• 着色工具：点击图形分块进行着色
• 橡皮擦工具：点击已着色分块取消着色
• 撤销：支持多步撤销着色/擦除操作
• 重置：清空所有选择，回到初始状态
• 分数展示：实时显示已着色块数（分子）与总等分数（分母）
• 英文读法：自动生成对应的英文分数读法（如 three fourths、two halves）

支持的等分数

| 形状 | 可选等分数 | |------|-----------| | Circle / Square / Rectangle | 2 ~ 12 | | Triangle | 2, 3, 4, 6, 9 | | Pentagon | 2, 5, 10 | | Hexagon | 2, 6, 12 |

交互说明

| 工具 | 操作 | |------|------| | Coloring | 点击空白分块为其着色 | | Eraser | 点击已着色分块取消着色 | | Undo | 撤销上一步操作 | | Reset | 清空所有选择，重新开始 |

文件结构

src/
├── constants.ts        # 类型、常量、分数英文转换函数
├── geometry.ts         # SVG 路径计算（各形状等分逻辑）
├── Toolbar.tsx         # 顶部工具栏（形状/等分选择 + 工具按钮）
├── ShapeCanvas.tsx     # SVG 画布区域
├── FractionInfo.tsx    # 右侧分数信息面板
└── EqualSplitIndex.tsx # 主组件（状态管理 + 布局）

导出

| 名称 | 说明 | |------|------| | EqualSplit | 主组件，开箱即用，无需传入任何 props |