简体中文 | English
Link: https://songlh.top/paint-board/
已完成功能：
- 画笔
- 支持颜色变化，并可根据绘图速度实时调整线宽
- 提供多种画笔效果，荧光、多色、蜡笔、喷雾、泡泡...
- 橡皮擦
- 通过鼠标移动线性擦除内容
- 绘制文字
- 双击画板后输入文字可在指定位置绘制
- 画板拖拽
- 按住空格键后可以无限拖拽画板
- 选择模式
- 进入选择模式后，可以通过点击元素来进行元素框选，并通过按住手柄来缩放或移动元素，点击 Backspace 键可删除选中的元素
- 图层
- 画板内容是按照图层顺序进行显示，可以新增或者删除排序图层
- 提供撤销，反撤销，清除画板，内容保存为图像等功能
待完成功能：
- 移动端适配
- 背景颜色切换
- 图片绘制
- 画板缩放
- 认证登录 + 多画板
git clone https://github.com/LHRUN/paint-board.git
pnpm install
pnpm dev
├─components
│ ├─info // 帮助信息
│ ├─layer // 多图层
│ ├─mask // 蒙层
│ ├─toolPanel // 工具面板
│ └─icons
│
├─hooks
│ └─event.ts // event hook
├─pages
│ └─board // 画板页
│
├─types
│
├─i18n
│
└─utils
├─constants
├─history.ts // 历史记录
├─common.ts
├─layer.ts // 图层
├─paintBoard.ts // 画本主逻辑
├─storage.ts // 缓存
├─cursor.ts // 鼠标光标
├─select.ts // 选择元素
└─element
├─eraser.ts // 橡皮擦
├─element.ts // 基础元素
├─freeDraw.ts // 画笔
└─text.ts // 文本元素- 首先是需要建立一个 PaintBoard 画板类，所有画板上的操作和数据都在此处理，例如初始化数据，渲染元素，拖拽画板等
class PaintBoard {
canvas: HTMLCanvasElement
context: CanvasRenderingContext2D
...
constructor(canvas: HTMLCanvasElement) {}
// 初始化
init() {}
// 渲染
render() {}
// 拖拽
drag() {}
...
}- 然后基于画板，根据用户当前的行为和当前画板的配置，建立并初始化当前行为的 canvas 绘图元素，比如画笔，橡皮擦，文字等等，比如以下基础类型
class CanvasElement {
type: string // 元素类型
layer: number // 图层
// ...
constructor(type: string, layer: number) {
this.type = type
this.layer = layer
// ...
}
// ...
}- 最后根据渲染逻辑，还会封装一些通用的逻辑来改变canvas上最终的展示，比如撤回，反撤回，图层排序等