@math-pro/pin-board

钉板（Pin Board）绘图工具组件，在网格钉板上连线绘图，支持颜色选择、橡皮擦、撤销等操作。

安装

pnpm add @math-pro/pin-board

使用

import { PinBoard } from '@math-pro/pin-board'

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

功能

• 网格钉板：支持 5×5 和 10×10 两种网格密度
• 绘制模式：依次点击网格点连续连线，退出绘制模式即停止
• 橡皮擦模式：点击已有线段即擦除
• 空闲模式：点击线段可选中（支持多选），选中后可统一改色或删除
• 颜色选择：7 种颜色（红、蓝、绿、橙、紫、粉、黑），选色同时对已选中线段重新着色，颜色偏好持久化存储
• 撤销：支持多步撤销（绘制、删除、重置、改色均可撤销）
• 重置：清空所有线段（可撤销）
• 画布尺寸固定为 480×480，含 24px 内边距
• 触摸优化：触摸从画板四边或四角操作时使用有限边缘容差，拖拽期间只接收第一根手指，并在取消或失去 pointer capture 时自动清理预览状态。

BoardCanvas 可选接收 interactionConfig 调整粗指针命中半径和边缘容差。半径与容差使用 SVG viewBox 单位；未传入时沿用默认兼容值。

交互说明

| 模式 | 操作 | |---|---| | 空闲 | 点击线段选中 / 取消选中；选中后点色块改色；点删除移除所选 | | 绘制 | 点击网格点设置起点，继续点击依次连线；退出绘制按钮结束 | | 橡皮擦 | 点击任意线段立即擦除 |

导出

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