maths-kit

一个功能完善的数学工具包，包含直尺、量角器、三角板等工具，专为交互式白板和教育应用设计。

功能特性

• 🎯 多种工具：支持直尺、量角器以及三角板（30°和45°）
• 🎨 主题支持：支持亮色和暗色主题
• 🖱️ 交互操作：拖拽、旋转、拉伸等直观的操作控制
• 📏 精确测量：实时显示角度和长度测量结果
• 🔄 变换支持：完整的矩阵变换支持，用于定位和缩放
• 📐 标记线：支持在画布上标记线和圆
• 🎛️ 可定制：可配置的默认状态和样式

安装

npm install @netless/maths-kit
# 或
yarn add @netless/maths-kit
# 或
pnpm add @netless/maths-kit

快速开始

import { MathsKitManager, MathsKitType } from '@netless/maths-kit';

// 创建容器元素
const container = document.createElement('div');
container.style.position = 'absolute';
container.style.top = '0';
container.style.left = '0';
container.style.width = '100%';
container.style.height = '100%';
document.body.appendChild(container);

// 初始化管理器
const mathsKitManager = new MathsKitManager({
  container: container,
  target: document.body, // 绘图操作的目标元素
  theme: 'light', // 或 'dark'
  globalScale: 1,
});

// 激活管理器
mathsKitManager.setActive(true);

// 创建直尺
mathsKitManager.create(MathsKitType.Ruler);

// 创建量角器
mathsKitManager.create(MathsKitType.Protractor);

// 创建三角板
mathsKitManager.create(MathsKitType.Triangle30);
mathsKitManager.create(MathsKitType.Triangle45);

API 参考

MathsKitManager

用于创建和管理数学工具的主管理器类。

构造函数选项

interface MathsKitManagerOptions {
  /** 容器元素 */
  container: HTMLDivElement;
  /** 绘图操作的目标元素 */
  target: HTMLElement;
  /** 默认工具状态 */
  defaultKitState?: Omit<MathsKitState, 'custom' | 'zIndex' | 'type'>;
  /** 主题：'light' 或 'dark' */
  theme?: 'light' | 'dark';
  /** 全局缩放因子 */
  globalScale?: number;
}

方法

create(type: MathsKitType): void

创建一个新的数学工具。

示例：

mathsKitManager.create(MathsKitType.Ruler);

update(kitId: string, state: Partial<MathsKitState>): void

更新工具的状态。

示例：

mathsKitManager.update('Ruler-1234567890', {
  x: 0.5,
  y: 0.5,
  width: 500,
});

delete(kitId: string): void

根据ID删除工具。

示例：

mathsKitManager.delete('Ruler-1234567890');

setActive(isActive: boolean): void

激活或停用管理器。

示例：

mathsKitManager.setActive(true);

setTheme(theme: 'light' | 'dark'): void

更改所有工具的主题。

示例：

mathsKitManager.setTheme('dark');

事件

管理器继承自 EventEmitter2，因此可以监听事件：

// 监听状态变化
mathsKitManager.on('stateChange', (operation, key, value) => {
  console.log('状态已更改:', operation, key, value);
});

MathsKitType

可用工具类型的枚举：

enum MathsKitType {
  /** 直尺 */
  Ruler = 'Ruler',
  /** 45度三角板 */
  Triangle45 = 'Triangle45',
  /** 30度三角板 */
  Triangle30 = 'Triangle30',
  /** 量角器 */
  Protractor = 'Protractor',
}

MathsKitState

工具状态的接口：

interface MathsKitState {
  /** 工具类型 */
  type: MathsKitType;
  /** X坐标（相对于容器宽度的归一化数据） */
  x: number;
  /** Y坐标（相对于容器高度的归一化数据） */
  y: number;
  /** 工具宽度 */
  width: number;
  /** 工具高度 */
  height: number;
  /** 变换矩阵 */
  matrix: number[];
  /** Z轴索引 */
  zIndex: number;
  /** 自定义数据 */
  custom?: Record<string, any>;
}

组件

直尺 (Ruler)

带有测量刻度的直尺。支持：

• 拖拽移动位置
• 旋转并显示角度
• 拉伸调整长度
• 实时显示长度测量结果

量角器 (Protractor)

用于测量角度的半圆形量角器。支持：

• 拖拽移动位置
• 旋转
• 调整起始和结束角度
• 角度测量显示

三角板 (Triangle 30° & 45°)

30°-60°-90°和45°-45°-90°的直角三角形。支持：

• 拖拽移动位置
• 旋转
• 实时显示长度和角度测量结果

操作

所有工具支持以下操作：

• 拖拽：点击并拖拽以移动工具
• 旋转：使用旋转按钮旋转工具
• 拉伸：拖拽拉伸手柄以调整大小（如适用）
• 删除：点击删除按钮以移除工具

主题

工具包支持两种主题：

• 亮色主题：默认主题，带有浅色背景
• 暗色主题：暗色模式，为低光照环境调整了颜色

您可以使用 setTheme() 方法切换主题，或在构造函数中使用主题进行初始化。

浏览器支持

支持 ES6+ 的现代浏览器：

• Chrome (最新版本)
• Firefox (最新版本)
• Safari (最新版本)
• Edge (最新版本)

开发

# 安装依赖
pnpm install

# 启动开发服务器
pnpm dev

# 构建生产版本
pnpm build

# 代码检查
pnpm lint

# 修复代码检查问题
pnpm lint:fix

许可证

MIT

作者

hqer