只想做一个足够简单的白板。 | 𝓙𝓾𝓼𝓽 𝓪 𝓫𝓸𝓪𝓻𝓭.
大一小登的AI-Agent项目，目标是想做一个功能简单、部署简单，使用极其简单且符合直觉的白板，主要是为国内的初高中一体机教学使用设计
由于本人实际开发能力薄弱，所以本项目大量运用了AI-Agent技术（就是调用GitHub Agent功能来帮助我开发和高效推进功能的实现），所以代码可能没有“人味”，也可能存在相当多不合理的bug和开发方式，望大佬您轻喷
您可以在下面的Demo链接中快速体验本项目，也可以前往我的博客看看我做这个项目的前因后果。
如果大佬您觉得好的话，请给我点个star🌟吧~~~大学生真的很需要这个
graph LR
A[Aboard Project]
A --> D[在线Demo]
A --> E[博客文章]
click D "https://aboard.pp.ua" "在线演示"
click E "https://66619.eu.org/article/aboard" "技术文章"
graph LR
A[Aboard Project]
A --> B[main分支]
A --> C[dev/preview分支]
A --> D[dev/stable分支]
A --> E[copilot/xxx分支]
B --> F[branch Demo/主版本]
C --> G[branch Demo/最新测试版]
D --> H[branch Demo/稳定测试版]
E --> I[PR中Vercel提供临时链接]
click F "https://aboard.pp.ua" "主"
click G "https://dev-aboard.619.pp.ua" "最新测试"
click H "https://dev.aboard.pp.ua" "最新测试"
- 配置管理：支持导出和导入应用配置（JSON格式），并在导入时智能对比差异，让个性化设置轻松迁移。
- 性能优化：实现了功能模块的按需加载（Lazy Loading），大幅提升首屏加载速度。
- UI 优化：统一了导出弹窗和时间设置弹窗的界面风格，视觉体验更一致。
- 帮助系统扩展：为教具和时间显示设置添加了帮助内容，支持8种语言（简体中文、繁体中文、英语、日语、韩语、法语、德语、西班牙语）。
- 帮助按钮优化：调整帮助按钮位置至标题右侧，帮助弹窗置于最高层级（z-index: 99999）。
- 触控优化：增强全局触控设备兼容性，添加最小44x44px触控目标尺寸，移除触控高亮效果。
- 触控手势增强：使用 Pointer Events API 实现更可靠的双指捏合缩放，支持触控笔+手指组合手势，兼容各种触控设备。
- 形状预览优化：修复了形状绘制时预览线条比实际线条细的问题，实现了所见即所得。
- 插入图片修复：修复了插入图片功能无法正常显示编辑框的严重Bug。
- 箭头设置增强：将粗细标签统一为线条粗细，增加了箭头大小的上限（100px），并实现了箭头大小不小于线条粗细的动态约束。
- 点名器升级：新增 Excel/CSV 表格导入功能，支持自定义姓名列读取。
- 帮助系统：在各个设置面板中增加了帮助按钮，支持丰富的文本格式（加粗、下划线、颜色、字号）。
- 兼容性优化：全面升级为 Pointer Events，提升 Windows 触控设备和安卓大屏的兼容性与流畅度。
- 触控优化：新增双指捏合缩放画布功能（可在设置中开启/关闭），双击画布智能缩放，优化了触控操作的响应速度。
在帮助内容文件中（js/locales/help/*.js），您可以使用以下类似 Markdown 的语法来丰富显示效果：
- 加粗：
**加粗文本**-> 加粗文本 - 下划线：
__下划线文本__-> 下划线文本 - 颜色：
[color=red]红色文本[/color]-> 红色文本 - 字号：
[size=20px]大号文本[/size]-> 大号文本
这里面是AI写的功能介绍，挺详细的，可以打开看看啦
- 多种笔触类型：普通笔、铅笔、圆珠笔、钢笔、毛笔，满足不同书写需求
- 形状工具：支持绘制直线、矩形、圆形等几何形状，使用与笔相同的颜色和粗细属性
- 丰富线条样式：实线、虚线、点线、波浪线、双线、三线，可通过独立的线条样式设置窗口进行调整
- 智能橡皮擦：支持圆形和方形，大小可调（10-50px）
- 丰富颜色选择：预设8种常用颜色 + 自定义取色器
- 灵活粗细调节：笔触粗细1-50px可调
- 多种教学背景：空白、点阵、方格、田字格、英语四线格、五线谱、坐标系
- 可移动坐标系原点：坐标系原点默认在画布中心，点击"移动坐标原点"按钮后可在画布上拖动移动位置（支持触控屏）
- 自定义背景：支持上传图片作为背景，可调节大小和位置
- 背景图片编辑：背景图片支持拖动、旋转、缩放以及水平/垂直翻转
- 背景样式：8种预设背景颜色 + 自定义颜色，可调节透明度和图案深浅
- 直尺工具：支持两种样式（直尺 1 和直尺 2），可在画布上插入直尺，支持四边（上下左右）沿边缘画直线
- 三角板工具：支持两种类型
- 60°三角板（√3:1宽高比）：基于30-60-90度直角三角形
- 45°三角板（1:1宽高比）：基于45-45-90度等腰直角三角形
- 智能尺寸：教具按照图片原有比例插入，并自动缩放至画布面积的约20%
- 沿边缘画线：三角板的三条边（上边、左边、斜边）均支持沿边缘画直线，可画出完整三角形
- 自由绘图区：三角板的右下区域（斜边以下）允许用户自由绘图，不会触发单击和双击判定
- 自由操作：支持拖动移动位置、旋转角度、调整大小
- 缩放适配：教具在画布缩放后仍能正确移动、调整大小和显示，不会异常放大或位置偏移
- Word风格控件：双击教具显示8个调整控制点（四角+四边）
- 触控支持：支持双指缩放和旋转教具，不影响画布缩放
- 多实例支持：可同时插入多把直尺和三角板
- 双击控制：双击教具调出控制面板，方便调整
- 独立数量控制：画布上当前数量按每种教具类型（直尺1、直尺2、三角板60°、三角板45°）分别显示和控制，分两排显示避免拥挤
- 普通笔：标准书写笔触，粗细一致
- 圆珠笔：根据书写速度模拟压力，平滑的墨水流动效果
- 毛笔：带有毛边效果和笔锋感觉，模拟真实毛笔书写体验，墨水晕染效果
- 铅笔：灰色质感带颗粒纹理，模拟真实铅笔痕迹
- 钢笔：优雅的变宽笔触，根据方向和速度变化线条粗细
- 分页模式：支持多页管理，适合课堂演示和教学
- 预设尺寸：A4、A3、B5（横向/竖向），16:9、4:3宽屏
- 自定义尺寸：可自由设定画布宽高和比例
- 画布自动居中：确保画布在浏览器窗口正中心，上下左右边距相等
- 选择工具：可选择和操作画布上的笔迹和图片，支持复制和删除
- 移动画布：拖动工具或按住Shift键拖动画布
- 智能缩放：
- 鼠标：Ctrl+滚轮缩放画布，缩放中心跟随鼠标位置
- 触控：双指捏合缩放（支持在设置中开启/关闭），双击自动缩放/还原
- 支持50%-无上限缩放范围
- 初始画布大小：首次打开或刷新后，画布自动调整为浏览器窗口的80%大小
- 撤销/重做：支持最多50步历史记录（Ctrl+Z / Ctrl+Y）
- 全屏模式：专注创作，沉浸体验（F11）
- 刷新保护：刷新页面时会弹出警告提示，防止误操作导致画布内容丢失
- 正计时模式：支持设置起始时间，从指定时间开始计时
- 倒计时模式：精确倒计时，适合考试、演讲等场景
- 颜色自定义：
- 字体颜色选择：8种预设颜色 + 自定义颜色选择器
- 背景颜色选择：8种预设颜色 + 自定义颜色选择器
- 颜色设置应用于计时器显示和全屏模式
- 提示音系统：
- 页面加载时预加载4种内置提示音，确保即时播放
- 4种默认提示音排列成2行2列，选择更直观
- 支持上传多个自定义音频文件
- 自定义音频自动保存到本地，刷新后仍可使用
- 自定义音频支持试听功能
- 循环播放：支持设置循环播放次数（1-100次）
- 拖动与全屏：
- 支持鼠标和触摸拖动定位，移动更流畅不卡顿
- 网页内全屏显示，字体大小可调（10%-85%屏幕比例）
- 标题字体大小固定，不受时间字体滑块影响
- 最简显示模式：
- 点击"最简"按钮切换到仅显示时间的极简模式
- 双击时间数字即可恢复完整控制面板，恢复后可正常拖动
- 多实例支持：可同时创建多个独立计时器
- 时区支持：自动检测并显示用户当前时区的时间和日期
- 灵活显示：可选择显示日期、时间或两者
- 多种格式：
- 时间格式：12小时制/24小时制
- 日期格式：年-月-日、月-日-年、日-月-年、中文格式
- 全屏模式：支持单击或双击进入全屏时间显示
- 自定义样式：字体颜色、背景颜色、透明度可调
- 全屏自定义：全屏模式下支持独立的字体颜色、背景颜色和背景透明度设置
- 界面定制：工具栏大小、属性栏缩放、主题色可调
- 控制布局：控制按钮位置可选（四个角落），工具栏自动保持在窗口范围内
- 边缘吸附：拖动面板自动吸附到屏幕边缘，避免画布留痕
- 背景偏好：自定义属性栏中显示的背景图案
- 设置分组：可折叠的设置组，默认展开状态，点击即可查看详细选项
- 多语言支持：
- 支持中文简体、中文繁体、English、日本語、한국어、Français、Deutsch、Español
- 自动检测浏览器语言
- 在设置-通用中可随时切换语言
- 切换语言后立即生效
- 配置管理：支持导出当前配置为 JSON 文件，并在导入时智能对比差异，方便配置迁移和备份。
- 点名器导入：支持从 .xlsx, .xls, .csv 文件导入名单，自动识别列名。
- 导出功能：支持导出为PNG/JPEG图片
- 导出当前页、全部页面或指定页面
- 文件名自动包含用户当前时区的时间戳
- 多页导出时自动添加页码后缀（例如：文件名-1, 文件名-2）
- 自动保存与恢复：
- 使用 IndexedDB 技术，突破本地存储限制，支持保存大量高清画布内容
- 自动保存所有页面的绘图内容、背景设置、工具状态和上传的图片
- 刷新或重新打开页面时，会自动检测并询问是否恢复上次的会话内容
- 多页管理：分页模式下支持多页切换和管理
- 智能分页按钮：仅1页时显示"+"图标添加页面，多页时显示翻页箭头
- 指定页面导出支持选择单页或多页
目前Aboard已经能满足基本的批注和使用需求，我将分部分来介绍本项目实现的功能：
这里是本项目的核心功能聚集地，和大部分软件一样，其默认出现在底部，但可以被自由拖动，靠边框能实现吸附，能随浏览器窗口底部自己移动（事实上，本项目的框体均具有以上属性，我认为还是很友好的）
工具栏中有最常见的功能：撤销重做、笔、移动画布、橡皮、清空、背景、更多功能和设置
撤销重做~~~~所见即所得，最多支持50步
笔~~~~支持随意画，可选择“笔触类型”（可能在大屏上有区别，我用笔记本写写画画感觉没啥区别qwq），笔的颜色、粗细，也支持了取色器取色
移动~~~~变成小手来移动画布
橡皮~~~~能擦除笔迹，可选择形状和大小
清空~~~~所见即所得，会清空画布的所有笔迹（目前看可以通过撤销来还原，但我仍然不建议尝试…..）
背景~~~~可选择背景颜色，支持取色器取色（可在设置--背景中调整背景的透明度啥的），支持设置背景图案，我设置了贴合中国课堂的常见背景需求，且背景是支持分页独立配置的！！！
选择后可调整密度，便于调整点/线间宽度，也可以自己上传图片作为背景，可通过蓝色边框控件来调整位置、大小、旋转角度，还支持水平/垂直翻转
更多~~~~小功能区，包含"时间"、"计时"、"点名器"、"计分板"和"插入图片"功能
插入图片~~~~可将图片插入到画布上，支持拖动调整位置、缩放大小、旋转以及水平/垂直翻转。插入的图片大小会自动限制在画布的一半以内
小功能这块，我觉得我做的挺好的🤣，也花费了很多时间来调试和补充设置相关功能，力求满足所有需求
设置~~~~一些更高级的选项就在设置中啦，您可以根据需求自行调节，让Aboard更高地为您服务
他们默认出现在右上角，设置中可以调整显示的位置~（在我的设定中，这些按钮的显示位置是固定的，无法被拖动）
下载按钮⏬~~~~是导出画布的功能，目前做的较为完善啦~~您可以自行探索
+/-和缩放比例~~~~用于调节画布大小，触控屏上支持双指缩放，和绝大多数软件逻辑相同，这里的加减和输入比例是为了方便更多用户
全屏按钮~~~~点一下会网页全屏，可沉浸式使用Aboard
翻页组件~~~~简单基本但细节满满，所见即所得
时间显示组件~~~~对应更多中的“时间”选项，默认开启来提醒老师时间，更多功能可在“时间显示选项”里的设置按钮里调节（这一块做的很用心哒）
赛博教具
功能目前实现的就这些，虽然看着不多，但每一块我都花了很多心思，写起来简单，使用起来也简单，唯独实现起来不简单，希望您能多多体验下啦！！！
具体的Bug统计和To-Do List请参见我的博客文章
- Fork 本仓库到你的 GitHub 账号
- 进入仓库设置 (Settings)
- 在 Pages 选项中，选择 Source 为
main分支 - 点击 Save，等待部署完成
- 访问
https://你的用户名.github.io/Aboard
点击上方按钮即可快速部署到 Cloudflare Pages，享受赛博活佛的全球CDN加速。
如果需要完整功能（如加载公告），建议使用HTTP服务器运行：
# 使用Python
python3 -m http.server 8080
# 使用Node.js
npx http-server -p 8080
# 使用PHP
php -S localhost:8080然后在浏览器访问 http://localhost:8080
| 操作 | 方法 |
|---|---|
| 绘图 | 点击/触摸画布并拖动 |
| 选择工具 | 点击底部工具栏相应按钮 |
| 改变颜色/粗细 | 点击工具按钮，在弹出的属性面板中调节 |
| 撤销/重做 | Ctrl+Z / Ctrl+Y 或点击右上角按钮 |
| 缩放画布 | Ctrl+滚轮 或点击右上角缩放按钮（50%-无上限） |
| 移动画布 | 点击"移动"工具或按住Shift键拖动 |
| 全屏 | F11 或点击全屏按钮 |
| 清空画布 | 点击"清空"按钮（有确认提示） |
- 拖动面板：所有控制面板（工具栏、属性栏、控制按钮）均可拖动调整位置
- 图片背景：点击"背景" → 选择"图片" → 上传图片，可调整大小和位置
- 选择操作：使用选择工具点击画布元素，可复制或删除
- 分页管理：在设置中启用分页模式，使用右上角分页控件切换页面
- HTML5 Canvas - 高性能2D图形渲染
- Vanilla JavaScript - 无框架依赖，模块化架构
- CSS3 - 现代化UI设计
- ✅ 实时低延迟渲染，目标60fps
- ✅ 笔迹平滑算法，确保线条流畅
- ✅ 同时支持鼠标和触控输入，优化大屏触控设备兼容性
- ✅ 高DPI显示屏自适应
- ✅ 响应式界面，适配不同屏幕尺寸
- ✅ 本地存储自动保存
- ✅ GPU加速渲染优化，提升性能
- ✅ 触摸事件优化，支持多点触控拖动
- 按需加载 (Lazy Loading)：对非首屏必需的模块（如计时器、导出等）实现延迟加载，减少初始加载时间
- Canvas context的
desynchronized模式减少渲染延迟 - 单路径渲染减少绘制调用次数
- 防抖处理窗口resize事件
- 智能状态管理避免不必要的重绘
- 使用requestAnimationFrame优化拖动和动画性能
- 事件监听器按需添加/移除，减少内存占用
- CSS will-change属性优化拖动元素性能
- 触摸事件使用passive和non-passive模式优化
| 浏览器 | 支持情况 |
|---|---|
| Chrome | ✅ 最新版本 |
| Safari | ✅ 最新版本 |
| Firefox | ✅ 最新版本 |
| Edge | ✅ 最新版本 |
| iOS Safari | ✅ 支持 |
| Chrome Mobile | ✅ 支持 |
Aboard/
├── index.html # 主HTML文件
├── LICENSE # MIT许可证文件
├── package.json # 项目配置文件
├── announcements.json # 公告内容配置
├── css/
│ ├── style.css # 主样式表
│ └── modules/ # 模块化样式
│ ├── timer.css # 计时器样式
│ ├── time-display.css # 时间显示样式
│ ├── export.css # 导出功能样式
│ ├── feature-area.css # 功能区样式
│ ├── teaching-tools.css # 教具功能样式
│ ├── shape.css # 形状工具样式
│ ├── line-style-modal.css # 线条样式设置弹窗样式
│ ├── random-picker.css # 点名器样式
│ ├── scoreboard.css # 计分板样式
│ ├── insert-image.css # 插入图片样式
│ ├── toast.css # 消息提示样式
│ └── diff.css # 设置对比样式
├── js/
│ ├── main.js # 主应用入口
│ ├── drawing.js # 绘图引擎模块
│ ├── history.js # 历史记录管理模块
│ ├── background.js # 背景管理模块
│ ├── image-controls.js # 图片控制模块（背景图片编辑，支持翻转）
│ ├── insert-image.js # 插入图片模块（画布贴图功能，支持翻转）
│ ├── stroke-controls.js # 笔迹控制模块
│ ├── selection.js # 选择工具模块
│ ├── announcement.js # 公告管理模块
│ ├── export.js # 导出功能模块
│ ├── time-display.js # 时间显示模块
│ ├── collapsible.js # 可折叠面板模块
│ ├── shape-insertion.js # 形状插入模块
│ ├── text-insertion.js # 文本插入模块
│ ├── libs/ # 第三方库
│ │ └── xlsx.full.min.js # Excel文件处理库
│ ├── locales/ # 国际化语言文件
│ │ ├── zh-CN.js # 简体中文
│ │ ├── zh-TW.js # 繁体中文
│ │ ├── en-US.js # 英文
│ │ ├── ja-JP.js # 日语
│ │ ├── ko-KR.js # 韩语
│ │ ├── fr-FR.js # 法语
│ │ ├── de-DE.js # 德语
│ │ ├── es-ES.js # 西班牙语
│ │ └── help/ # 帮助内容翻译
│ │ ├── zh-CN.js # 简体中文帮助
│ │ ├── zh-TW.js # 繁体中文帮助
│ │ ├── en-US.js # 英文帮助
│ │ ├── ja-JP.js # 日语帮助
│ │ ├── ko-KR.js # 韩语帮助
│ │ ├── fr-FR.js # 法语帮助
│ │ ├── de-DE.js # 德语帮助
│ │ └── es-ES.js # 西班牙语帮助
│ └── modules/ # 功能模块
│ ├── timer.js # 计时器模块
│ ├── time-display-controls.js # 时间显示控制
│ ├── time-display-settings.js # 时间显示设置
│ ├── edge-drawing.js # 边缘绘制模块（沿教具边缘画线）
│ ├── teaching-tools.js # 教具功能模块
│ ├── shape-drawing.js # 形状绘制模块（支持直线、矩形、圆形）
│ ├── random-picker.js # 点名器模块
│ ├── scoreboard.js # 计分板模块
│ ├── settings-manager.js # 设置管理模块
│ ├── toast-manager.js # 消息提示模块
│ ├── line-style-modal.js # 线条样式设置弹窗模块
│ ├── i18n.js # 国际化核心模块
│ ├── help-system.js # 帮助系统模块
│ ├── browser-check.js # 浏览器兼容性检查
│ ├── gif-manager.js # GIF动图管理模块
│ ├── libgif.js # GIF解析库
│ ├── storage-manager.js # 存储管理模块
│ └── project-manager.js # 项目管理模块
├── img/ # 图片资源目录
│ ├── ruler_1.png # 直尺样式1
│ ├── ruler_2.png # 直尺样式2
│ ├── set_square_1.png # 60°三角板（√3:1宽高比）
│ └── set_square_2.png # 45°三角板（1:1宽高比）
├── public/ # 公开文档目录
│ ├── README.en.md # 英文版README
│ └── README.zh-TW.md # 繁体中文版README
├── sounds/ # 提示音文件夹
│ ├── class-bell.MP3 # 上课铃声
│ ├── exam-end.MP3 # 考试结束音
│ ├── gentle-alarm.MP3 # 柔和提示音
│ ├── digital-beep.MP3 # 数字提示音
│ └── README.md # 音频文件说明
├── tests/ # 测试文件夹
│ └── manual/ # 手动测试
│ └── verify_architecture.spec.js
└── README.md # 项目文档（简体中文）
项目采用面向对象的模块化设计，各功能模块职责清晰：
- DrawingEngine - 核心绘图引擎，处理所有绘图操作和笔触类型
- ShapeDrawingManager - 形状绘制管理，处理直线、矩形、圆形等几何形状的绘制
- LineStyleModal - 线条样式设置弹窗，提供独立的线条样式配置界面
- HistoryManager - 历史记录管理，实现撤销/重做功能
- BackgroundManager - 背景管理，处理背景颜色、图案渲染，支持可移动的坐标系原点
- SelectionManager - 选择管理，处理元素选择和操作
- SettingsManager - 设置管理，持久化用户偏好
- AnnouncementManager - 公告管理，处理首次访问提示
- TimerManager - 计时器管理，支持多实例计时器
- TimeDisplayManager - 时间显示管理，处理日期时间显示
- ExportManager - 导出管理，处理画布导出功能
- TeachingToolsManager - 教具管理，处理直尺和三角板的插入、移动、旋转和缩放
- EdgeDrawingManager - 边缘绘制管理，处理沿教具边缘画线功能
- RandomPickerManager - 点名器管理，处理点名器逻辑
- ScoreboardManager - 计分板管理，处理计分功能
- InsertImageManager - 插入图片管理，处理画布贴图功能，支持翻转
- ImageControls - 图片控制，处理背景图片的编辑和翻转
- DrawingBoard - 主应用类，集成所有模块并协调交互
- StorageManager - 存储管理，使用 IndexedDB 处理大容量数据存储
- ProjectManager - 项目管理，处理项目的导入导出
- ToastManager - 消息提示，提供统一的 UI 反馈
- Canvas context的
desynchronized模式减少渲染延迟 - 单路径渲染减少绘制调用次数
- 防抖处理窗口resize事件
- 智能状态管理避免不必要的重绘
- 使用requestAnimationFrame优化拖动和动画性能
- 事件监听器按需添加/移除，减少内存占用
- CSS will-change属性优化拖动元素GPU加速
- 触摸事件优化，提升大屏触控设备响应速度
- 拖动面板时自动禁用绘图，避免误操作
- 窗口调整后智能重新定位面板
- 全屏模式使用标准浏览器API，支持ESC退出
- 音频播放使用HTML5 Audio元素，避免Web Audio API复杂性
- 工具栏属性面板默认定位优化，位于工具栏上方更方便操作
- 时间显示选项面板使用精确的inset定位，避免位置偏移
- checkbox标签宽度优化，避免占用过多横向空间
- 计时器标题字体独立控制，不受时间字体大小滑块影响
- 所有可拖动面板统一支持触摸和鼠标操作
欢迎提交Issue和Pull Request！
- Fork本项目
- 创建特性分支 (
git checkout -b feature/AmazingFeature) - 提交更改 (
git commit -m 'Add some AmazingFeature') - 推送到分支 (
git push origin feature/AmazingFeature) - 开启Pull Request
本项目采用 MIT 许可证 - 详见 LICENSE 文件
感谢所有贡献者和使用者！如果这个项目对您有帮助，欢迎给个Star⭐，这样就对我很有帮助了
Made with ❤️ for educators and creators